JSON.stringify和JSON.parse 优缺点实现深拷贝的优缺点

最新推荐文章于 2024-04-30 15:37:58 发布

转载最新推荐文章于 2024-04-30 15:37:58 发布 · 953 阅读

4 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/weixin_45345105/article/details/112171207

文章标签：

#javascript

本文探讨了使用JSON.parse(JSON.stringify())进行对象复制的优点，如创建新对象的便捷性，但也揭示了其局限性，如函数丢失、undefined属性消失、正则对象转对象、循环引用等问题。提供了一个自定义的deepClone方法作为解决方案。

优点
方便，将字符串parse后创建新对象（新地址）

let temp = JSON.parse(JSON.stringify(OBJ))

缺点
1.如果这个对象里属性是function

let obj = {
    fun: function name(params) {
    }
}

console.log(obj);// { fun: [Function: name] }
let temp = JSON.parse(JSON.stringify(obj))
console.log(temp);// {}

如果被拷贝的对象中某个属性的值为undefined，则拷贝之后该属性会丢失

let obj = {
    // fun: function name(params) {
    // }
    name:undefined
}

console.log(obj);// { name: undefined }
let temp = JSON.parse(JSON.stringify(obj))
console.log(temp);// {}

如果被拷贝的对象中有正则表达式，则拷贝之后的对象正则表达式会变成Object

let obj = {
    // fun: function name(params) {
    // }
    name:/abc/
}

console.log(obj);// { name: /abc/ }
let temp = JSON.parse(JSON.stringify(obj))
console.log(temp);// {}

数组中对象也是一样的

let obj = [{ name: undefined }]
console.log(obj);// [ { name: undefined } ]
let temp = JSON.parse(JSON.stringify(obj))
console.log(temp);// [ {} ]

在转字符串的时候已经没有了

let obj = [{ name: undefined,test:'name' }]
console.log(JSON.stringify(obj));// [{"test":"name"}]

其他补充
性能差根据网上的数据大概比遍历慢几倍数据

无法实现对函数、RegExp等特殊对象的克隆

会抛弃对象的constructor,所有的构造函数会指向Object

对象有循环引用,会报错

含有symbol属性名的对象拷贝会漏掉symbol属性

其他弊端弊端
为了以防万一最好用第三方库的deepCopy之类的
或者自己写个deepClone方法

function deepClone(obj) {
	let newObj;
	
	if (obj instanceof Array) {
		newObj = []
		let i = obj.length;
		while(i--) {
			newObj[i] = deepClone(obj[i])
		}
		return newObj
	}
	
	else if (obj instanceof Object) {
		newObj = {}
		for(let key in obj) {
			newObj[key] = deepClone(obj[key])
		}
		return newObj
	}
	
	else {
		return obj
	}
}