理解 Lodash _.cloneDeep(): 深度拷贝背后的秘密

前端

2023-12-28 03:51:22

了解浅拷贝与深度拷贝：使用 Lodash _.cloneDeep() 实现高级数据操作

在 JavaScript 中，变量可以存储两种类型的数据：值类型和引用类型。值类型包括数字、字符串、布尔值等，当对它们进行赋值时，会创建新值。引用类型包括对象、数组和函数，当对它们进行赋值时，会创建对原始数据的引用，而不是新值。

浅拷贝与深度拷贝

浅拷贝是指复制引用类型变量的值，即复制该变量所指向的对象或数组的引用，而不是复制对象或数组本身。这意味着对浅拷贝副本的任何更改都会反映在原始对象或数组上。

深度拷贝是指复制引用类型变量的值，并递归复制所有嵌套的对象或数组。这意味着对深度拷贝副本的任何更改都不会影响原始对象或数组。

Lodash _.cloneDeep()

Lodash 库提供了 .cloneDeep() 函数，用于创建引用类型变量的深度拷贝。.cloneDeep() 函数采用一个参数，即需要复制的引用类型变量。该函数返回一个新对象或数组，其中包含原始对象或数组的深度拷贝。

_.cloneDeep() 的实现原理

Lodash _.cloneDeep() 函数的实现原理是使用递归算法。该算法首先检查要复制的变量是否为值类型。如果是值类型，则直接返回该值。如果不是值类型，则该算法会递归地复制该变量所指向的对象或数组的每个属性或元素。

_.cloneDeep() 的使用示例

const originalObject = {
  name: 'John Doe',
  age: 30,
  address: {
    street: 'Main Street',
    city: 'Anytown',
    state: 'CA',
    zip: '12345'
  }
};

const clonedObject = _.cloneDeep(originalObject);

clonedObject.name = 'Jane Doe';
clonedObject.address.city = 'Newtown';

console.log(originalObject);
/*
  {
    name: 'John Doe',
    age: 30,
    address: {
      street: 'Main Street',
      city: 'Anytown',
      state: 'CA',
      zip: '12345'
    }
  }
*/

console.log(clonedObject);
/*
  {
    name: 'Jane Doe',
    age: 30,
    address: {
      street: 'Main Street',
      city: 'Newtown',
      state: 'CA',
      zip: '12345'
    }
  }
*/

在这个示例中，我们使用 _.cloneDeep() 函数创建了原始对象 originalObject 的深度拷贝 clonedObject。然后，我们更改了 clonedObject 的 name 和 address.city 属性。最后，我们打印 originalObject 和 clonedObject，可以看到 clonedObject 的更改不会影响 originalObject。