JavaScript如何提取数组对象嵌套属性并添加到对应父对象

• payload是普通对象而非数组，直接使用[...payload]展开对象会触发类型错误，数组扩展运算符仅对可迭代对象/数组生效。
• payload.data是数组类型，直接访问payload.data.primary_role无法拿到有效值，数组本身不存在该属性，必须遍历数组内的单个元素才能访问到每个元素的primary_role属性。
• 原有赋值逻辑是给数组对象本身添加属性，而非给数组内的每个元素新增字段，和需求逻辑完全不符。
• 额外注意：你提供的示例数据中第一个元素的name属性值缺少闭合单引号，需要修正为'name': 'User One',，否则会触发语法错误。

方案1：原地修改原对象 #

直接修改原有payload结构，不需要生成新对象，性能开销更小：

payload.data.forEach((item) => {
  item.primaryRole = item.primary_role.name
})

// 打印验证结果
console.log(payload)

方案2：生成新对象（不修改原始数据） #

如果不希望改动原始payload的数据，可以通过浅拷贝生成全新的结构，适合状态管理等不可变数据场景：

const updatedPayload = {
  // 保留原对象所有顶层属性
  ...payload,
  // 遍历data数组生成新的数组项，保留原有字段的同时新增primaryRole
  data: payload.data.map((item) => ({
    ...item,
    primaryRole: item.primary_role.name
  }))
}

// 打印验证结果
console.log(updatedPayload)

两种方案执行后，data数组内的每个元素都会携带对应值的primaryRole字段，和你预期的结构完全一致。

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