javascript - 为什么当数组更新时我引用数组元素的对象没有更新？

Question

我对 Javascript 中的对象引用如何在数组方面工作感到困惑，并且没有找到与此特定问题相关的任何 Material 。我有以下代码。我初始化一个名为 arr 的对象数组，并将一个新变量 c 设置为等于数组中的第一个元素。如果我更改数组元素，变量 c 也会按预期更改。因此我假设 c 是指向数组第一个元素的指针。

但是，如果我将 arr 完全设置为一个新数组，则变量 c 不会更新。我希望它 A) 更新为新数组的第一个元素“chameleon”，或者更有可能 B) 变得未定义。

将arr设置为等于新数组后，变量c指向什么对象？它会成为自己的对象吗？

var arr = [{animal: 'cat'}, {animal: 'bear'}];
var c = arr[0];
console.log(JSON.stringify(c.animal));
// Prints 'cat'

arr[0].animal = 'iguana';
console.log(JSON.stringify(c.animal));
// Prints 'iguana'

arr = [{animal: 'chameleon'}, {animal: 'bear'}];
console.log(JSON.stringify(c.animal));
// Prints 'iguana' instead of 'chameleon'

Answer 1

c 不是对 arr 第一个元素的引用。它是对一个对象的引用，而该对象恰好位于 arr 中。无论 arr 发生什么情况，c 都会继续引用该对象，除非您为 c 分配新值。

在结束之前的第二行中，您将使用新值覆盖arr变量。 c 值仍然引用它已经引用的同一个对象。用全新的值替换 arr 不会改变这一点。

What object is the variable c pointing to after the arr is set equal to a new array? Does it become its own object?

与重新分配arr之前它所指向的对象相同。没有改变。

另一个演示:

var arr = [{animal: 'cat'}, {animal: 'bear'}];
var c = arr[0];

console.log(c.animal);
// Prints 'cat'

// access the value in arr[0] and modify its `animal` property
arr[0].animal = 'iguana';
console.log(c.animal);
// Prints 'iguana'

// REPLACE the 0th element of arr with a new value
arr[0] = { animal: 'pig' };
console.log(c.animal);
// still prints 'iguana'