const data = [{ name: 'John' }]; const obj = data[0]; 为什么改变obj的值 data的值也改变

在 JavaScript 中，对象是通过引用进行传递的。当你将 `data[0]` 赋值给 `obj` 时，实际上是将引用传递给了 `obj`，而不是创建了一个新的对象。

因此，`obj` 和 `data[0]` 指向相同的对象，它们在内存中引用了同一个对象。所以，如果你修改了 `obj` 的值，实际上是直接修改了原始对象，因此 `data[0]` 的值也会改变。

下面是一个简单的示例来说明这个行为：

const data = [{ name: 'John' }];
const obj = data[0];

obj.name = 'Jane';

console.log(data[0]);   // 输出: { name: 'Jane' }
console.log(obj);       // 输出: { name: 'Jane' }

在这个示例中，我们创建了一个包含一个对象的数组 `data`。然后，我们将 `data[0]` 赋值给了变量 `obj`。然后，我们修改了 `obj` 的 `name` 属性为 'Jane'。

最后，我们打印了 `data[0]` 和 `obj` 的值。可以看到，无论是通过 `data[0]` 还是通过 `obj` 访问对象的属性，它们都指向同一个对象，并且对其中一个对象进行的修改会影响到另一个对象。

如果你想要避免这种情况，可以使用展开运算符 `{...data[0]}` 创建一个新对象的浅拷贝，或者使用 `Object.assign()` 方法创建一个新的对象副本，这样对副本的修改就不会影响到原始对象。例如：

const data = [{ name: 'John' }];
const obj = { ...data[0] };

obj.name = 'Jane';

console.log(data[0]);   // 输出: { name: 'John' }
console.log(obj);       // 输出: { name: 'Jane' }

在这个示例中，我们使用展开运算符 `{...data[0]}` 创建了一个新的对象 `obj`，它是原始对象 `data[0]` 的浅拷贝。然后，我们修改了 `obj` 的 `name` 属性为 'Jane'。可以看到，原始对象 `data[0]` 的值保持不变，而 `obj` 的值被修改为 'Jane'。