如何在前端为API响应数据新增自定义键值对

拿到接口返回的响应数据后，优先用无副作用的方式处理数据，不要直接修改原始响应对象，避免引发其他引用位置的异常。最常用的实现方式是用数组的map方法遍历生成新数据，具体实现如下：

基础实现（推荐） #

map方法会返回全新的数组，搭配对象展开运算符可以在保留原有字段的基础上，追加需要的新键值对：

// 接口返回的原始响应数据
const apiRes = [
  {
    "userId": 1,
    "id": 3,
    "title": "fugiat veniam minus"
  },
  {
    "userId": 1,
    "id": 4,
    "title": "et porro tempora"
  }
]

// 数据处理
const formattedData = apiRes.map(item => {
  return {
    ...item, // 保留原对象所有字段
    // 新增自定义字段，值可以根据业务逻辑灵活设置
    // 示例中id为4的项completed设为true，其余为false，和目标结构一致
    completed: item.id === 4
  }
})

处理后打印formattedData就能得到你需要的目标数据结构。

兼容旧环境写法 #

如果需要兼容不支持ES6对象展开运算符的老旧环境，可以换成Object.assign实现，效果完全一致：

const formattedData = apiRes.map(item => {
  return Object.assign({}, item, {
    completed: item.id === 4
  })
})

注意事项 #

• 不推荐直接遍历原数组给对象追加属性（比如for循环里直接写item.completed = false），这种方式会直接修改原始响应对象，如果原始数据在其他逻辑块被引用，很容易出现难以排查的联动bug
• 如果新增的字段是固定值，直接写死赋值即可，比如所有项都加completed: false就不需要额外判断
• 如果只需要给数组内部分特定项追加字段，遍历的时候加对应判断分支，不符合条件的项直接返回原对象即可

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