Javascript：用ES6速记修改嵌套对象

考虑一个函数返回一个嵌套对象,我想在嵌套对象内修改属性.

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

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

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

console.log(modifiedD);

解决方法:

在… getObject()之后声明键时,它将替换整个值.它不会合并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);

标签：ecmascript-6,ecmascript-7,javascript
来源： https://codeday.me/bug/20191108/2007211.html