数组指定索引元素替换：可变与不可变实现对比

这两个函数都是实现不修改原数组的前提下，生成指定索引位置元素被替换的新数组，属于不可变操作的实现，下面直接对比两者的优劣：

方案一：扩展复制后直接赋值 #

function replace(array, index, item) {
  const newArray = [...array];
  newArray[index] = item;
  return newArray;
}

优势 #

• 代码直观易懂，符合常规的「复制-修改」思维，新手也能快速理解
• 性能更优：仅需一次数组浅拷贝（扩展运算符）+ 一次索引赋值，底层操作次数更少，处理大数组时性能差距会更明显
• 行为和原生数组索引赋值完全一致：比如index超出数组长度时会自动扩展数组长度；index为负数时，会给数组添加对应名称的属性（这是JS数组的原生特性，逻辑统一）

劣势 #

• 若要同时实现多元素替换/插入，扩展起来不如切片拼接灵活

方案二：切片拼接替换 #

function replace(array, index, item) {
  return [
    ...array.slice(0, index),
    item,
    ...array.slice(index + 1)
  ];
}

优势 #

• 逻辑偏向「拆分-插入-合并」，如果需要扩展为多元素替换/插入场景，写法更容易调整

劣势 #

• 性能略差：需要执行两次slice生成子数组，再通过扩展运算符拼接，底层数组创建和元素复制的操作次数更多
• 负数索引行为异常：比如传入index = -1（意图替换倒数第一个元素）时，slice(-1 + 1) = slice(0)会返回整个原数组，最终生成的新数组是「原数组前n-1个元素 + item + 整个原数组」，完全不符合预期；而方案一的行为和原生数组操作一致，不会出现这种逻辑错误
• 代码相对繁琐，理解成本更高

总结 #

如果是常规的正整数索引替换场景，方案一更值得推荐——性能更好、代码直观，且行为和原生数组操作统一，不易出现意外问题。

如果需要处理复杂的范围替换/插入，或者更习惯「拆分拼接」的思维，方案二可作为备选，但必须注意它在负数索引下的异常行为。

内容的提问来源于stack exchange，提问作者André Lima e Silva