数组Array 深浅拷贝的案例理解

，在实现这个操作前，首先我们需要，理解，什么是，数组的浅拷贝，什么又是数组的深拷贝，两者之间有什么区别？

1.
我们先来理解一下，什么是浅拷贝，看，下段代码的输出结果什么，毫无疑问，输出，arr2的结果为 [1, 2, 3, 4, 5, 6, 7, 8, 9] 这个数组，没错，就是和arr的值，一模一样，其实这就是一个简单的数组浅拷贝，arr2拷贝了arr的值，使自己也等于一个值。

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let arr2 = arr;
console.log(arr2);//[1, 2, 3, 4, 5, 6, 7, 8, 9]

我们再来理解一下深拷贝，其实从上面代码，结果就可以看出，如果我输入 console.log(arr2 == arr);，得到的结果绝对是 true，他们两个数组是一模一样的，但是这样，还会伴随着一个需求问题，就是，如果，我arr数组里面的值，变了，那么我arr2的值，也会跟着变，也就是说，他们是一体的，但是如果，只需要拷贝arr的值，却要它们两个变量的值，不相等，改变其中一个的值，另一个变量的值，不受影响。使它们是相互间独立的。所以，这里我们就需要使用到深拷贝。

下面是我为大家整理的原生js，深拷贝的一些方法：

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let arr2 = [];

//第一种方式，JSON的序列化，和反序列化，把arr转换成字符串，再转换成数组，就可以拷贝到arr的值，且他们之间是相互独立的不受影响。。
 let arr2 = JSON.parse(JSON.stringify(arr));



//第二种方法，for循环遍历，遍历arr数组，拿到数组的每个值，再把每个值，push到新数组里面
  for (let index = 0; index < arr.length; index++) {
    arr2.push(arr[index])
    }
   console.log(arr2 == arr); //false



 // 第三种方式  for of 遍历      arr每个值，拿到每个值，再把每个值，push到新数组里面
        for (const item of arr) {
           arr2.push(item)
        }
        console.log(arr2 == arr);  //false



  //  方法四，使用     Object.assign方法   把第二个参数赋值给第一个参数。
        Object.assign(arr2, arr);
        console.log(arr2 == arr);    //false


// 方法五   用数组原生方法  forEach
        arr2.forEach(item => arr2.push(item));
        console.log(arr2 == arr);     //false



  // 方法六. 用数组原生方法   map
        let arr2 = arr.map(item => item);
        console.log(arr1 == arr);  //false


// 方法七.    用数组原生方法  slice，获取arr所有值，再赋值给arr2
         let arr2 = arr.slice(0);
         console.log(arr == arr2);   //false

// 方法八. 数组，合并的方法    concat   括号里不赋值
      let arr2 = arr.concat();
      console.log(arr == arr2);    //false



//方法九. 数组方法    for in，遍历每个下标，拿到每个值
         for (let key in arr) {
            arr2.push(arr[key]);
         }
         console.log(arr == arr2);   //false


  // 方法十. 数组过滤  方法 filter
        let arr2 = arr.filter(item => item);
        console.log( arr == arr2);  //false

// 方法十一：使用扩展运算符
        let arr2 = [...arr];
        console.log(arr == arr2);   //false

感谢大家的阅读。这是我总结出来的一些方法，希望能帮助到大家。