如何使用JavaScript修改数组中嵌套对象的键名

核心思路 #

对内层嵌套的Organization数组做二次遍历处理，全程采用不可变更新的方式，既不修改原始数据，也能完全保留原有数据的结构和属性顺序。

实现代码 #

基础版本（仅修改内层team键为teamName，外层属性保持不变） #

const newArray = myArray.map(item => {
  return {
    // 保留外层所有原有属性
    ...item,
    // 遍历处理内层Organization数组
    Organization: item.Organization.map(orgItem => {
      // 只对包含team属性的对象做键名替换
      if ('team' in orgItem) {
        const { team, ...rest } = orgItem
        return {
          teamName: team,
          ...rest
        }
      }
      // 无team属性的对象直接返回，不做修改
      return orgItem
    })
  }
})

扩展版本（同时修改外层id为userId + 内层team为teamName） #

如果需要同时修改外层键名，可以用以下写法：

const newArray = myArray.map(item => {
  // 拆分外层需要修改的id和其余属性
  const { id, ...outerRest } = item
  return {
    userId: id,
    ...outerRest,
    Organization: item.Organization.map(orgItem => {
      if ('team' in orgItem) {
        const { team, ...rest } = orgItem
        return {
          teamName: team,
          ...rest
        }
      }
      return orgItem
    })
  }
})

方案优势 #

• 无副作用：全程基于扩展运算符生成新对象，不会修改原始数据
• 结构完全一致：所有原有属性的顺序、数组元素的顺序都和原数据保持一致
• 原生实现：无第三方依赖，代码逻辑清晰易读，性能满足绝大多数业务场景
• 容错性高：对Organization数组中没有team属性的对象无影响，不会破坏原有数据

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