避免 ES9 中 Object.assign() 方法无法正确执行的问题-JavaScript中文网-JavaScript教程资源分享门户

避免 ES9 中 Object.assign() 方法无法正确执行的问题

在 ES6 中，为了方便对象的合并，新增了 Object.assign() 方法，其可以将源对象的可枚举属性复制到目标对象中，返回目标对象。例如：

const target = { a: 1 };
const source = { b: 2 };

Object.assign(target, source);

console.log(target); // {a: 1, b: 2}

然而，在 ES9 中，Object.assign() 的行为发生了变化，变得更加严格了。最明显的变化是，该方法现在会忽略源对象中的 null 和 undefined 值。

const target = { a: 1 };
const source = { b: 2, c: undefined };

Object.assign(target, source);

console.log(target); // {a: 1, b: 2}

在上面的例子中，由于 c 属性的值为 undefined，因此它将被忽略，而 b 属性的值为 2，因此被复制到了目标对象中。这是一个很好的改进，因为很多时候 null 和 undefined 的值并不是我们想要的。

然而，这种严格的行为也可能导致一些问题。特别是在合并包含嵌套对象的对象时，经常会遇到这种问题。考虑以下示例：

const target = { a: { b: 1 } };
const source = { a: { c: 2 } };

Object.assign(target, source);

console.log(target); // { a: { c: 2 } }

在这个例子中，我们希望将源对象中的 a 属性合并到目标对象中，但是实际上它覆盖了目标对象中的 a 属性，并没有将其合并。这是因为 Object.assign() 仅仅只是复制了源对象中的 a 属性，而没有处理其中嵌套的对象。

解决办法

为了解决上面的问题，我们可以使用递归方式来实现对象的深度合并。下面是一个示例代码：

// javascriptcn.com 代码示例
function deepAssign(target, source) {
  for (const key in source) {
    if (typeof source[key] === 'object') {
      if (!target[key]) {
        Object.assign(target, { [key]: {} });
      }
      deepAssign(target[key], source[key]);
    } else {
      Object.assign(target, { [key]: source[key] });
    }
  }
  return target;
}

const target = { a: { b: 1 } };
const source = { a: { c: 2 } };

deepAssign(target, source);

console.log(target); // { a: { b: 1, c: 2 } }

在上面的代码中，我们使用递归来处理嵌套的对象。当遇到一个嵌套的对象时，我们先判断目标对象中是否已经存在该属性，如果不存在，则使用 Object.assign() 将一个空对象赋值给该属性。然后再递归调用 deepAssign() 来处理嵌套的对象。如果遇到非对象的属性，则直接使用 Object.assign() 进行复制。

总结

Object.assign() 是一个非常方便的方法，可以帮助我们快速地将源对象的属性合并到目标对象中。在 ES9 中，这个方法变得更加严格了，可以忽略源对象中的 null 和 undefined 值。但是，这种严格的行为可能会导致合并包含嵌套对象的对象时出现问题。为了解决这个问题，我们可以使用递归方式来实现对象的深度合并。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/65ab8369add4f0e0ff52a812