lodash-cloneDeep

lodash是一个JavaScript工具库

Lodash的主要特点

1. 丰富的工具函数：包含200多个函数，涵盖数组、对象、函数、字符串等多种数据类型的操作
2. 模块化设计：支持按需导入，减少项目体积
3. 性能优化：经过精心优化的实现，提供高效的操作体验
4. 跨框架兼容：适用于原生JavaScript、jQuery应用程序以及基于npm的框架如Angular、React和Vue.js

cloneDeep函数

cloneDeep是Lodash库中的一个深拷贝函数，用于创建对象的深度副本。与JavaScript的浅拷贝不同，深拷贝会递归地复制对象的所有嵌套属性，确保原对象和拷贝对象完全独立，修改一个不会影响另一个。

示例

import { cloneDeep } from 'lodash';

const original = { a: 1, b: { c: 2 } };
const shallowCopy = { ...original };
const deepCopy = cloneDeep(original);

// 修改嵌套属性
shallowCopy.b.c = 3;
console.log(original.b.c); // 输出: 3 (浅拷贝影响原对象)

deepCopy.b.c = 4;
console.log(original.b.c); // 输出: 3 (深拷贝不影响原对象)
console.log(deepCopy.b.c); // 输出: 4

这段JavaScript代码的执行结果如下：

// 第一个输出：修改浅拷贝的嵌套属性会影响原对象

console.log(original.b.c); // 输出: 3

// 第二个输出：修改深拷贝不会影响原对象

console.log(original.b.c); // 输出: 3

// 第三个输出：深拷贝是独立的对象

console.log(deepCopy.b.c); // 输出: 4

代码解析

1. 对象创建

const original = { a: 1, b: { c: 2 } };

创建了一个嵌套对象，b 属性指向另一个对象 { c: 2 }。

2. 浅拷贝

const shallowCopy = { ...original };

展开运算符 ... 创建的是浅拷贝（shallow copy）：

• 第一层属性（a 和 b）被复制

• 但属性值如果是对象，复制的是引用而不是对象本身

• 所以 shallowCopy.b 和 original.b 指向同一个对象

3. 深拷贝

const deepCopy = cloneDeep(original);

lodash 的 cloneDeep 创建的是深拷贝（deep copy）：

• 递归复制所有层级

• deepCopy 和 original 完全独立，没有任何引用关系

4. 修改的影响

// 修改浅拷贝的嵌套属性

shallowCopy.b.c = 3; // 这也会修改 original.b.c

console.log(original.b.c); // 3 ✅ 被影响

// 修改深拷贝的嵌套属性

deepCopy.b.c = 4; // 这不会影响 original.b.c

console.log(original.b.c); // 3 ✅ 保持不变

console.log(deepCopy.b.c); // 4 ✅ 只修改了深拷贝

内存示意图

修改前：

关键知识点

1. 浅拷贝的陷阱：

   • 展开运算符 {...obj}、Object.assign()、数组的 slice() 都是浅拷贝

   • 只复制第一层，嵌套对象仍然是引用共享

2. 深拷贝的方法：

   • JSON.parse(JSON.stringify(obj))：简单但有限制（不能处理函数、循环引用等）

   • lodash.cloneDeep()：功能完整的深拷贝

   • 手动递归复制

3. 实际应用建议：

   • 如果确定对象没有嵌套，用浅拷贝

   • 如果有嵌套且需要完全独立，用深拷贝

   • 在React/Vue中修改状态时特别注意这个区别

在代码中使用cloneDeep可以避免由于对象引用导致的意外修改，确保数据的安全性和一致性。