JS-数组拷贝

数组复制（浅拷贝）

数组是复合的数据类型，直接复制的话，只是复制了指向底层数据结构的指针，而不是克隆一个全新的数组。

const a=[1,1]
const b=a
b[0]=2
console.log(a) // [2,1]

通常我们说的数组拷贝，是指的深拷贝


深拷贝实现方式

1、JSON.parse & JSON.stringify（深拷贝）

    let a=new Array(5).fill(1)
    const e=JSON.parse(JSON.stringify(a))  // 深拷贝
    e[0]=2
    console.log(a) // [1, 1, 1, 1, 1]

    const ab=[[1],[1,2]]
    const ac=JSON.parse(JSON.stringify(ab)) 
    ac[0].push(3)
    console.log(ab) // [[1],[1,2]]

2、手写递归深拷贝函数

深拷贝：一层一层地拷贝，利用递归来实现每一层都重新创建对象结构或数组结构并赋值。

深拷贝拷贝了数据（不再是拷贝地址），改变数据不再相互影响。

function deepClone(oldData, target){
      for(let i in oldData){
        let item=oldData[i]
        if(item instanceof Object){
          target[i]={}
          deepClone(item, target[i])  // //递归调用deepClone，一个个拷贝
        }else if(item instanceof Array){
          target[i]=[]
          deepClone(item, target[i])
        }else{
          target[i]=item
        }
      }
      return target
    }

3、封装快速调用的深拷贝函数

function deepClone(obj) {
  var newObj = obj instanceof Array ? [] : {}
  for (var i in obj) {
    newObj[i] = typeof obj[i] === 'object' ? deepClone(obj[i]) : obj[i]

  }
  return newObj
}

// 使用
var copyState = deepClone(state) // 拷贝state对象

---------- 以下方法对不包含引用对象的一维数组是深拷贝，对多维数组是浅拷贝

1、扩展运算符（浅拷贝）

    let a=new Array(5).fill(1)
    const d=[...a] 
    d[0]=2
    console.log(a)  // [1, 1, 1, 1, 1]    对一维是深拷贝

    let ab=[[1],[1]]
    const e=[...ab]
    e[0].push(2)
    console.log(ab)  // [[1, 2],[2]]   对多维是浅拷贝

2、map方法 （浅拷贝)

    console.clear()
    a=new Array(5).fill(1)
    const f=a.map( item=> item)
    f[0]=2
    console.log(a) // [1, 1, 1, 1, 1]   对一维是深拷贝

    let ab=[[1],[2]]
    const fb=ab.map( item=> item)
    fb[0].push(2)
    console.log(ab)  // [[1, 2],[2]]   对多维是浅拷贝

3、concat方法

    let a=new Array(5).fill(1)
    const c=new Array.concat(a) 
    c[0]=2
    console.log(a)  // [1, 1, 1, 1, 1]  对不包含引用对象的一维数组是深拷贝

    const ab=[[1],[1]]
    const cb=new Array.concat(ab)
    cb[0].push(2)
    console.log(ab)   // [[1, 2],[2]]   对多维是浅拷贝

    const ac=[{name:11}]
    const ad=new Array.concat(ac)
    ad[0].name=222
    console.log(ac) // [{name: 222}] 

4、Array.from

Array.from 可以将任何可迭代对象转换为数组。给一个数组返回一个浅拷贝。

    a=new Array(5).fill(1)
    const c= Array.from(a)
    c[0]=2
    console.log(a)  // [1, 1, 1, 1, 1]  对一维是深拷贝

    const ab=[[1],[1]]
    const cb= Array.from(ab)
    cb[0].push(2)
    console.log(ab)  // [[1, 2],[2]]   对多维是浅拷贝