在JavaScript中不变地更新对象某些属性的最佳方法是什么？

Question

说我们有一个像这样的对象：

const obj = {
  foo: {
    a: { type: 'foo', baz: 1 },
    b: { type: 'bar', baz: 2 },
    c: { type: 'foo', baz: 3 }
  }
}

现在，我要更新所有属性baz到5 ，如果type的物业的foo是foo 。 而且我想以不变的方式修改它，这意味着它不会修改原始对象，而是返回一个新对象。

Answer 1

我通常为浅层副本编写Object.create() ，但为深层副本（嵌套对象） JSON.parse(JSON.stringify(nestedObject))

const obj = {
  foo: {
    a: { type: 'foo', baz: 1 },
    b: { type: 'bar', baz: 2 },
    c: { type: 'foo', baz: 3 }
  }
}
var temp = JSON.parse(JSON.stringify(obj))

for(var i in temp.foo) {
  if(temp.foo[i].type == "foo") {
    temp.foo[i].baz = 5;
  }
}
console.log(temp);
console.log(obj);

Answer 2

Object.assign非常适合此操作，来自docs ：

Object.assign（）方法用于将所有可枚举的自身属性的值从一个或多个源对象复制到目标对象。 它将返回目标对象。

您可以像这样使用它：

Object.assign(
    {},
    obj,
    {
        foo: {
            a: {
                baz: obj.foo.a.type === 'foo' ? 5 : obj.foo.a
            }
        }
    }
);

Answer 3

您可以使用Object.entries() ， Array.prototype.map() ，传播元素，计算属性， Object.assign()

 const obj = { foo: { a: { type: 'foo', baz: 1 }, b: { type: 'bar', baz: 2 }, c: { type: 'foo', baz: 3 } } } let key = Object.keys(obj).pop(); let res = {[key]: Object.assign({}, ...Object.entries(obj[key]) .map(([prop, {type,baz}]) => ({[prop]: {type,baz:type === "foo" ? 5 : baz}}) ))}; console.log(res, obj);