ES11 优化 Object.Assign 方法实现浅复制和深复制-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要对对象进行复制操作，以便在不影响原对象的情况下进行修改。而 Object.Assign() 方法是实现对象复制的常用方式之一。在 ES6 中，Object.Assign() 方法已经被引入，用于将一个或多个源对象的属性复制到目标对象中。但是，Object.Assign() 方法存在一些限制，比如无法实现深复制，而且在复制过程中可能会出现一些问题。在 ES11 中，Object.Assign() 方法进行了优化，可以更好地实现浅复制和深复制。本文将介绍 ES11 中 Object.Assign() 方法的优化，以及如何使用它来实现浅复制和深复制。

ES11 中 Object.Assign() 方法的优化

在 ES11 中，Object.Assign() 方法进行了优化，主要表现在以下两个方面：

1. 支持 Symbol 类型属性

在 ES6 中，Object.Assign() 方法只能复制对象的可枚举属性。而在 ES11 中，Object.Assign() 方法可以复制对象的 Symbol 类型属性。例如：

const symbol1 = Symbol("foo");
const obj = {
  [symbol1]: "bar",
};
const copy = Object.assign({}, obj);
console.log(copy[symbol1]); // "bar"

2. 支持 null 和 undefined

在 ES6 中，如果源对象为 null 或 undefined，则无法使用 Object.Assign() 方法进行复制操作。而在 ES11 中，Object.Assign() 方法可以复制 null 和 undefined 类型的源对象。例如：

const obj = null;
const copy = Object.assign({}, obj);
console.log(copy); // null

实现浅复制

浅复制是将对象的属性复制到一个新对象中，但是新对象中的属性与原对象中的属性共享同一个值。如果新对象中的属性值被修改，原对象中的属性值也会被修改。在 ES11 中，可以通过 Object.Assign() 方法来实现浅复制。例如：

const obj = { a: 1, b: 2 };
const copy = Object.assign({}, obj);
console.log(copy); // { a: 1, b: 2 }

在上面的例子中，我们使用 Object.Assign() 方法将 obj 对象的属性复制到一个新对象中。由于是浅复制，所以新对象中的属性与原对象中的属性共享同一个值。

实现深复制

深复制是将对象的属性复制到一个新对象中，但是新对象中的属性与原对象中的属性不共享同一个值。如果新对象中的属性值被修改，原对象中的属性值不会被修改。在 ES11 中，可以通过 Object.Assign() 方法和递归来实现深复制。例如：

// javascriptcn.com 代码示例
function deepCopy(obj) {
  if (typeof obj !== "object" || obj === null) {
    return obj;
  }
  const copy = Array.isArray(obj) ? [] : {};
  Object.keys(obj).forEach((key) => {
    copy[key] = deepCopy(obj[key]);
  });
  return copy;
}

const obj = { a: { b: 1 } };
const copy = deepCopy(obj);
console.log(copy); // { a: { b: 1 } }

在上面的例子中，我们定义了一个 deepCopy() 函数来实现深复制。首先判断 obj 是否为对象，如果不是对象则直接返回 obj。然后使用 Object.keys() 方法遍历 obj 对象的属性，如果属性的值为对象则递归调用 deepCopy() 函数来实现深复制。最后返回复制后的对象。

总结

ES11 中 Object.Assign() 方法进行了优化，可以更好地实现浅复制和深复制。浅复制是将对象的属性复制到一个新对象中，但是新对象中的属性与原对象中的属性共享同一个值。如果新对象中的属性值被修改，原对象中的属性值也会被修改。深复制是将对象的属性复制到一个新对象中，但是新对象中的属性与原对象中的属性不共享同一个值。如果新对象中的属性值被修改，原对象中的属性值不会被修改。在实际开发中，需要根据具体情况选择浅复制或深复制。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65589984d2f5e1655d2c904c