如何在不修改原数组的情况下修改JavaScript数组中的元素值

这种在不改变原数组前提下更新指定元素的需求，在React这类强调不可变数据的场景里特别常见，我给你两种实用的实现方式：

方法一：用Array.map（最简洁通用） #

map方法会返回一个全新数组，遍历过程中我们只对目标元素做特殊处理，其他元素直接复用原引用即可：

const array = [{id: 1, title: "this"}, {id: 2, title: "that"}];
const [targetId, newTitle] = [2, "foo foo foo"]; // 解构传入的参数

const newArray = array.map(item => {
  // 匹配到目标id时，返回新对象（复制原属性+覆盖title）
  if (item.id === targetId) {
    return { ...item, title: newTitle };
  }
  // 非目标元素直接返回原对象，避免不必要的复制
  return item;
});

console.log(newArray); // 输出预期结果
console.log(array); // 原数组完全未被修改

这里的关键是用对象展开语法{...item}创建新对象，而非直接修改原对象的title属性，这样原数组里的对象也不会被改动。

方法二：已知目标索引时的快速实现 #

既然你已经找到了目标对象的索引，那可以直接复制数组后替换对应位置的元素：

const array = [{id: 1, title: "this"}, {id: 2, title: "that"}];
const [targetId, newTitle] = [2, "foo foo foo"];
const targetIndex = 1; // 假设你已找到的索引

// 先复制原数组（用展开语法或slice()都可以）
const newArray = [...array];
// 替换目标位置的元素为新对象，而非修改原对象
newArray[targetIndex] = { ...newArray[targetIndex], title: newTitle };

console.log(newArray); // 符合预期的新数组
console.log(array[targetIndex] === newArray[targetIndex]); // false，说明是全新对象

⚠️ 注意：绝对不能直接修改newArray[targetIndex].title，因为[...array]只是浅拷贝数组，数组内的对象还是原引用，直接改属性会同步到原数组的对象上，违背“不修改原数组”的要求。

核心原则 #

不管用哪种方法，都要遵守两个关键点：

• 原数组本身不能被修改（禁用push、splice这类会改变原数组的方法）
• 目标对象不能被直接修改（必须创建新对象替换原位置的对象）

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