js常用的深拷贝方式与里面的坑

最新推荐文章于 2024-09-15 20:31:42 发布

天天鸭

最新推荐文章于 2024-09-15 20:31:42 发布

阅读量171

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/talentT/article/details/131778986

版权

文章探讨了在JavaScript中使用JSON.stringify()和JSON.parse()以及拓展运算符与Object.assign()进行深拷贝的不足，如丢失特殊类型数据和仅能拷贝外层属性。同时，提出了递归方法作为实现完美深拷贝的解决方案，强调了自定义递归函数在处理复杂对象结构时的优势。

摘要由CSDN通过智能技术生成

注：本人一直都习惯使用JSON和…解构赋值进行深拷贝，但其实他们都有对应的缺点所以标明给大家方便在合适的场景选择合适的方式

1、使用JSON.stringify() 和 JSON.parse() 将对象转为字符串之后在转为对象

obj = {
   a:NaN,
   b: undefined,
   c:new Date(),
   d:new RegExp(/\d/),
   d:new Error(),
   e:Infinity
}
let deepObj = JSON.parse(JSON.stringify(obj))

缺陷:
（1）NaN ==> null
（2）undefined ==> 空
（3）时间戳 ==> 字符串时间
（4）错误信息 ==> 空对象
（5）Infinity ==> null
（6）无法实现对象中方法(fountion)的深拷贝

2. 使用拓展运算符与Object.assign()

let obj = {name:'Aos',age:25};

let obj2 = {...obj}

var obj3 = Object.assign({},obj);

优点：数量较少的时候使用方便、简单，
缺点：只能拷贝外层不能拷贝内层，遇到对象或数组键比较多时，操作不方便

3、递归深拷贝是完美的项目中可以自己封装使用

function deepClone( source ) {
	if (!isObject(source)) return source; //如果不是对象的话直接返回
    if (Array.isArray(source)) {
		// 若传入的参数是数组类型, 遍历数组,递归调用
		var _arr = []
		for(let i=0; i<source.length; i++){
			_arr.push(deepClone(source[i])
		}
		return _arr
	} else{
		// 若传入的参数是对象类型,遍历对象中的key:value对,递归调用
		var _obj = {}
		for( var k in source){
			_obj[k] = deepClone(source[k])
		}
		return _obj
	}
}

function isObject(obj) {
	//注意点：null的typeof也是object
    return typeof obj === 'object' && obj !== null
}