如何逐个更新JavaScript嵌套对象 为每个子对象添加新键值对

场景1：直接修改原对象（原地修改） #

直接遍历原对象的第一层属性值，拿到子对象的引用后直接新增属性即可：

const sourceObj = {
  a:{name:'a'},
  b:{name:'b'},
  c:{name:'c'},
};

// 遍历所有第一层子对象，直接新增属性
Object.values(sourceObj).forEach(childObj => {
  childObj.newField = false;
});

因为JS中对象是引用类型，此处修改会直接生效到原对象中，无需额外赋值操作。

场景2：生成新对象（不污染原对象） #

如果需要保留原对象不变，生成符合要求的新对象，可以浅拷贝子对象后新增属性：

const sourceObj = {
  a:{name:'a'},
  b:{name:'b'},
  c:{name:'c'},
};

const targetObj = Object.fromEntries(
  Object.entries(sourceObj).map(([key, childObj]) => {
    // 解构浅拷贝子对象，再追加新属性
    return [key, {...childObj, newField: false}];
  })
);

如果子对象存在更深层级的嵌套，需要深拷贝的话可以替换浅拷贝逻辑为structuredClone(childObj)再修改属性即可。

常见问题说明 #

如果之前遍历只拿到了第一层的键名，没有获取到对应的子对象引用，就会无法修改嵌套内容，只要通过键名取到对应子对象sourceObj[key]后再操作即可。

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