js深拷贝方法:
关于解决浅拷贝的方法找了很多资料,自己一个一个试了之后整理出来的,绝对有效的方法,建议收藏,先来一段代码看看我们的问题:
let obj1 = { name: 'Jay', age: '22' }
let obj2 = obj1;
obj2.name = 'xxx'
console.log(obj1.name, obj2.name)
//输出结果为(xxx xxx)
这里很明显的问题,我们只改变了obj2的name值,但obj1的值也改变了,这就是浅拷贝,而我们需要深拷贝,就是两个对象改变值的时候互不影响,解决方法也很简单,下面看代码和方法:
方法一:
最简单的方法最新的方法,用ES6的扩展运算符(…)进行赋值,这个应该会在以后被广泛应用,这个方法也完美解决了JSON.stringify+JSON.parse不能实现的对函数方法深拷贝:
let obj1 = { name: 'Jay', age: '22',fun:function() {console.log(1)} }
let obj2 = { ...obj1 };
obj2.name = 'xxx'
console.log(obj1.name, obj2.name, obj2)
//输出结果为(jay xxx {name: "xxx", age: "22", fun: ƒ})
一行代码解决问题,支持函数赋值,解决深拷贝问题
方法二:
大部分程序员再用的方法,用JSON.stringify+JSON.parse实现:
let obj1 = { name: 'Jay', age: '22', fun:function() {console.log(1)} }
let _obj = JSON.stringify(obj1)
console.log(_obj) //这里的_obj变成了字符串’{"name":"Jay","age":"22"}‘
let obj2 = JSON.parse(_obj)
obj2.name = 'xxx'
console.log(obj1, obj2)
//({name: "Jay", age: "22", fun: ƒ} ,{name: "xxx", age: "22"})
这里很明显,是吧json对象转化为字符串,然后再赋值,赋值完成后再转换为json对象,这个方法虽然简单,但是也有一个问题就是,对象里面的函数方法没有赋值成功。
方法三:
用jq实现,现在应该很少有人用了,毕竟为了一个深拷贝引入进群还是不值得的,这里简单说一下,如果你项目引入了jq那就方便很多了:
let obj1 = { name: 'Jay', age: '22',fun:function() {console.log(1)} };
let obj2 = $.extend(true,{},obj1);
不足点是需要引用jQuery库 ,无法拷贝 对象中值为undefined的属性
方法四:
最原生的方法,用循环遍历来进行赋值:
function deepClone1(obj) {
//判断拷贝的要进行深拷贝的是数组还是对象,是数组的话进行数组拷贝,对象的话进行对象拷贝
var objClone = Array.isArray(obj) ? [] : {};
//进行深拷贝的不能为空,并且是对象或者是
if (obj && typeof obj === "object") {
for (key in obj) {
if (obj.hasOwnProperty(key)) {
if (obj[key] && typeof obj[key] === "object") {
objClone[key] = deepClone1(obj[key]);
} else {
objClone[key] = obj[key];
}
}
}
}
return objClone;
}