本文介绍在 javascript 中仅更新数组内某个对象的部分属性（如 creator、title、message）而保留其余字段（如 id）不变的多种方法，重点推荐使用扩展运算符的简洁写法，并对比分析其优势与适用场景。
本文介绍在 javascript 中仅更新数组内某个对象的部分属性（如 creator、title、message）而保留其余字段（如 id）不变的多种方法，重点推荐使用扩展运算符的简洁写法，并对比分析其优势与适用场景。
在实际开发中，我们常需局部更新数组中某一项对象的若干字段，同时确保其他属性（尤其是不可变标识如 id）保持原值。以如下数据为例：
const myArray = [
{"id": 0, "creator": "Foo", "title": "title1", "message": "message1"},
{"id": 1, "creator": "Bar", "title": "title", "message": "message2"}
];
const payload = {"creator": "creator3", "title": "title3", "message": "message3"};
const index = 0; // 目标索引
最直观的方式是逐字段赋值（如 myArray[0].creator = payload.creator），但代码冗长且不易维护。你当前使用的数组解构赋值：
[myArray[index].creator, myArray[index].title, myArray[index].message] = [payload.creator, payload.title, payload.message];
虽可行，但耦合性强、可读性弱，且难以扩展（新增字段需同步修改两边数组）。
✅ 推荐方案：对象扩展运算符（Spread Syntax）
一行代码即可完成浅层合并，天然保留原对象中未被 payload 覆盖的属性（如 id）：
myArray[index] = { ...myArray[index], ...payload };
该写法语义清晰：先展开原对象所有自有可枚举属性，再用 payload 的同名属性覆盖，最终生成一个新对象并赋值回数组。它具备以下优势：
- ✅ 不可变友好：创建新对象，避免直接修改原引用（若需严格不可变，可配合 Object.freeze 或使用 structuredClone 处理嵌套对象）；
- ✅ 扩展性强：payload 可动态增减字段，无需修改更新逻辑；
- ✅ 简洁安全：无副作用，不依赖索引遍历或手动字段映射。
⚠️ 注意事项：
- 仅适用于浅层属性合并；若 payload 包含嵌套对象（如 {"user": {"name": "Alice"}}），不会深度合并，而是整体替换；
- 若需深度合并或条件更新（如仅当 payload 某字段非 undefined 时才覆盖），建议封装为工具函数：
const updateObjectAt = (arr, index, updates) => {
if (index = arr.length) throw new Error('Index out of bounds');
arr[index] = { ...arr[index], ...updates };
return arr;
};
// 使用
updateObjectAt(myArray, 0, payload);
此外，也可借助 Object.assign() 实现等效效果：
Object.assign(myArray[index], payload); // ⚠️ 注意：这是就地修改，会改变原对象引用
虽然更短，但属于突变操作，在强调不可变性的场景（如 React 状态更新、Redux）中应避免。
总结：对于“局部更新对象字段”这一高频需求，{...original, ...updates} 是兼顾可读性、健壮性与函数式编程理念的最佳实践。它简洁、安全、易于理解，是现代 JavaScript 开发中的标准写法。
