正文

揭秘JS深拷贝与浅拷贝：轻松掌握对象复制技巧

/0 浏览量
0326

概述

在JavaScript中，对象复制是一个常见的操作，但在复制过程中，浅拷贝和深拷贝的区别往往导致意外的结果。本文将深入探讨JavaScript中的深拷贝与浅拷贝，帮助开发者更好地理解和使用这两种复制方法。

浅拷贝

定义

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

实现

JavaScript中实现浅拷贝的方式有多种，以下是一些常见的实现方法：

1. 属性复制

function shallowCopy(obj) {
  var copy = {};
  for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = obj[key];
    }
  }
  return copy;
}

2. Object.assign()

function shallowCopy(obj) {
  return Object.assign({}, obj);
}

3. 扩展运算符

function shallowCopy(obj) {
  return {...obj};
}

深拷贝

定义

深拷贝指的是创建一个新对象，然后递归地复制原对象的所有属性（包括嵌套属性）到这个新对象上。如果属性值是基本数据类型，那么它们会被正确复制；如果属性值是引用类型，那么会创建一个新的引用类型实例，并递归地复制其属性。

实现

JavaScript中实现深拷贝的方式相对较少，以下是一些常见的实现方法：

1. JSON序列化与反序列化

function deepCopy(obj) {
  return JSON.parse(JSON.stringify(obj));
}

这种方法简单易用，但有几个限制：

  • 无法复制函数和undefined等特殊值。
  • 无法正确处理循环引用。

2. 手动实现

function deepCopy(obj, hash = new WeakMap()) {
  if (obj === null) return null;
  if (obj instanceof Date) return new Date(obj);
  if (obj instanceof RegExp) return new RegExp(obj);
  if (typeof obj !== 'object') return obj;
  if (hash.has(obj)) return hash.get(obj);

  const copy = Array.isArray(obj) ? [] : {};
  hash.set(obj, copy);

  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepCopy(obj[key], hash);
    }
  }
  return copy;
}

这种方法可以处理循环引用，并且可以复制所有类型的对象。

总结

浅拷贝和深拷贝在JavaScript中都是非常重要的概念。理解它们的区别和实现方式，可以帮助开发者避免在对象复制过程中遇到的问题。在实际应用中，应根据具体需求选择合适的复制方法。

-- 展开阅读全文 --