详解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 拖放效果实现代码
Jan 22 Javascript
javascript 图片上一张下一张链接效果代码
Mar 12 Javascript
JavaScript中getUTCMinutes()方法的使用详解
Jun 10 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
Mar 07 Javascript
JavaScript中的splice方法用法详解
Jul 20 Javascript
微信小程序 MINA文件结构
Oct 17 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
Jun 28 Javascript
vue异步axios获取的数据渲染到页面的方法
Aug 09 Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 Javascript
javascript判断一个变量是数组还是对象
Apr 10 Javascript
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
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 VS ASP
2006/10/09 PHP
php Xdebug的安装与使用详解
2013/06/20 PHP
php实现文件下载功能的几个代码分享
2014/05/10 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
一文掌握PHP Xdebug 本地与远程调试(小结)
2019/04/23 PHP
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
2007/04/20 Javascript
070823更新的一个[消息提示框]组件 兼容ie7
2007/08/29 Javascript
Ajax+Json 级联菜单实现代码
2009/10/27 Javascript
jquery1.4后 jqDrag 拖动 不可用
2010/02/06 Javascript
NodeJS 模块开发及发布详解分享
2012/03/07 NodeJs
JQuery中serialize()、serializeArray()和param()方法示例介绍
2014/07/31 Javascript
js给网页加上背景音乐及选择音效的方法
2015/03/03 Javascript
javascript转换静态图片,增加粒子动画效果
2015/05/28 Javascript
js模拟淘宝网的多级选择菜单实现方法
2015/08/18 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
2016/10/31 Javascript
jQuery+PHP实现上传裁剪图片
2020/06/29 jQuery
详解使用JWT实现单点登录(完全跨域方案)
2019/08/02 Javascript
[04:13]2018国际邀请赛典藏宝瓶Ⅱ饰品一览
2018/07/21 DOTA
Python实现确认字符串是否包含指定字符串的实例
2018/05/02 Python
手把手教你如何安装Pycharm(详细图文教程)
2018/11/28 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
Python3.7下安装pyqt5的方法步骤(图文)
2020/05/12 Python
Prometheus开发中间件Exporter过程详解
2020/11/30 Python
CSS3正方体旋转示例代码
2013/08/08 HTML / CSS
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
微软香港官网及网上商店:Microsoft HK
2016/09/01 全球购物
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
中学教师自我鉴定
2014/02/07 职场文书
财务管理专业自荐书
2014/09/02 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
大明湖导游词
2015/02/03 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
Python实战之实现康威生命游戏
2021/04/26 Python
javascript函数式编程基础
2021/09/15 Javascript
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS