javascript中数组深拷贝途径及对象数组深拷贝

javascript中数组深拷贝途径及对象数组深拷贝

---

---

什么是浅拷贝

---

在js当中，我们常常遇到数组复制的的情况，许多人一般都会使用“=”来直接把一个数组赋值给一个变量，如：

var a=[1,2,3];
var b=a;
console.log(b);　　//输出的是1,2,3
a[2]=0;
console.log(b);　　//输出的是1,2,0

把数组a赋值给变量b，这种就是js数组的浅拷贝。这种赋值实际只是将数组a的地址给了数组b，它两指向同一块内存。
　　然而，正如上面代码所示，一旦对数组a做出修改，实际上会影响拷贝出来的其他数组，这并不是我们所想要的结果，因此就必须用到数组的深拷贝来解决这个问题。

实现数组的深拷贝的方法

---

1. for循环实现数组的深拷贝

var arr1 = [1, 2, 3];
var arr2 = [];
for (var i = 0; i < arr1.length; i++) {
    arr2.push(arr1[i]);
}
arr1[0] = 4;
console.log(arr1); //4, 2, 3
console.log(arr2); //1, 2, 3

2. concat 方法实现数组的深拷贝
   　　 concat() 方法用于连接两个或多个数组。
   　　该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

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

4. slice 方法实现数组的深拷贝
   　　slice() 方法可从已有的数组中返回选定的元素。
   　　arrayObject.slice(start,end)
   　　该方法返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。

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

5. ES6扩展运算符实现数组的深拷贝（最推荐）
   …扩展运算符是ES6的语法，使用起来非常的方便简洁，最为推荐。

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

或者

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

对象数组深拷贝

---

溜_x_i_a_o_迪童鞋在写对象数组深拷贝的时候吗，以上方法均失败。如：

let data = [
    {
        id: 0,
        name: '小明',
        age: 24,
        gender: '男'
    },
    {
        id: 1,
        name: '小芳',
        age: 30,
        gender: '女'
    },
    {
        id: 2,
        name: '小美',
        age: 31,
        gender: '女'
    },
    {
        id: 3,
        name: '小刚',
        age: 21,
        gender: '男'
    },
    {
        id: 4,
        name: '小琪',
        age: 18,
        gender: '女'
    }
];
    /*
        深拷贝数组：
        如果数组中存的是对象，进行深拷贝，但此时其实存仍然是原数组对象的地址，
        如果修改数组中对象的值，原数组对象值仍会改变！
    */
    
    console.log(data); 
    //var arr = [...data];
    //var arr = data.slice(0);
    var arr = data.concat();
    arr[0].age = 999;
    arr.pop();
    console.log(arr); 
    console.log(data); 

提醒大家在拷贝对象数组时可用以下方法：
　　溜_x_i_a_o_迪童鞋是对对象数组循环，对数组中每一个对象，进行对象展开，相当于每个对象再进行一次深拷贝。（如果后续有更好的方法，溜_x_i_a_o_迪童鞋再更新）

let data = [
    {
        id: 0,
        name: '小明',
        age: 24,
        gender: '男'
    },
    {
        id: 1,
        name: '小芳',
        age: 30,
        gender: '女'
    },
    {
        id: 2,
        name: '小美',
        age: 31,
        gender: '女'
    },
    {
        id: 3,
        name: '小刚',
        age: 21,
        gender: '男'
    },
    {
        id: 4,
        name: '小琪',
        age: 18,
        gender: '女'
    }
];

    console.log(data); 
    var arr = [];
    data.forEach((item,index) =>{
        arr[index] = {...item};
    });
    arr[0].age = 999;
    arr.pop();
    console.log(arr); 
    console.log(data); 

　
（后续再补充！）