正文

JavaScript深入浅出：强制引用传递，如何实现深拷贝与浅拷贝

/0 浏览量
0405

在JavaScript中，所有的数据类型可以分为两大类：基本数据类型（如Number、String、Boolean、Symbol）和引用数据类型（如Object、Array）。基本数据类型在内存中占据固定大小的空间，而引用数据类型在内存中占据的存储空间是存储值的引用。

当我们将一个变量赋值给另一个变量时，对于基本数据类型，实际上是直接复制了存储的值；而对于引用数据类型，复制的是值的引用，即两个变量指向同一个内存地址。这就是所谓的“强制引用传递”。

深拷贝与浅拷贝的概念

由于JavaScript中引用传递的特性，当我们需要对一个对象进行复制时，就需要区分深拷贝和浅拷贝。

  • 浅拷贝：只复制对象的最外层属性，对于对象内部嵌套的对象，仍然指向同一个内存地址。
  • 深拷贝：复制对象的所有属性，包括嵌套的对象，每个属性都会创建一个新的内存地址。

如何实现浅拷贝

在JavaScript中，实现浅拷贝比较简单，可以使用以下几种方法：

  1. Object.assign()
let obj1 = { a: 1, b: { c: 2 } };
let obj2 = Object.assign({}, obj1);
  1. 扩展运算符（…）
let obj1 = { a: 1, b: { c: 2 } };
let obj2 = { ...obj1 };
  1. JSON.parse(JSON.stringify())
let obj1 = { a: 1, b: { c: 2 } };
let obj2 = JSON.parse(JSON.stringify(obj1));

需要注意的是，使用JSON.parse(JSON.stringify())方法实现浅拷贝时，会丢失对象的原型链信息，并且无法复制函数。

如何实现深拷贝

实现深拷贝相对复杂，以下是一些常用的方法：

  1. 递归复制
function deepClone(obj) {
  if (typeof obj !== 'object' || obj === null) return obj;
  let cloneObj = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      cloneObj[key] = deepClone(obj[key]);
    }
  }
  return cloneObj;
}

let obj1 = { a: 1, b: { c: 2 } };
let obj2 = deepClone(obj1);
  1. 第三方库

可以使用lodash库中的_.cloneDeep()方法实现深拷贝。

let obj1 = { a: 1, b: { c: 2 } };
let obj2 = _.cloneDeep(obj1);
  1. JSON.parse(JSON.stringify())的改进版
function deepClone(obj) {
  if (typeof obj !== 'object' || obj === null) return obj;
  let cloneObj = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      // 判断是否为对象，避免循环引用
      if (typeof obj[key] === 'object') {
        cloneObj[key] = deepClone(obj[key]);
      } else {
        cloneObj[key] = obj[key];
      }
    }
  }
  return cloneObj;
}

let obj1 = { a: 1, b: { c: 2 } };
let obj2 = deepClone(obj1);

总结

通过本文的介绍，相信你已经对JavaScript中的深拷贝和浅拷贝有了更深入的了解。在实际开发中，根据需求选择合适的方法进行拷贝，可以避免很多潜在的问题。

-- 展开阅读全文 --