正文

掌握JS对象深拷贝与浅拷贝技巧，轻松实现对象复制

/0 浏览量
0722

在JavaScript中，对象的复制是一个常见且复杂的问题。因为JavaScript中的对象是引用类型，所以简单的赋值操作只能复制引用，而不是复制对象本身。这就需要我们理解浅拷贝和深拷贝的区别，以及如何实现它们。

浅拷贝与深拷贝的区别

浅拷贝

浅拷贝是指创建一个新的对象，然后复制原对象的属性值到这个新对象上。如果属性值是基本数据类型，那么它们会被正确复制；但如果属性值是引用类型，那么新对象和原对象将共享同一个引用。

深拷贝

深拷贝是指创建一个新对象，然后递归复制原对象的每个属性值（包括基本数据类型和引用类型）到新对象上。这样，新对象和原对象就完全独立，不会有任何关联。

实现浅拷贝

实现浅拷贝比较简单，可以使用Object.assign()方法或者扩展运算符...。

let obj = { a: 1, b: { c: 2 } };
let shallowCopy1 = Object.assign({}, obj);
let shallowCopy2 = { ...obj };

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

实现深拷贝

实现深拷贝稍微复杂一些，以下是一些常见的深拷贝方法：

使用JSON方法

let obj = { a: 1, b: { c: 2 } };
let deepCopy = JSON.parse(JSON.stringify(obj));

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

注意：这种方法不能复制函数和undefined等特殊类型。

使用递归函数

function deepCopy(obj) {
  let copy;

  // Handle the 3 simple types, and null or undefined
  if (null == obj || "object" != typeof obj) return obj;

  // Handle Date
  if (obj instanceof Date) {
    copy = new Date();
    copy.setTime(obj.getTime());
    return copy;
  }

  // Handle Array
  if (obj instanceof Array) {
    copy = [];
    for (let i = 0, len = obj.length; i < len; i++) {
      copy[i] = deepCopy(obj[i]);
    }
    return copy;
  }

  // Handle Object
  if (obj instanceof Object) {
    copy = {};
    for (let attr in obj) {
      if (obj.hasOwnProperty(attr)) copy[attr] = deepCopy(obj[attr]);
    }
    return copy;
  }

  throw new Error("Unable to copy obj! Its type isn't supported.");
}

let obj = { a: 1, b: { c: 2 } };
let deepCopy = deepCopy(obj);

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

总结

掌握浅拷贝和深拷贝的技巧对于JavaScript开发者来说非常重要。通过了解这两种拷贝方法，我们可以更好地控制对象的复制行为，从而避免不必要的错误和问题。在实际应用中，根据需求选择合适的拷贝方法，可以让我们的代码更加健壮和可靠。

-- 展开阅读全文 --