在JavaScript开发过程中，向数组中推入对象是非常高频的操作，无论是存储接口返回的多条数据，还是动态维护本地状态列表，都需要用到这类操作。但很多开发者在实操时会遇到推入后数据被意外修改、多个数组元素指向同一个对象等问题，核心原因是对对象的引用特性和数组push方法的特性理解不够深入。
基础推入方式：push方法
JavaScript数组自带的push方法是最常用的向数组末尾添加元素的方式，推入对象时语法和推入普通数据类型一致，直接将对象作为参数传入即可。
// 定义一个空数组
let userList = [];
// 定义要推入的对象
let user = {
id: 1,
name: '张三',
age: 20
};
// 使用push方法推入对象
userList.push(user);
console.log(userList);
// 输出: [{id: 1, name: '张三', age: 20}]
常见错误场景与解决方法
错误1：重复推入同一个引用对象
对象是引用类型，如果多次将同一个对象推入数组，那么数组中的多个元素会指向同一个内存地址，修改其中一个元素，其他元素也会同步变化。
let item = { value: 1 };
let arr = [];
// 重复推入同一个对象
arr.push(item);
arr.push(item);
// 修改第一个元素
arr[0].value = 2;
console.log(arr[1].value); // 输出2，第二个元素也被修改了
解决方法：每次推入时创建新的对象副本，避免引用同一个对象。
let arr = [];
// 每次推入时创建新对象
arr.push({ value: 1 });
arr.push({ value: 1 });
arr[0].value = 2;
console.log(arr[1].value); // 输出1，互不影响
错误2：推入后修改原对象影响数组元素
如果推入的是原对象的引用，后续修改原对象也会导致数组中的元素发生变化。
let sourceObj = { name: '测试' };
let arr = [];
arr.push(sourceObj);
// 修改原对象
sourceObj.name = '修改后';
console.log(arr[0].name); // 输出"修改后"
解决方法：推入时使用对象拷贝，比如展开运算符或者Object.assign方法，生成新的对象再推入。
let sourceObj = { name: '测试' };
let arr = [];
// 使用展开运算符拷贝对象后推入
arr.push({ ...sourceObj });
sourceObj.name = '修改后';
console.log(arr[0].name); // 输出"测试"，不受影响
进阶推入场景
批量推入多个对象
如果要推入多个对象，可以直接在push方法中传入多个参数，也可以使用展开运算符将对象数组展开后推入。
let arr = [];
let obj1 = { id: 1 };
let obj2 = { id: 2 };
let obj3 = { id: 3 };
// 方式1：直接传多个参数
arr.push(obj1, obj2, obj3);
// 方式2：推入对象数组
let objList = [{ id: 4 }, { id: 5 }];
arr.push(...objList);
console.log(arr.length); // 输出5
条件判断后推入对象
很多时候需要根据条件判断是否推入对象，可以在push之前做判断，或者先构造对象再判断。
let arr = [];
let score = 85;
let student = { name: '李四', score: score };
// 只有分数大于60才推入数组
if (score > 60) {
arr.push(student);
}
console.log(arr.length); // 输出1
注意事项总结
- 推入对象时注意对象的引用特性，避免多个数组元素指向同一个对象
- 推入前如果需要保留原对象的状态，记得先做对象拷贝再推入
- push方法会修改原数组，如果需要不修改原数组的操作，可以先拷贝原数组再推入
- 批量推入多个对象时，使用展开运算符可以简化代码逻辑
掌握向数组正确推入对象的方法，能够有效避免很多数据异常问题，在处理列表类数据时会更加得心应手。