Javascript:修改 ES6 速记中的嵌套对象

Question

考虑一个函数返回一个嵌套对象，我想修改嵌套对象内的属性。

在下面的示例中，我多次调用该函数，或者我需要将它存储在一个临时变量中。有没有一种方法可以在大括号内仅调用一次并在同一对象内多次展开/修改。

const getObject = () => {
   return {
     a: {
      b: {
        c: 1,
        d: 2,
      }
     },
     e: 3
   }
}

var modifiedD = {
  ...getObject(),
  a: {
     b: {
      ...getObject().a.b,
      d: 4
     }
  }
}

console.log(modifiedD);

Answer 1

在 ...getObject() 之后声明 a 键时，它会替换整个值。它不会合并 a 后面的内部对象。

因此您可以像以前那样做并多次调用 getObject()。

---

另一种解决方案可能是使用您自己的合并对象的函数来处理它，例如:

function mergeObjects(obj1, obj2) {
  // We are going to copy the value of each obj2 key into obj1
  Object.keys(obj2).forEach((x) => {
    // If we have an object, we go deeper
    if (typeof obj2[x] === 'object') {
      if (obj1[x] === void 0) {
        obj1[x] = {};
      }

      mergeObjects(obj1[x], obj2[x]);
    } else {
      obj1[x] = obj2[x];
    }
  });
  
  return obj1;
}

const getObject = () => {
  return {
    a: {
      b: {
        c: 1,
        d: 2,
      }
    },
    e: 3
  }
}

const modifiedD = mergeObjects(getObject(), {
  a: {
    b: {
      d: 4,
    },
  },
});

console.log(modifiedD);

警告，我制作的函数会改变对象，这可能不是最佳答案

---

或者只调用一次，然后像这样一个一个地设置键:

const getObject = () => {
   return {
     a: {
      b: {
        c: 1,
        d: 2,
      }
     },
     e: 3
   }
}

const modifiedD = getObject();

modifiedD.a.b.d = 4;

console.log(modifiedD);