JavaScript深浅拷贝,对象深拷贝方法,解决等号赋值后一个对象改变另一个对象也随着改变的方法!

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;
}

小结:

看了这些方法你应该问题也解决了,也学到了不少,基本了解了解决浅拷贝的方法,也了解了实现的基本原理,如果对你有帮助的话可以点个赞,关注一下哦,拒绝白嫖从你做起;

猜你喜欢

转载自blog.csdn.net/m0_46156566/article/details/106550611