JavaScript中如何给对象数组指定元素的属性单独赋值？

1. 所有元素属性同步修改的原因 #

Array.prototype.fill()方法接收引用类型参数时，填充到数组每一位的是同一个值的内存引用，而非独立的新对象。
你代码中传入fill的{test_1: 0, test_2: true}是一个单独创建的对象，数组长度为3，三个位置的元素都指向同一个内存地址的对象。修改任意下标元素的属性，本质都是修改同一个对象的值，因此所有元素的对应属性都会同步变更。

2. 仅修改指定元素属性的实现方案 #

方案一：初始化数组时生成独立对象 #

放弃直接用fill填充对象，改用Array.from或map批量生成独立的对象实例，保证每个数组元素指向不同的内存地址：

// Array.from 方式，每次回调返回新对象
let data = Array.from({length: 3}, () => ({test_1: 0, test_2: true}));

// 也可以用fill空值后map生成：Array(3).fill().map(() => ({test_1: 0, test_2: true}))

function f(index) {
    data[index].test_1 = 5;
    console.log(data);
}

f(0); // 仅下标0的元素test_1变为5，其余保持原值

方案二：修改时替换为新对象 #

如果已经用fill生成了数组，修改对应下标元素时通过解构生成新对象替换，避免修改原引用：

let data = Array(3).fill({test_1: 0, test_2: true});

function f(index) {
    // 解构原有属性，覆盖需要修改的字段，生成新对象替换对应位置
    data[index] = {...data[index], test_1: 5};
    console.log(data);
}

f(0);

内容的提问来源于stack exchange，提问作者J.M.