js 笔记-数组的拷贝和合并

一、对象和数组的拷贝

1.concat()

var arr1={'1','2','3'};

var arr2 = arr1.concat();

虽然返回的数组是新的数组，但是如果数组元素是对象时，两个数组的对象仍然是同一个引用，修改对象会影响到两个数组。

2.extend方法实现拷贝

var arr2 = $.extend([],arr1);

如果拷贝对象是数组，那么效果与concat一样；如果拷贝对象是Object【使用：$.extend({},objSrc)】，那么拷贝后的对象和原对象也不是同一个指向，互相之间也不影响。

3.深拷贝方法

var arr2 = $.extend(true,[],arr1);

拷贝后的数组的元素和原数组的元素不指向同一个对象，是两个完全分离的数组，互相不影响。

结论：

对象拷贝合适的方法是$.extend({},object);
数组拷贝合适的方法是$.extend(true,[],arrSrc);

示例：

        //1.concat
        var arrSrc = [
            {
                name:"test1",
                age:40
            },
            {
                name:"test2",
                age:30
            }
        ];
        var arrTarget = arrSrc.concat();
        console.log(arrTarget);//此时元素1尚未改变（当然，在控制台打出的Log里元素1是改变了的,因为随后arrTarget就随着改变了。）数组仍是两个元素
        arrSrc[0].type="changed";
        arrSrc[2] = {
            name:"test3",
            age:30
        };
        console.log(arrSrc);//元素1改变，并且数组新增一个元素。
        console.log(arrTarget);//元素1改变，但是数组仍是两个元素

        //2.extend({},object) 效果与concat一样，只是concat是针对数组的操作，而extend是针对所有的Object操作。
        // 如果一个对象要进行拷贝，可以用这种方法，这样拷贝后的对象和原来的对象就不是一个指向了。
        var arrSrc2 = [
            {
                name:"test1",
                age:40
            },
            {
                name:"test2",
                age:30
            }
        ]

        var arrTarget2 = $.extend([],arrSrc2);
        console.log(arrTarget2);
        arrSrc2[0].name = "changed";
        arrSrc2[2] ={
            name:"test3",
            age:30
        }
        console.log(arrSrc2);
        console.log(arrTarget2);

//        3.extend(true,{},object) 深度拷贝，如果数组的元素是一个对象，拷贝后的数组的元素和原数组的元素不指向同一个对象，是两个完全分离的数组，互相不影响。
        var arrSrc3 = [
            {
                name:"test1",
                age:40
            },
            {
                name:"test2",
                age:30
            }
        ]

        var arrTarget3 = $.extend(true,[],arrSrc3);
        console.log(arrTarget3);
        arrSrc3[0].name = "changed";
        arrSrc3[2] ={
            name:"test3",
            age:30
        }
        console.log(arrSrc3);
        console.log(arrTarget3);

二、数组合并

1、concat

可以完整的合并两个数组，返回新数组，但是如果数组的元素是一个对象，那么合并后的数组的对象和原来的数组的对象仍是同一个指向，修改对象会影响两个数组。

数组各自增减元素是独立的，不影响的。

2、extend(false,[],arr1,arr2)

合并后的数组是一个新数组，三个数组各自增减元素互不影响，但是元素仍然指向同一个对象，所以元素的操作会彼此影响。

注意：合并后的数组相同位置的元素会被覆盖。

3.extend(true,[],arr1,arr2)

合并后的数组是一个新数组，三个数组的元素不指向同一个对象，是三个完全分离的数组，互相不影响。

注意：合并后的数组相同的元素也会合并。

结论：

数组合并方法只有concat可用。

为了数组元素之间互不影响，可以先concat，再把合并后的数组进行拷贝。（未经测试）

示例：

//1.concat 合并后的数组是一个新数组，三个数组各自增减元素互不影响，但是元素仍然指向同一个对象，所以元素的操作会彼此影响。
        var arrSrc41 = [
            {
                name:"test1",
                age:40
            },
            {
                name:"test2",
                age:30
            }
        ];
        var arrSrc42 = [
            {
                name:"test99",
                age:40
            }
        ]

        var newArr = arrSrc41.concat(arrSrc42);
        console.log(arrSrc41);
        console.log(arrSrc42);
        console.log(newArr);
        arrSrc41[0].name = "changed";//第一个数组的名字修改，影响newArr
        arrSrc42[0].name = "test88";//第二个数组的名字修改，影响newArr
        arrSrc41[2] ={
            name:"test3",
            age:30
        }//第一个数组新增元素，不影响newArr
        newArr[2].age = 99; //新数组第三个元素的年龄修改，影响arrSrc42
        console.log(arrSrc41);
        console.log(arrSrc42);
        console.log(newArr);


        //2.extend(false,[],arrSrc51,arrSrc52) 合并后的数组是一个新数组，三个数组各自增减元素互不影响，但是元素仍然指向同一个对象，所以元素的操作会彼此影响。
        //注意：合并后的数组相同的元素会被覆盖。所以合并后的数组长度为2，而不是3.第一个数组的第一个元素被第二个数组的第一个元素覆盖。
        var arrSrc51 = [
            {
                name:"test1",
                age:40,
                city:"QD"
            },
            {
                name:"test2",
                age:30
            }
        ];
        var arrSrc52 = [
            {
                name:"test99",
                age:40,
                country:"China"
            }
        ]

        var newArr2 = $.extend(false,[],arrSrc51,arrSrc52)
        console.log(arrSrc51);
        console.log(arrSrc52);
        console.log(newArr2);
        arrSrc51[0].name = "changed";//第一个数组的名字修改，影响newArr2
        arrSrc52[0].name = "test88";//第二个数组的名字修改，影响newArr2
        arrSrc51[2] ={
            name:"test3",
            age:30
        }//第一个数组新增元素，不影响newArr2
        newArr2[0].age = 99; //新数组第一个元素的年龄修改，影响第二个数组的第一个元素（因为第二个数组的第一个元素把第一个数组的第一个元素覆盖了）
        console.log(arrSrc51);
        console.log(arrSrc52);
        console.log(newArr2);

        //3.extend(true,[],arrSrc51,arrSrc52) 合并后的数组是一个新数组，三个数组的元素不指向同一个对象，是三个完全分离的数组，互相不影响。
        //注意：合并后的数组相同的元素也会合并。所以合并后的数组长度为2，而不是3.第一个数组的第一个元素和第二个数组的第一个元素合并。
        var arrSrc61 = [
            {
                name:"test1",
                age:40,
                city:"QD"
            },
            {
                name:"test2",
                age:30
            }
        ];
        var arrSrc62 = [
            {
                name:"test99",
                age:40,
                country:"China"
            }
        ]

        var newArr3 = $.extend(true,[],arrSrc61,arrSrc62)
        console.log(arrSrc61);
        console.log(arrSrc62);
        console.log(newArr3);
        arrSrc61[0].name = "changed";//第一个数组的名字修改，不影响newArr2
        arrSrc62[0].name = "test88";//第二个数组的名字修改，不影响newArr2
        arrSrc61[2] ={
            name:"test3",
            age:30
        }//第一个数组新增元素，不影响newArr2
        newArr3[0].age = 99; //新数组第一个元素的年龄修改，不影响
        console.log(arrSrc61);
        console.log(arrSrc62);
        console.log(newArr3);