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的影响
- 发表于:
- 原文链接：https://kuaibao.qq.com/s/20200705A00FJ800?refer=cp_1026
- 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号（企鹅号）传播渠道之一，根据《腾讯内容开放平台服务协议》转载发布内容。
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
