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 //1.concat 2 var arrSrc = [ 3 { 4 name:"test1", 5 age:40 6 }, 7 { 8 name:"test2", 9 age:30 10 } 11 ]; 12 var arrTarget = arrSrc.concat(); 13 console.log(arrTarget);//此时元素1尚未改变（当然，在控制台打出的Log里元素1是改变了的,因为随后arrTarget就随着改变了。）数组仍是两个元素 14 arrSrc[0].type="changed"; 15 arrSrc[2] = { 16 name:"test3", 17 age:30 18 }; 19 console.log(arrSrc);//元素1改变，并且数组新增一个元素。 20 console.log(arrTarget);//元素1改变，但是数组仍是两个元素 21 22 //2.extend({},object) 效果与concat一样，只是concat是针对数组的操作，而extend是针对所有的Object操作。 23 // 如果一个对象要进行拷贝，可以用这种方法，这样拷贝后的对象和原来的对象就不是一个指向了。 24 var arrSrc2 = [ 25 { 26 name:"test1", 27 age:40 28 }, 29 { 30 name:"test2", 31 age:30 32 } 33 ] 34 35 var arrTarget2 = $.extend([],arrSrc2); 36 console.log(arrTarget2); 37 arrSrc2[0].name = "changed"; 38 arrSrc2[2] ={ 39 name:"test3", 40 age:30 41 } 42 console.log(arrSrc2); 43 console.log(arrTarget2); 44 45 // 3.extend(true,{},object) 深度拷贝，如果数组的元素是一个对象，拷贝后的数组的元素和原数组的元素不指向同一个对象，是两个完全分离的数组，互相不影响。 46 var arrSrc3 = [ 47 { 48 name:"test1", 49 age:40 50 }, 51 { 52 name:"test2", 53 age:30 54 } 55 ] 56 57 var arrTarget3 = $.extend(true,[],arrSrc3); 58 console.log(arrTarget3); 59 arrSrc3[0].name = "changed"; 60 arrSrc3[2] ={ 61 name:"test3", 62 age:30 63 } 64 console.log(arrSrc3); 65 console.log(arrTarget3);
二、数组合并
1、concat
可以完整的合并两个数组，返回新数组，但是如果数组的元素是一个对象，那么合并后的数组的对象和原来的数组的对象仍是同一个指向，修改对象会影响两个数组。
数组各自增减元素是独立的，不影响的。
2、extend(false,[],arr1,arr2)
合并后的数组是一个新数组，三个数组各自增减元素互不影响，但是元素仍然指向同一个对象，所以元素的操作会彼此影响。
注意：合并后的数组相同位置的元素会被覆盖。
3.extend(true,[],arr1,arr2)
合并后的数组是一个新数组，三个数组的元素不指向同一个对象，是三个完全分离的数组，互相不影响。
注意：合并后的数组相同的元素也会合并。
结论：
数组合并方法只有concat可用。
为了数组元素之间互不影响，可以先concat，再把合并后的数组进行拷贝。（未经测试）
示例：
1 //1.concat 合并后的数组是一个新数组，三个数组各自增减元素互不影响，但是元素仍然指向同一个对象，所以元素的操作会彼此影响。 2 var arrSrc41 = [ 3 { 4 name:"test1", 5 age:40 6 }, 7 { 8 name:"test2", 9 age:30 10 } 11 ]; 12 var arrSrc42 = [ 13 { 14 name:"test99", 15 age:40 16 } 17 ] 18 19 var newArr = arrSrc41.concat(arrSrc42); 20 console.log(arrSrc41); 21 console.log(arrSrc42); 22 console.log(newArr); 23 arrSrc41[0].name = "changed";//第一个数组的名字修改，影响newArr 24 arrSrc42[0].name = "test88";//第二个数组的名字修改，影响newArr 25 arrSrc41[2] ={ 26 name:"test3", 27 age:30 28 }//第一个数组新增元素，不影响newArr 29 newArr[2].age = 99; //新数组第三个元素的年龄修改，影响arrSrc42 30 console.log(arrSrc41); 31 console.log(arrSrc42); 32 console.log(newArr); 33 34 35 //2.extend(false,[],arrSrc51,arrSrc52) 合并后的数组是一个新数组，三个数组各自增减元素互不影响，但是元素仍然指向同一个对象，所以元素的操作会彼此影响。 36 //注意：合并后的数组相同的元素会被覆盖。所以合并后的数组长度为2，而不是3.第一个数组的第一个元素被第二个数组的第一个元素覆盖。 37 var arrSrc51 = [ 38 { 39 name:"test1", 40 age:40, 41 city:"QD" 42 }, 43 { 44 name:"test2", 45 age:30 46 } 47 ]; 48 var arrSrc52 = [ 49 { 50 name:"test99", 51 age:40, 52 country:"China" 53 } 54 ] 55 56 var newArr2 = $.extend(false,[],arrSrc51,arrSrc52) 57 console.log(arrSrc51); 58 console.log(arrSrc52); 59 console.log(newArr2); 60 arrSrc51[0].name = "changed";//第一个数组的名字修改，影响newArr2 61 arrSrc52[0].name = "test88";//第二个数组的名字修改，影响newArr2 62 arrSrc51[2] ={ 63 name:"test3", 64 age:30 65 }//第一个数组新增元素，不影响newArr2 66 newArr2[0].age = 99; //新数组第一个元素的年龄修改，影响第二个数组的第一个元素（因为第二个数组的第一个元素把第一个数组的第一个元素覆盖了） 67 console.log(arrSrc51); 68 console.log(arrSrc52); 69 console.log(newArr2); 70 71 //3.extend(true,[],arrSrc51,arrSrc52) 合并后的数组是一个新数组，三个数组的元素不指向同一个对象，是三个完全分离的数组，互相不影响。 72 //注意：合并后的数组相同的元素也会合并。所以合并后的数组长度为2，而不是3.第一个数组的第一个元素和第二个数组的第一个元素合并。 73 var arrSrc61 = [ 74 { 75 name:"test1", 76 age:40, 77 city:"QD" 78 }, 79 { 80 name:"test2", 81 age:30 82 } 83 ]; 84 var arrSrc62 = [ 85 { 86 name:"test99", 87 age:40, 88 country:"China" 89 } 90 ] 91 92 var newArr3 = $.extend(true,[],arrSrc61,arrSrc62) 93 console.log(arrSrc61); 94 console.log(arrSrc62); 95 console.log(newArr3); 96 arrSrc61[0].name = "changed";//第一个数组的名字修改，不影响newArr2 97 arrSrc62[0].name = "test88";//第二个数组的名字修改，不影响newArr2 98 arrSrc61[2] ={ 99 name:"test3", 100 age:30 101 }//第一个数组新增元素，不影响newArr2 102 newArr3[0].age = 99; //新数组第一个元素的年龄修改，不影响 103 console.log(arrSrc61); 104 console.log(arrSrc62); 105 console.log(newArr3);
