JS中常用的数组拷贝技巧

我们都知道，数组也是属于对象，在JS中对象的存储方式则是引用的方式。我们想要拷贝一个数组，就不能只是变量之前的赋值拷贝，这样他们将共享同一个引用，而数组又具有可变性，所以无法将原数组和拷贝的数组的数据分隔开。那么接下来将介绍如何对数据进行深层拷贝，使得原数组和拷贝数组的数据分隔开来。

浅拷贝

1.展开运算符

只支持简单结构的拷贝

    let number = [1, 2, 3, 4, 5]let copy = [...number]copy.push(0)console.log('copy', copy)//[1, 2, 3, 4, 5, 0]console.log('number', number)//[1, 2, 3, 4, 5]let arr = [{name: 'zhangsan',age: 18},{name: 'lisi',age: 19}]let copyArr = [...arr]copyArr[0].name = 'wangwu'console.log('copyArr', copyArr)//[ { name: 'wangwu', age: 18 }, { name: 'lisi', age: 19 } ]console.log('arr', arr)//[ { name: 'wangwu', age: 18 }, { name: 'lisi', age: 19 } ]

2.Array.concat方法

只支持简单结构的拷贝

  const number = [1, 2, 3, 4, 5]const copy = number.concat()copy.push(0)console.log('copy', copy)//[1, 2, 3, 4, 5, 0]console.log('number', number)//[1, 2, 3, 4, 5]const arr=[{name:'zhangsan',age:18},{name:'lisi',age:19}]let arrCopy=arr.concat()arrCopy[0].name='wangwu'console.log('arrCopy',arrCopy)//[ { name: 'wangwu', age: 18 }, { name: 'lisi', age: 19 } ]console.log('arr',arr)//[ { name: 'wangwu', age: 18 }, { name: 'lisi', age: 19 } ]

深拷贝

1.JSON.parse(JSON.stringify(arr))

支持简单结构和复杂结构的深层拷贝

  let number=[1,2,3,4,5]let copy=JSON.parse(JSON.stringify(number))copy.push(0)console.log('copy',copy)//[1, 2, 3, 4, 5, 0]console.log('number',number)//[1, 2, 3, 4, 5]const arr=[{name:'zhangsan',age:18},{name:'lisi',age:19}]let arrCopy=JSON.parse(JSON.stringify(arr))arrCopy[0].name='wangwu'console.log('arrCopy',arrCopy)//[ { name: 'wangwu', age: 18 }, { name: 'lisi', age: 19 } ]console.log('arr',arr)//[ { name: 'zhangsan', age: 18 }, { name: 'lisi', age: 19 } ]

2. Array.slice方法

支持简单结构和复杂结构的深层拷贝

    let numbers=[1,2,3,4,5]let numbersCopy=numbers.slice()numbersCopy.push(6)console.log('numbersCopy',numbersCopy)//[1, 2, 3, 4, 5, 6]console.log('numbers',numbers)//[1, 2, 3, 4, 5]let arr=[{name:'zhangsan',age:18},{name:'lisi',age:19}]let arrCopy=arr.slice()arrCopy.push({name:'wangwu',age:20})console.log('arrCopy',arrCopy)//[ { name: 'zhangsan', age: 18 }, { name: 'lisi', age: 19 }, { name: 'wangwu', age: 20 } ] console.log('arr',arr)//[ { name: 'zhangsan', age: 18 }, { name: 'lisi', age: 19 } ]

3.Array.map方法

支持简单结构和复杂结构的深层拷贝

    let numbers=[1,2,3,4,5,8]let copy=numbers.map(item=>item)copy.push(9)console.log('copy',copy)//[1, 2, 3, 4, 5, 8, 9]console.log('numbers',numbers)//[1, 2, 3, 4, 5, 8]const arr=[{name:'zhangsan',age:18},{name:'lisi',age:19}]const arrCopy=arr.map(item=>item)arrCopy.push({name:'wangwu',age:20})console.log('arrCopy--',arrCopy)//[ { name: 'zhangsan', age: 18 }, { name: 'lisi', age: 19 }, { name: 'wangwu', age: 20 } ]console.log('arr--',arr)//[ { name: 'zhangsan', age: 18 }, { name: 'lisi', age: 19 } ]

Array.from方法

支持简单结构和复杂结构的深层拷贝

    const number=[1,2,3,4,5]const copy=Array.from(number)copy.push(10)console.log('copy',copy)//[1, 2, 3, 4, 5, 10]console.log('number',number)//[1, 2, 3, 4, 5]let arr=[{hobby:'xxx',age:18},{hobby:'yyy',age:19}]const arrCopy=Array.from(arr)arrCopy.push({hobby:'zzz',age:20})console.log('arrCopy',arrCopy)//[ { hobby: 'xxx', age: 18 }, { hobby: 'yyy', age: 19 }, { hobby: 'zzz', age: 20 } ]console.log('arr',arr)//[ { hobby: 'xxx', age: 18 }, { hobby: 'yyy', age: 19 } ]