js深浅拷贝
程序员文章站
2022-05-27 22:11:31
作为一枚前段,我们知道对象类型在赋值的过程中其实是复制了地址,从而会导致改变了一方其他也都被改变的情况。通常在开发中我们不希望出现这样的问题,我们可以使用浅拷贝来解决这个情况。 浅拷贝 首先可以通过Object.assign来解决这个问题,很多人认为这个函数是用来深拷贝的。其实并不是,Object. ......
作为一枚前段,我们知道对象类型在赋值的过程中其实是复制了地址,从而会导致改变了一方其他也都被改变的情况。通常在开发中我们不希望出现这样的问题,我们可以使用浅拷贝来解决这个情况。
浅拷贝
首先可以通过object.assign
来解决这个问题,很多人认为这个函数是用来深拷贝的。其实并不是,object.assign
只会拷贝所有的属性值到新的对象中,如果属性值是对象的话,拷贝的是地址,所以并不是深拷贝。
1 let abc = { 2 a: '123', 3 b: 'aaa', 4 d: 'cccc' 5 } 6 let b = object.assign({}, abc) 7 abc.a = '222' 8 console.log(b.a) // 123
另外还可通过es6的运算符来. .. 来实现
1 let obj = { 2 age: '23', 3 name: 'chai' 4 } 5 let newobj = {...obj} 6 obj.age = '17' 7 console.log(newobj.age) // 23
浅拷贝只解决了第一层的问题,如果接下去的值中还有对象的话,那么就又回到最开始的话题了,两者享有相同的地址。要解决这个问题,我们就得使用深拷贝了。
浅拷贝
通常可以通过json.parse(json.stri
ngify(object))
来解决
1 let a = { 2 age: 1, 3 jobs: { 4 first: 'fe' 5 } 6 } 7 let b = json.parse(json.stringify(a)) 8 a.jobs.first = 'native' 9 console.log(b.jobs.first) // fe
平时就这几种方法就够使用了,深拷贝这种方法也是有局限性的,它会忽略undefined,symble,不能序列化函数,如
1 let a = { 2 age: undefined, 3 sex: symbol('male'), 4 jobs: function() {}, 5 name: 'vue' 6 } 7 let b = json.parse(json.stringify(a)) 8 console.log(b) // {name: "vue"}
上一篇: flex 圣杯布局