详解JavaScript中的数组合并方法和对象合并方法


Posted in Javascript onMay 11, 2018

1 数组合并

1.1 concat 方法

var a=[1,2,3],b=[4,5,6];
var c=a.concat(b);
console.log(c);// 1,2,3,4,5,6
console.log(a);// 1,2,3 不改变本身

1.2 循环遍历

var arr1=['a','b'];
var arr2=['c','d','e'];
for(var i=0;i<arr2.length;i++){
   arr1.push(arr2[i]) 
}
console.log(arr1);//['a','b','c','d','e']

1.3 apply

合并数组arr1和数组arr2,使用Array.prototype.push.apply(arr1,arr2)  or arr1.push.apply(arr1,arr2);

var arr1=['a','b'];
var arr2=['c','d','e'];
Array.prototype.push.apply(arr1,arr2);
//或者
arr1.push.apply(arr1,arr2);<br>console.log(arr1) //['a','b','c','d','e']

2 对象合并

2.1 $.extend()

var obj1= {'a': 1};
var obj2= {'b': 1};
var c = $.extend(obj1, obj2); 
console.log(obj1); // {a: 1, b: 1} obj1已被修改 
//或者 <br>var obj3 = $.extend({}, obj1, obj2) <br>console.log(obj3); //{a: 1, b: 1} 不会改变obj1,obj2

2.2 遍历赋值

var obj1={'a':1};
var obj2={'b':2,'c':3};
for(var key in obj2){
   if(obj2.hasOwnProperty(key)===true){  <br>   //此处hasOwnProperty是判断自有属性,
使用 for in 循环遍历对象的属性时,原型链上的所有属性都将被访问会避免原型对象扩展带来的干扰
      obj1[key]=obj2[key];
} 
}
console.log(obj1);//{'a':1,'b':2,'c':3};

2.3 Obj.assign()

可以把任意多个的源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象。

Object.assign(target, ...sources)
//a. 复制一个对象<br>var obj = { a: 1 ,b:2};
var copyObj = Object.assign({}, obj);
console.log(copyObj); // { a: 1,b:2 }<br><br>//b.合并多个对象 
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.4 对象的深拷贝和浅拷贝

2.4.1 浅拷贝

var obj1={'a':1};
var obj2={'b':{'b1':22,'b2':33}};
$.extend(obj1, obj2);  //obj1拷贝了obj2的属性
console.log(obj1) // {'a':1,'b'{'b1':22,'b2':33}}
console.log(obj1.b.b1) // 22
obj2.b.b1=44;  //obj2重新赋值
console.log(obj1.b.b1) // 44 obj1.b仅拷贝了对象的指引,所以受原obj2的影响

2.4.2 深拷贝

var obj1={'a':1};
var obj2={'b':{'b1':22,'b2':33}};
$.extend(true,obj1, obj2);  //第一个参数设为true表示深复制
console.log(obj1) // {'a':1,'b'{'b1':22,'b2':33}}
console.log(obj1.b.b1) // 22
obj2.b.b1=44;  //obj2重新赋值
console.log(obj1.b.b1) // 22 obj1拷贝了obj2的所有属性以及值,并不受obj2的影响

总结

以上所述是小编给大家介绍的JavaScript中的数组合并方法和对象合并方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
[推荐]javascript 面向对象技术基础教程
Mar 03 Javascript
JS input 数字验证代码
Jul 30 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
May 24 Javascript
JS对select控件option选项的增删改查示例代码
Oct 21 Javascript
jQuery的观察者模式详解
Dec 22 Javascript
javascript框架设计之类工厂
Jun 23 Javascript
AngularJS中run方法的巧妙运用
Jan 04 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
Jun 20 Javascript
发布一款npm包帮助理解npm的使用
Jan 03 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
Dec 06 Javascript
在vue中实现嵌套页面(iframe)
Jul 30 Javascript
vue抽出组件并传值实例
Jul 31 Javascript
Node.js使用cookie保持登录的方法
May 11 #Javascript
实例解析Vue.js下载方式及基本概念
May 11 #Javascript
AngularJS模态框模板ngDialog的使用详解
May 11 #Javascript
基于ionic实现下拉刷新功能
May 10 #Javascript
详解各版本React路由的跳转的方法
May 10 #Javascript
React路由管理之React Router总结
May 10 #Javascript
React从react-router路由上做登陆验证控制的方法
May 10 #Javascript
You might like
PHP的反射机制实例详解
2017/03/29 PHP
PHP编程实现的TCP服务端和客户端功能示例
2018/04/13 PHP
PHP中“=&gt;
2019/03/01 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
cookie在javascript中的使用技巧以及隐私在服务器端的设置
2012/12/03 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
基于JavaScript实现定时跳转到指定页面
2016/01/01 Javascript
jQuery 获取页面li数组并删除不在数组中的key
2016/08/02 Javascript
JS中用try catch对代码运行的性能影响分析
2016/12/26 Javascript
H5图片压缩与上传实例
2017/04/21 Javascript
node跨域请求方法小结
2017/08/25 Javascript
seajs中模块依赖的加载处理实例分析
2017/10/10 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
2017/11/27 Javascript
vue实现搜索功能
2019/05/28 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
2019/09/10 Javascript
[38:54]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第一场 11.28
2020/12/01 DOTA
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
详解Python中time()方法的使用的教程
2015/05/22 Python
django之常用命令详解
2016/06/30 Python
基于anaconda下强大的conda命令介绍
2018/06/11 Python
浅谈numpy生成数组的零值问题
2018/11/12 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
Pyecharts地图显示不完成问题解决方案
2020/05/11 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
墨西哥购物网站:Elektra
2020/01/21 全球购物
酒店员工职业生涯规划
2014/02/25 职场文书
户外活动策划方案
2014/03/12 职场文书
学生社团文化节开幕式主持词
2014/03/28 职场文书
水浒传读书笔记
2015/06/25 职场文书
运动会新闻稿
2015/07/17 职场文书
九九重阳节致辞
2015/07/31 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书
Python实现学生管理系统(面向对象版)
2021/06/24 Python
Java实现学生管理系统(IO版)
2022/02/24 Java/Android