JavaScript中如何向数组内添加对象？

你想要把对象{d:4}合并到数组[{a:1,b:2,c:3}]的已有对象里，得到[{a:1,b:2,c:3,d:4}]，但你当前的代码用扩展运算符[...a,d]会把d作为新元素添加到数组，输出结果是[{a:1,b:2,c:3}, {d:4}]，不符合预期。

下面是几种正确的实现方式：

情况1：数组中只有一个对象 #

直接将数组第一个元素和目标对象合并，再放回数组：

let a = [{a:1,b:2,c:3}];
let d = {d:4};

const result = [{...a[0], ...d}];
console.log(result); // 输出: [{a: 1, b: 2, c: 3, d: 4}]

情况2：数组中有多个对象，需要给每个对象都添加属性 #

遍历数组，对每个对象进行合并：

let a = [{a:1,b:2,c:3}, {x:5,y:6}];
let d = {d:4};

const result = a.map(item => ({...item, ...d}));
console.log(result); // 输出: [{a: 1, b: 2, c: 3, d: 4}, {x: 5, y: 6, d: 4}]

用Object.assign实现合并 #

如果你更习惯用Object.assign，也可以这样写：

let a = [{a:1,b:2,c:3}];
let d = {d:4};

const result = [Object.assign({}, a[0], d)];
console.log(result); // 输出: [{a: 1, b: 2, c: 3, d: 4}]

注意：上面的方法都是创建新对象，不会修改原数组里的原始对象。如果需要直接修改原对象，可以这样做：

// 修改原数组的第一个对象
Object.assign(a[0], d);
console.log(a); // 输出: [{a: 1, b: 2, c: 3, d: 4}]

内容的提问来源于stack exchange，提问作者Rohit Verma