如何在JavaScript中仅为对象数组中特定元素的属性赋值

Question

我有一个对象数组，并使用Array.prototype.fill()分配它们的属性和值。我想为数组中特定元素的属性指定一个新值。

例如：

let data = Array(3).fill({test_1: 0, test_2: true});
function f(index) {
data[index].test_1 = 5;
console.log(data);
}
f(0);

但是，数组中的所有对象都有自己的属性，而不是将该值指定给特定对象的属性。

这是输出：

// Actual result
[
{
test_1: 5,
test_2: true
},
{
test_1: 5,
test_2: true
},
{
test_1: 5,
test_2: true
}
];
// Expected result
[
{
test_1: 5,
test_2: true
},
{
test_1: 0,
test_2: true
},
{
test_1: 0,
test_2: true
}
];

不是只有第一个对象将5作为test_1属性的值，而是所有三个对象都将5作为其test_1属性的值。

所以，我的问题是：

• 为什么f()为数组中所有元素的相同属性分配相同的值
• 如何仅为数组中特定元素的属性赋值

Answer 1

除非您想用基元类型填充Array.fill，否则不要使用它。

通过这个let data = Array(3).fill({test_1: 0, test_2: true})，您每次都传递相同的对象，所以您的数组包含3倍的相同对象，那么如果您修改数组的任何元素，实际上它是通过引用修改的相同对象。为了避免这种情况，请将Array.from语法与映射回调结合使用。像这样：

let data = Array.from({length: 3},  _ => ({test_1: 0, test_2: true}))
function f(index) {
data[index].test_1 = 5;
console.log(data);
}
f(0)

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

由于每个人都指向内存中的同一地址，其中一个地址的更改也会导致其他地址的更改。

这应该有效：

let data = [...Array(3)].map(() => ({ test_1: 0, test_2: true }));
function f(index) {
data[index].test_1 = 5;
console.log(data);
}
f(0);