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