如何在JavaScript中为返回的JSON对象添加新的键值对

你使用Object.assign出现值覆盖的原因是操作对象层级错误，没有针对每个子级对象做属性新增，而是直接操作了顶层响应对象。以下是两种可行的实现方式：

方式1：直接修改原响应对象 #

如果你可以接受修改原始响应数据，直接遍历所有子对象新增字段即可：

// 假设res为你拿到的JSON响应对象
for (const idx in res) {
  if (res.hasOwnProperty(idx)) {
    // 可根据需求自定义newUrl的取值，支持动态拼接子对象的字段
    res[idx].newUrl = "test/112/testname"
  }
}

方式2：生成新对象不污染原始数据 #

如果需要保留原始响应对象不变，使用扩展运算符或者Object.assign对每个子对象做属性扩展即可：

const newRes = Object.fromEntries(
  Object.entries(res).map(([idx, item]) => [
    idx,
    {
      ...item,
      newUrl: "test/112/testname"
    }
  ])
)

如果要用Object.assign实现和上面扩展运算符相同的效果，写法如下，不会出现覆盖问题：

const newRes = Object.fromEntries(
  Object.entries(res).map(([idx, item]) => [
    idx,
    Object.assign({}, item, { newUrl: "test/112/testname" })
  ])
)

注意：调用Object.assign时第一个参数要传空对象作为目标，第二个参数传原始子对象，第三个参数传要新增的属性，这样才会在复制原始属性的基础上新增字段，不会覆盖原有数据。

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