JS实现深拷贝常用的几种方法

最新推荐文章于 2024-08-28 14:56:42 发布
最新推荐文章于 2024-08-28 14:56:42 发布
阅读量990 收藏
点赞数
分类专栏： js知识 文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44867717/article/details/126578975
版权

JS实现深拷贝常用的几种方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS深拷贝的几种方法</title>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js"></script>
  <script>
    let origin = ['李世民','刘邦','朱元璋','刘彻','朱棣']
    /**
  	 * 1. Object.assign() 实现深拷贝 --- 个人常用
  	 */
    // let target = Object.assign([],origin)  

    /**
  	 * 2. JSON.parse() 和 JSON.stringify() 实现深拷贝
  	 */
    // let target = JSON.parse(JSON.stringify(origin))
    
    /**
  	 * 3. lodash 里面的 cloneDeep() 方法 实现深拷贝
  	 *    vue 中使用 ：
  	 *       a. npm i --save lodash     下载依赖
  	 *       b. import _ from 'lodash'  在 组件 中引入 
  	 *       c. 用法和下面的一样
  	 */
    let target = _.cloneDeep(origin) 

    target.pop()    // 修改 target 数组后
    console.log('origin',origin)  // origin ['李世民','刘邦','朱元璋','刘彻']
    console.log('target',target)  // target ['李世民','刘邦','朱元璋','刘彻','朱棣']
  </script>
</body>
</html>
附
1. 通过递归的方式实现深拷贝
function deepClone(obj){
　　let objClone =  Array.isArray(obj) ? [] : {};
　　if (obj && typeof obj === 'object') {
　　　　for(let key in obj){
　　　　　　if (obj[key] && typeof obj[key] === 'object'){
　　　　　　　　objClone[key] = deepClone(obj[key]);
　　　　　　}else{
　　　　　　　　objClone[key] = obj[key]
　　　　　　}
　　　　}
　　}
　　return objClone;
}
2. 通过使用字符串作为中间量的方式实现深拷贝
var obj = {
	age: '12',
	showAge: function () {
		console.log('哈哈');
	},
};
console.log(JSON.parse(JSON.stringify(obj)));

验证
在这里插入图片描述

viceen
关注
专栏目录
JavaScript深拷贝的方法
从来无所求，所得皆惊喜！
03-20 2555
深拷贝会将原始对象及其所有子对象都复制到堆中，并返回一个指向新对象的引用。这样，新的对象与原始对象之间**不存在任何关联**，修改其中一个对象不会影响另一个对象。
深拷贝的几种方法
xiamoziqian的博客
11-08 4242
1.JSON方法实现 //_tmp和result是相互独立的，没有任何联系，有各自的存储空间。 let deepClone = function (obj) { let _tmp = JSON.stringify(obj);//将对象转换为json字符串形式 let result = JSON.parse(_tmp);//将转换而来的字符串转换为原生js对象 return ...
JS如何实现深拷贝
最新发布
qq_65665724的博客
08-28 1105
基本类型数据普通对象SymbolDateRegExpMap和SetFunction原型不可枚举属性循环引用。
JS中如何深拷贝
m0_61464629的博客
07-20 428
我们用Object.prototype.toString.call(当前数据).slice(8,-1)JSON.stringify()将真正的对象和数组转成字符串JSON.parse()利用对象构造函数中原型属性tostring让它的this指向我的当前数据.封装的时候我们不确定传入进来的复杂数据时Array还是Object类型。方法1.我们可以利用js自带的方法JSON利用其中的原理将原数据深拷贝转成一个新的数据。typeof无法判断具体的数据类型。方法2.使用jQuery自带的方法。...
js 浅拷贝 和 深拷贝
青蛙king的博客
11-19 3855
目录 一、浅拷贝与深拷贝的关系 1、基本类型 2、引用数据类型——对象（object） （1）、对象的浅拷贝 （2）、对象的深拷贝 二、对象的浅拷贝的实现 1、ES6中的Object.assign方法实现对象的浅拷贝 2、直接赋值法实现对象的浅拷贝 三、对象的深拷贝的实现 1、ES6中的扩展运算符（...）实现对象的深拷贝 2、用JSON对象的parse和stringify方...
关于 js 对象 转 字符串 和 深拷贝 的探讨
weixin_34072458的博客
12-07 366
随着更多语言的支持 **json** 作为数据传输和存储的媒体，已经非常成熟且应用广泛。却存在致命硬伤，不携带 **对象方法** 。在数据传输和存储中，这是恰当的和合理的。 但是在更多的应用场景中，又是无奈的。 项目需要，简单的提了个思路，将对象转换为显示声明形式的字符串例如： var person = { name:'joe', age:40, send:functi...
JS中的深拷贝
weixin_44211097的博客
08-29 110
第一种方法： var stu = obj ; //浅拷贝：使用的是同一个地址 stu . age = 15 ; console . log ( obj . age ); //深拷贝 var stu2 = Object . assign ({}, obj ); //对象的合并；和一个空对象 stu2 . sex = "女" ; console . log ...
js代码-几种实现浅拷贝、深拷贝 方法
07-16
在JavaScript中，浅拷贝和深拷贝是两种常见的数据复制方法，它们在处理复杂对象时尤其重要。本文将深入探讨这两种拷贝方法，并提供不同的实现方式。 **浅拷贝（Shallow Copy）** 浅拷贝是创建一个新对象，然后将...
JavaScript实现浅拷贝与深拷贝的方法分析
12-01
JavaScript中实现深拷贝有多种方法，下面列举了其中几种常见的： 1. **for循环实现**： 使用for循环遍历数组的每个元素，逐个添加到新数组中，这样可以创建一个独立的新数组，不受原数组影响。 2. **slice方法**...
JavaScript数组深拷贝和浅拷贝的两种方法
10-26
为了解决浅拷贝带来的问题，JavaScript 提供了几种深拷贝的方法。其中最常见的方法之一是使用 `slice()` 函数。`slice()` 函数可以截取数组的一部分，返回一个新的数组对象，这样就避免了引用同一个对象的问题。`...
JS深拷贝和浅拷贝
zhangwenok的博客
07-22 1209
JS深拷贝和浅拷贝的核心区别就在于不同的数据类型在内存中存储的位置不同。JS的数据类型分为基本数据类型(值类型)字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。引用数据类型（对象类型）对象(Object)、数组(Array)、函数(Function)。基本类型数据保存在栈内存中；引用类型数据保存在堆内存中，引用数据类型的变量是存放在栈中的，指向的是堆内存中实际对象的引用。...
js利用JSON方法实现深拷贝
czh60144的博客
07-20 666
js利用JSON方法实现深拷贝
用js实现json对象的深拷贝？(力扣)
weixin_56608347的博客
11-11 708
例如：copyObj({name:"张三疯",sex:"男"}) 返回:{name:"张三疯"，sex:"男"}深拷贝：实现赋值json对象的函数，保证传入的json对象和返回的json对象不共享内存。函数名：copyObj。返回值：深拷贝后的对象。参数：深拷贝前的对象。
JS中的深拷贝实现方式
为技术而生
04-26 407
以上就是几种常见的JS深拷贝实现方式。在实际使用中，我们需要根据具体的需求和场景选择合适的方式。同时，我们也要注意深拷贝可能带来的性能问题，因为深拷贝需要复制对象的所有子对象，如果对象很大，那么深拷贝可能会消耗大量的内存和时间。
JS深拷贝——JSON.parse(JSON.stringify())
CSDN_AppleOne的博客
06-02 410
JS深拷贝——JSON.parse(JSON.stringify())
Javascript中Json的深拷贝
u014801806的博客
01-16 2517
解决Json对于复杂结构的深拷贝带来的原型被删除或者出现递归无限循环等问题的解决方案
js对象深拷贝JSON.stringify、JSON.parse
彭世瑜的博客
02-26 1345
定义一个js对象 let data = { name: "Tom", age: 23 } 1、直接赋值 let copyData = data; if (copyData === data) { console.log(true); } else { console.log(false); } // true 2、序列化后反序列化，对象转字符串， 字符串转对...
JS中的JSON(推出对象深拷贝)
m0_59345890的博客
07-07 322
全称：JavaScript Object Notation JSON是一个字符串常常用于网络传输数据的一种字符串格式 常见的字符串格式： querystring查询字符串“name=karen&pwd=abc123&count=20" template模板字符串`<div styLe="">666</div>` JSON json字符串‘{"name " : " karen" , "its" : [ "heLLo" , "h5"]}’ JSON解析 ..
JS实现深拷贝的几种方式
weixin_61945023的博客
06-13 713
如何实现深拷贝？1.扩展运算符（...）2.JSON.parse(JSON.stringify())3.利用递归函数实现
js 实现深拷贝的方法有哪些
05-31
实现 JavaScript 对象的深拷贝有多种方法，以下是常见的几种方法： 1. 递归复制 递归遍历对象和数组，将每个属性的值复制到新的对象或数组中。这种方法可以处理任何类型的对象，但需要注意循环引用的问题。 ```javascript function deepCopy(obj) { if (typeof obj !== 'object' || obj === null) { return obj; } const isArray = Array.isArray(obj); const result = isArray ? [] : {}; for (let key in obj) { const value = obj[key]; if (typeof value === 'object' && value !== null) { result[key] = deepCopy(value); } else { result[key] = value; } } return result; } ``` 2. JSON 序列化和反序列化 使用 `JSON.stringify()` 将对象序列化为 JSON 字符串，再使用 `JSON.parse()` 将 JSON 字符串反序列化为新的对象。这种方法可以处理大部分对象，但无法处理函数、正则表达式等特殊类型的对象。 ```javascript function deepCopy(obj) { return JSON.parse(JSON.stringify(obj)); } ``` 3. Object.assign() 使用 `Object.assign()` 方法将多个对象合并到一个新的空对象中，这样就可以得到一个新的对象，该对象具有与原始对象相同的属性和值。这种方法也可以处理大部分对象，但无法处理嵌套的对象和函数等特殊类型的对象。 ```javascript function deepCopy(obj) { return Object.assign({}, obj); } ``` 4. Lodash 库 使用 Lodash 库中的 `cloneDeep()` 方法可以实现深拷贝。 ```javascript const _ = require('lodash'); function deepCopy(obj) { return _.cloneDeep(obj); } ``` 需要注意的是，以上方法都无法处理循环引用的问题，如果需要处理循环引用，可以使用第一种方法，并使用一个 Set 对象来保存已经复制过的对象，避免无限递归。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值