javascript中的对象相关方法三(浅拷贝)

---

前言

前两天看了一个朋友的博客，卧槽好几个常用的方法都是浅拷贝，平时使用的时候都没注意过。以后要注意一下，不然数据怎么改了自己都摸不着头脑。

朋友的文章地址：https://blog.csdn.net/qq_31947477/article/details/105989604?spm=1001.2014.3001.5502

浅拷贝

浅拷贝主要是用来复制对象的键值，当最外层键值是基础数据类型时，复制的是值；当最外层键值是引用类型时，只会复制其引用地址。下面几个方法都是对象或数组的浅拷贝。

Array.concat()

这个方法主要是用来数组合并。

const arr = [3, { age: 1, friends: { a: '1', b: '1' }}]
const array = [{ age: 4, friends: { a: '4', b: '4'}}].concat(arr)
console.log(array); // [{age:4,friends:{a:'4',b:'4'}},3,{age:1,friends:{a:'1',b:'1'}}]

# 改变最外层非引用类型键值时，不受影响
arr[0] = 4
console.log(array); // [{age:4,friends:{a:'4',b:'4'}},3,{age:1,friends:{a:'1',b:'1'}}]

# 改变引用类型值时会受影响
arr[1].age = 2
console.log(array); // [{age:4,friends:{a:'4',b:'4'}},3,{age:2,friends:{a:'1',b:'1'}}]

Array.slice()

数组截取，返回新的数组，同时不影响原数组。

const arr = [3, { age: 1,friends: { a: '1', b: '1' }}]
const array = arr.slice(0)
console.log(array);  // [ 3, { age: 1, friends: { a: '1', b: '1' } } ]

arr[1].age = 2
console.log(array); // [ 3, { age: 2, friends: { a: '1', b: '1' } } ]

剩余运算符…

const arr = [3, { age: 1,friends: { a: '1', b: '1' }}]
const array = [...arr]
array[1].age = 2
console.log(arr); // [ 3, { age: 2, friends: { a: '1', b: '1' } } ]

Object.assign()

对对象进行浅拷贝的方法。

const obj = { age: 1,friends: { a: '1', b: '1' }}
const newObj = Object.assign({}, obj, {ss: 'hahah'})
console.log(newObj); // { age: 1, friends: { a: '1', b: '1' }, ss: 'hahah' }

obj.age = 2
console.log(newObj); // { age: 1, friends: { a: '1', b: '1' }, ss: 'hahah' }

obj.friends.a = '2'
console.log(newObj); // { age: 1, friends: { a: '2', b: '1' }, ss: 'hahah' }

总结

开发中多注意这几个方法的使用，可以减少很多找bug的时间。