JavaScript扩展运算符更新嵌套数组疑问：slice为何不生效？

这个问题我之前也踩过坑，核心原因是**Array.slice()和Array.splice()的行为完全不一样**，再结合React状态更新对「不可变性」的要求，咱们一步步拆解：

1. 先搞懂两个方法的本质差异 #

• splice()是「原地修改」方法：它会直接改变调用它的数组本身。你代码里先通过[...inst.hobbies]创建了原hobbies数组的副本，然后调用hobbies.splice(hobbyIndex,1)，这个操作直接把副本数组里对应索引的元素删掉了——所以最后返回的{...inst, hobbies}里的hobbies是已经被修改过的新数组，React能检测到状态变化，页面自然就更新了。

• slice()是「返回新数组」的方法：它不会修改原数组，只会返回一个包含原数组指定范围元素的新数组。你现在的代码里只是调用了hobbies.slice(hobbyIndex,1)，但根本没把这个返回的新数组赋值给hobbies变量——也就是说，你创建的hobbies副本从头到尾都没变过！控制台日志里看到的「预期值」其实是slice()返回的临时新数组，但你没把它用起来，所以React拿到的还是原来的hobbies数组，页面当然不会有变化。

2. 用slice()实现删除的正确写法 #

要让slice()生效，你需要把删除索引前后的数组片段合并成一个新数组，替换原来的hobbies：

const instructors = this.state.instructors.map((inst,idx) => { 
  if (idx === randInst) { 
    // 用slice截取删除索引之前和之后的部分，合并成新数组
    const updatedHobbies = [
      ...inst.hobbies.slice(0, hobbyIndex),
      ...inst.hobbies.slice(hobbyIndex + 1)
    ];
    return {...inst, hobbies: updatedHobbies} 
  }
  return inst; 
});

或者更简洁的写法，直接在返回对象里处理：

return {...inst, hobbies: [...inst.hobbies.slice(0, hobbyIndex), ...inst.hobbies.slice(hobbyIndex + 1)]}

3. 结合React状态更新的逻辑 #

React的状态更新依赖不可变性——也就是说，你不能直接修改原state里的数组/对象，必须返回一个新的数组/对象。不管用splice()还是slice()，只要保证最终返回的是新的数组，就能触发状态更新：

• 用splice()时，你修改的是原数组的副本（通过[...inst.hobbies]创建的新数组），所以不会污染原state，完全符合要求；
• 用slice()时，你通过合并片段生成新数组，同样满足不可变性的规则。

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