JavaScript如何用展开运算符更新嵌套数组指定索引元素与对象属性

针对两个核心更新需求，可通过展开运算符避免全量重写结构、消除冗余代码，具体实现如下：

核心操作对应写法 #

• 更新数组指定索引元素：无需全量重写整个数组，通过展开运算符拼接未改动的后续元素即可。对应title数组仅修改索引0元素的需求，写法为[新的索引0位置值, ...原数组.slice(1)]，可自动保留索引1及之后的所有内容，无需重复书写固定的后续元素。
• 批量更新对象数组的特定属性：无需全量重写每个对象的所有字段，通过Array.map遍历数组，搭配对象展开运算符保留所有原有字段，仅覆盖需要修改的属性即可，对应leftColumn数组仅修改每个对象label、其余内容完全保留的需求。

精简后完整代码 #

const mockData = {
  title: ["Javascript", "Selected Topic"],
  leftColumn: [
    {
      key: "name",
      label: "Javascript Topic Name",
      type: "string",
    },
    {
      key: "id",
      label: "Javasctipt Topic Id",
      type: "string",
    },
  ],
};

const handleType = (val) => {
  // 全量复用mockData基础结构，仅修改需变动的字段
  return {
    ...mockData,
    // 仅修改title数组索引0元素，自动保留其余位置内容
    title: [val.type, ...mockData.title.slice(1)],
    // 遍历leftColumn，自动保留每个对象的key、type等原有字段，仅替换label中的框架名前缀
    leftColumn: mockData.leftColumn.map(item => ({
      ...item,
      label: item.label.replace(/Javascript|Javasctipt/g, val.type)
    }))
  }
};

优化效果 #

• 完全消除重复代码：原有switch中三个case重复的title数组、leftColumn对象结构全部复用mockData原有内容，无需重复书写。
• 规避手动书写的拼写错误：原有代码手动重写字段时出现的Javasctipt、Reacr这类笔误，通过正则匹配原有前缀替换的方式自动解决。后续如果修改原有字段（比如给leftColumn加新的desc字段），只需要修改mockData即可，所有分支逻辑自动同步。
• 适配后续结构扩展：如果后续title数组新增固定元素，或者leftColumn新增条目、新增字段，不需要修改handleType的核心逻辑。

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