当前位置: 首页 > news >正文

js中的cloneDeep是什么?

`cloneDeep` 是 JavaScript 中用于进行**深拷贝**(deep clone)的一种方法,它会递归地复制一个对象或数组中的所有嵌套属性。深拷贝与浅拷贝(shallow copy)不同,深拷贝会完整复制对象的所有层级,包括嵌套的对象或数组,而浅拷贝只复制最外层的引用。

在 JavaScript 中,原始数据类型(如字符串、数字、布尔值等)拷贝时会直接复制其值,而对于对象或数组这样的复杂类型,默认情况下只复制其引用。因此,修改浅拷贝后的对象会影响原始对象。而深拷贝能确保完全独立的复制,即使修改拷贝后的对象,也不会影响原始对象。

### `cloneDeep` 的功能:

1. **深度复制**:递归地拷贝对象或数组,保证所有嵌套结构都被完整复制。
2. **独立性**:拷贝的结果与原始对象完全独立,修改新对象不会影响原对象。

### 常见用法:

`cloneDeep` 通常可以在库如 Lodash 中找到,也可以通过自定义实现。下面是使用 Lodash 库中的 `cloneDeep` 的例子:#### Lodash 的 `cloneDeep` 示例:


// 先引入 Lodash 库
const _ = require('lodash');// 定义一个对象
const obj = {name: 'Alice',age: 25,skills: ['JavaScript', 'React'],address: {city: 'New York',zip: 10001}
};// 使用 cloneDeep 进行深拷贝
const clonedObj = _.cloneDeep(obj);// 修改深拷贝后的对象
clonedObj.name = 'Bob';
clonedObj.address.city = 'Los Angeles';// 原始对象不受影响
console.log(obj.name); // 'Alice'
console.log(obj.address.city); // 'New York'console.log(clonedObj.name); // 'Bob'
console.log(clonedObj.address.city); // 'Los Angeles'

### 浅拷贝 vs 深拷贝
- **浅拷贝**(如使用 `Object.assign` 或展开运算符 `...`)只会复制对象的第一层,嵌套的对象仍然是原对象的引用。
- **深拷贝**:将对象的所有层级都复制出来,确保拷贝后的对象与原对象彻底分离。#### 浅拷贝示例:


const obj = { name: 'Alice', address: { city: 'New York' } };
const shallowCopy = { ...obj };shallowCopy.name = 'Bob';           // 修改浅拷贝后的值
shallowCopy.address.city = 'LA';    // 修改嵌套对象的值console.log(obj.address.city);      // 'LA' -> 原始对象的嵌套属性也被修改了

#### 深拷贝示例(手动实现):
如果没有使用 Lodash 或类似的库,可以手动实现深拷贝。最简单的方式是使用 `JSON.stringify` 和 `JSON.parse`,但这种方法只适用于对象属性是简单数据类型的情况,不支持 `Date`、`Function`、`undefined`、`Symbol` 等特殊类型:


const obj = { name: 'Alice', address: { city: 'New York' } };
const deepCopy = JSON.parse(JSON.stringify(obj));deepCopy.address.city = 'Los Angeles';
console.log(obj.address.city);  // 'New York' -> 原始对象没有被修改

### 总结:

- `cloneDeep` 是一种用于深度复制对象或数组的函数,可以确保复制后的对象与原对象完全独立。
- 它可以防止嵌套对象或数组在拷贝后相互影响,常用于避免数据的意外篡改或共享状态问题。
- 在实际项目中,`cloneDeep` 常来自于工具库(如 Lodash),也可以手动实现,但需要考虑复杂对象的特殊情况。


http://www.mrgr.cn/news/35390.html

相关文章:

  • 常见分布在matlab的仿真实现方法
  • 复制他人 CSDN 文章到自己的博客
  • 第三讲 part 2:LINK3D原理 - 代码 - 自定义内容
  • 论文阅读【时间序列】ModerTCN (ICLR2024)
  • YOLOv8——测量高速公路上汽车的速度
  • consul注册中心与容器自动发现实战
  • 报表做着太费劲?为你介绍四款好用的免费报表工具
  • 2k1000LA 调试HDMI
  • 深度学习|误差逆传播:梯度速解
  • 力扣算法题总结
  • CVPR最牛图像评价算法!
  • 基于jsonpath的JSON数据查找
  • 【深度】边缘计算神器之数据网关
  • 如何选择游戏高防服务器,有什么需要注意的点?
  • 14.第二阶段x86游戏实战2-C++语言开发环境搭建-VisualStudio2017
  • 【工具】语音朗读PDF的免费工具
  • 《程序猿之设计模式实战 · 适配器模式》
  • 【软件测试】详解测试中常用的几种测试方法
  • 图文组合商标部分驳回后优化后初审通过!
  • C++类和对象(中)【下篇】