javaScript中数组添加元素的几种方法总结

场景：今天遇到需要实现的小功能，前端是对象数组，后端接口返回一个对象，需要把对象放到数组中；

在JavaScript中，将一个对象加入一个对象数组可以通过多种方式实现。以下是几种常见的方法：

方法1：使用 push() 方法

push() 方法将元素添加到数组的末尾。

let objArray = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
let newObj = { id: 3, name: 'Charlie' };

// 将新对象添加到数组末尾
objArray.push(newObj);

console.log(objArray);
// 输出: [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }]

方法2：使用展开运算符（…）

展开运算符可以用于合并数组或添加新元素。

let objArray = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
let newObj = { id: 3, name: 'Charlie' };

// 创建一个新数组，包含原数组的所有元素和新对象
objArray = [...objArray, newObj];

console.log(objArray);
// 输出: [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }]

方法3：使用 concat() 方法

concat() 方法用于合并数组，也可以用于添加新元素。

let objArray = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
let newObj = { id: 3, name: 'Charlie' };

// 将新对象合并到数组中
objArray = objArray.concat(newObj);

console.log(objArray);
// 输出: [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }]

或者合并另一个数组：

let objArray = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
let newObjs = [{ id: 3, name: 'Charlie' }, { id: 4, name: 'Dave' }];

// 合并两个数组
objArray = objArray.concat(newObjs);

console.log(objArray);
// 输出: [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }, { id: 4, name: 'Dave' }]

方法4：直接赋值（如果知道索引）

如果知道要插入的位置，可以直接赋值：

let objArray = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
let newObj = { id: 3, name: 'Charlie' };

// 在索引2的位置插入新对象（如果索引超出范围，数组长度会自动扩展）
objArray[2] = newObj;

console.log(objArray);
// 输出: [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }]

方法5：使用 unshift() 添加到数组开头

如果需要将对象添加到数组的开头，可以使用 unshift()：

let objArray = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
let newObj = { id: 3, name: 'Charlie' };

// 将新对象添加到数组开头
objArray.unshift(newObj);

console.log(objArray);
// 输出: [{ id: 3, name: 'Charlie' }, { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]

注意事项

引用类型：对象是引用类型，直接添加对象时，添加的是对象的引用。如果修改原对象，数组中的对象也会受到影响。

let obj = { id: 1, name: 'Alice' };
let objArray = [];
objArray.push(obj);

obj.name = 'Bob'; // 修改原对象
console.log(objArray); // 输出: [{ id: 1, name: 'Bob' }]
如果需要避免这种情况，可以添加对象的副本：
objArray.push({ ...obj }); // 使用展开运算符创建副本

性能：对于大型数组，push() 和 unshift() 的性能较好（编码时要注意，这两个直接修改的原数组，而不是接收返回值），而展开运算符和 concat() 会创建新数组，可能影响性能。

总结

添加到末尾：push() 或 […array, newObj]。

添加到开头：unshift()。

合并数组：concat() 或 […array1, …array2]。

根据场景选择合适的方法！