JS深浅拷贝常用方法

浅拷贝:

浅拷贝出现原因

let a = {
    name:'Jack',
    age:'10'
  };
  let b = a;
  a.name = 'Wang';
  console.log(a.name);//Wang
  console.log(b.name);//Wang

上述代码中,如果我们希望a和b的属性是独立的,那么最后结果显然不符期望,
简单来说发生原因:引用类型,栈内存存放指针,内容在堆内存中,赋值时只拷贝了指针。

**浅拷贝常用方法
1.Object.assign()

let shallowA = {
    name:'Jack',
    age:10
  };
  let shallowB = Object.assign({},shallowA);
  shallowA.name = 'Zhang';
  console.log(shallowA.name);//Zhang
  console.log(shallowB.name);//Jack

2.三点运算符

let shallowC = {...shallowA};
  shallowA.age = 11;
  console.log(shallowA.age);//11
  console.log(shallowC.age);//10

深拷贝

深拷贝出现原因

let c = {
    name:'June',
    family:{
      mother:'Lily',
      father:'Bob'
    },
    age:12
  }
  let d = {...c};
  let e = Object.assign({},c);
  c.family.mother = 'Venessa';
  console.log(c.family);//mother:'Venessa' 
  console.log(d.family);//mother:'Venessa' 
  console.log(e.family);//mother:'Venessa' 

简单来说,对于这种对象中仍有对象的情况,就需要使用深拷贝了

深拷贝常用方法
1.JSON.parse(JSON.stringfy(object))

let deepA = {
    age: 1,
    jobs: {
    first: 'FE'
    }
  };
  let deepB = JSON.parse(JSON.stringify(deepA));
  deepA.jobs.first = 'Ali';
  console.log(deepA.jobs);//Ali
  console.log(deepB.jobs);//FE

这种方法是利用JSON序列化和反序列化方法将内容完全展开,但是它仍有局限性:
1.会忽略 undefined
2.会忽略 symbol
3.会忽略 函数
4.不能解决循环引用的对象(obj.a = obj.b obj.c.d = obj.a等)

使用lodash的deepClone()
lodash库中的deepClone函数。

你可能感兴趣的:(JS深浅拷贝常用方法)