JavaScript中如何为对象数组的现有对象新增属性且保留原有值

问题原因 #

• 你在map的参数里仅解构提取了items属性，直接丢失了外层对象的testid等原有字段
• 返回值的结构不符合预期，你直接把items的属性平铺到了根层级，没有保留原有的嵌套结构
• 没有对items不存在的场景做分支处理，当items为undefined时，拼接出来的newval会变成undefined - undefined的无效值

修复代码 #

const result = data.map(item => {
  // items不存在时直接返回原对象，不做修改
  if (!item.items) return item
  // 保留外层原有属性，仅给items对象新增属性
  return {
    ...item,
    items: {
      ...item.items,
      newval: `${item.items.id} - ${item.items.desc}`
    }
  }
})

简写版本 #

如果偏好单行写法可以用三目运算符简化：

const result = data.map(item => item.items ? 
  {...item, items: {...item.items, newval: `${item.items.id} - ${item.items.desc}`}} 
  : item
)

因为提前判断了items存在，所以不需要再用可选链?.访问属性，逻辑更简洁。

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