javascript入门到进阶-javascript数组以及对象合并总结

javascript数组以及对象合并总结

js数组以及对象合并

var arr1 = [1,2,3,4]

var arr2 = [5,6,7,8]

var arr3 = arr1.concat(arr2);

console.log(arr1)

console.log(arr2)

console.log(arr3)

// 总结 concat 链接不会使得原数组变化，返回一个新的数组

// 2. 循环遍历数组

for(var i=0;i

arr1.push(arr2[i]);

}

// 这种方式改变了 arr1 数组，arr2 没有变化

// 3. apply() 方法 Array.prototype.push.apply(arr1,arr2) 或者 arr1.push.apply(arr1,arr2)

Array.prototype.push(arr1,arr2)

// 返回值是合并后数组的长度

console.log(arr1,arr2)

arr1.push.apply(arr1,arr2)

console.log(arr1,arr2)

// arr1 数组变化了， arr2没有变化

// 共享一下测试concat()和Array.prototype.push.apply(a,b) 的代码，有需要的拿走玩玩

// function testClass(){

//     var testArray1=[];

//     var testArray2=[];

//     this.resetArray=function(){

//         for(var i=0; i

//             testArray1.push(i);

//             testArray2.push(i+10000000);

//         }

//     }

//     this.applyTest=function(){

//         var startTime=0,

//             endTime=0;

//         console.log('开始合并的时间是：'+ (startTime=new Date().getTime()));

//         var aa=Array.prototype.push.apply(testArray1,testArray2);

//         console.log(aa);

//         console.log('合并完成的时间是：'+ (endTime=new Date().getTime()));

//         console.log('合并数组所用的时间是：'+(endTime-startTime));

//     }

//     this.concatTest=function(){

//          var startTime=0,

//             endTime=0;

//         console.log('开始合并的时间是：'+ (startTime=new Date().getTime()));

//         var aa= testArray1.concat(testArray2);

//         console.log(aa.length);

//         console.log('合并完成的时间是：'+ (endTime=new Date().getTime()));

//         console.log('合并数组所用的时间是：'+(endTime-startTime));

//     }

// }

// var apply=new testClass();

// apply.resetArray();

// apply.applyTest();

// var concat=new testClass();

// concat.resetArray();

// concat.concatTest();

// 2.对象合并

/**

2.1JQuery的extend()方法

**方法定义**：jQuery.extend([deep], target, object1, [objectN])

> 用一个或多个其他对象来扩展一个对象，返回被扩展的对象。

> 如果不指定target，则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。 如果第一个参数设置为true，则jQuery返回一个深层次的副本，递归地复制找到的任何对象(递归合并)。否则的话，副本会与原对象共享结构。 未定义的属性将不会被复制，然而从对象的原型继承的属性将会被复制。

*/

var o1={'a':1};

var o2={'b':2,'c':3};

var o3 = $.extend(o1,o2);

console.log(o3);//{'a':1,'b':2,'c':3}

console.log(o1);//{'a':1,'b':2,'c':3}//o1,o2被修改

var o4 = $.extend({},o1,o2)

console.log(o4);//{'a':1,'b':2,'c':3}

console.log(o1);//{'a':1}//不会改变o1,o2

/**

2.2Object.assign()方法

方法介绍：可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。

Object.assign(target,...sources)

2.2.1复制一个对象

*/

var obj={a:1,b:2};

var copyObj = Object.assign({},obj);

console.log(copyObj);//{a:1,b:2}

// 2.2.2合并多个对象

var o1 ={a:1};

var o2={b:2};

var o3={c:3};

var obj = Object.assign(o1,o2,o3);

console.log(obj)//{a:1,b:2,c:3}

console.log(o1)//{a:1,b:2,c:3},目标对象自身也会改变

/**

2.3遍历赋值法

代码逻辑：1.循环对象n中的每一个对应属性

2.确认对象n中存在该属性

3.确认对象o中不存在该属性

*/

var extend=function(o,p){

for(var p in n){

if(n.hasOwnProperty(p) &&(!o.hasOwnProperty(p)))

o[p]=n[p];

}

};

var obj1={'a':1};

var obj2={'b':2,'c':3};

for(var key in obj2){

if(obj2.hasOwnProperty(key)===true){//hasOwnProperty用来判断自有属性，使用for in 循环遍历对象属性时，原型链上的所有属性都将被访问会避免原型对象扩展带来的干扰

obj1[key]=obj2[key];

}

}

console.log(obj1);//{'a':1,'b':2,'c':3}

/**

2.4对象的深拷贝和浅拷贝

2.4.1浅拷贝

*/

var o1={'a':1};

var o2={'b':{'b1':11,'b2':111}};

$.extend(o1, o2);   //o1拷贝了o2的属性

console.log(o1)  // {'a':1,'b'{'b1':11,'b2':111}}

console.log(o1.b.b1)  // 11

o2.b.b1=999;   //o2重新赋值

console.log(o1.b.b1)  // 999  o1.b仅拷贝了对象的指引，所以受原o2的影响

//

// 2.4.2深拷贝

var o1={'a':1};

var o2={'b':{'b1':11,'b2':111}};

$.extend(true,o1, o2);   //true 表示深复制

console.log(o1)  // {'a':1,'b'{'b1':11,'b2':111}}

console.log(o1.b.b1)  // 11

o2.b.b1=999;   //o2重新赋值

console.log(o1.b.b1)  //11  o1拷贝了o2的所有属性以及值，并不受o2的影响