关于数组的深浅拷贝问题

1.数组的浅拷贝

(1)直接赋值

    let arr1 = [1,2,3,4]
    let arr2 = arr1
    console.log(arr2); // [1,2,3,4]
    arr1[0] = 6
    console.log(arr2);  // [6,2,3,4]
    console.log(arr1); // [6,2,3,4]
  

2.数组的深拷贝

(1)slice(start,end)方法:可从已有的数组中返回选定的元素; start: 截取开始位置下标， end: 截取结束位置下标

    let arr1 = [1,2,3,4]
    let arr2 = arr1.slice(0) // 不写结束位置，默认截取整数组
    
    console.log(arr2);  //[1,2,3,4]
    arr1[0] = 6         //将arr1的第一个元素改成6
    console.log(arr1);  //[6,2,3,4]
    console.log(arr2);  //[1,2,3,4]
    // 由打印结果可知： 成功进行了深拷贝
    
  //考虑多维数组的情况
  let arr1 = [1,2,3,4,[1,2,3]]
  let arr2 = arr1.slice(0)  //拷贝arr1
  //修改arr1的元素
  arr1[0] = 6   
  arr1[4][0] = 5  
  console.log(arr1);   // [6,2,3,4,[5,2,3]]
  console.log(arr2);   // [1,2,3,4,[5,2,3]]
  
  //由打印结果可知： 一维数组可以成功深拷贝，如果是多维数组则不能用此方法

(2)concat方法: 用于连接两个或多个字符串,生成新的字符串

    let arr1 = [1,2,3,4]
    let arr2 = arr1.concat() //  连接一个空的字符串
    
    console.log(arr2);  //[1,2,3,4]
    arr1[0] = 6         //将arr1的第一个元素改成6
    console.log(arr1);  //[6,2,3,4]
    console.log(arr2);  //[1,2,3,4]
    // 由打印结果可知： 成功进行了深拷贝
    
  //考虑多维数组的情况
  let arr1 = [1,2,3,4,[1,2,3]]
  let arr2 = arr1.concat()  //拷贝arr1
  //修改arr1的元素
  arr1[0] = 6   
  arr1[4][0] = 5  
  console.log(arr1);   // [6,2,3,4,[5,2,3]]
  console.log(arr2);   // [1,2,3,4,[5,2,3]]
  
  //由打印结果可知： 一维数组可以成功深拷贝，如果是多维数组则不能用此方法

(3) ES6语法:解构赋值语法

    let arr1 = [1,2,3,4]
    let arr2 = [...arr1]
    arr1[0] = 6
    console.log(arr1); //[6,2,3,4]
    console.log(arr2); //[1,2,3,4]
    
    //由测试可知： 一维数组可以成功深拷贝，如果是多维数组同样不能用此方法

(4) 递归实现深拷贝

  let arr1 = [1,2,3,4,[1,2,3]]   
  function deepCopy(arr) {
    let out = []
    for(let i = 0; i < arr.length; i++){
      if(arr[i] instanceof Array){
        out[i] = this.deepCopy(arr[i]);
      }else {
        out[i] = arr[i]
      }

    }
    return out 
  }
  
  let arr2 = deepCopy(arr1)
  arr1[4][0] = 9
  console.log(arr1); //[1,2,3,4,[9,2,3]]   
  console.log(arr2); //[1,2,3,4,[1,2,3]] 
  
  //实现了二维数组的深拷贝

总结： loadsh：是一个一致性、模块化、高性能的 JavaScript 实用工具库。，有深拷贝和浅拷贝的对应方法可直接使用