详解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 相关文章推荐
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
Oct 10 Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 Javascript
jQuery函数map()和each()介绍及异同点分析
Nov 08 Javascript
浅谈jQuery中的checkbox问题
Aug 10 Javascript
Canvas 制作动态进度加载水球详解及实例代码
Dec 09 Javascript
js实现适合新闻类图片的轮播效果
Feb 05 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
May 02 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 Javascript
vue路由插件之vue-route
Jun 13 Javascript
详解关于Vue单元测试的几个坑
Apr 26 Javascript
我所理解的JavaScript中的this指向
Sep 04 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
Nov 06 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
AM/FM收音机的安装与调试
2021/03/02 无线电
天津市收音机工业发展史
2021/03/04 无线电
PHP has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
PHP模板解析类实例
2015/07/09 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
javascript jQuery插件练习
2008/12/24 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
2011/12/20 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
2013/01/06 Javascript
浅析jQuery中常用的元素查找方法总结
2013/07/04 Javascript
用js实现in_array的方法
2013/11/05 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
js实现点击左右按钮轮播图片效果实例
2015/01/29 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
Javascript实现图片不间断滚动的代码
2016/06/22 Javascript
jQuery 3.0十大新特性最终版发布
2016/07/14 Javascript
Javascript中级语法快速入手
2016/07/30 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
vue使用Axios做ajax请求详解
2017/06/07 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
2019/05/14 Javascript
Python操作MySQL简单实现方法
2015/01/26 Python
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
python爬虫使用cookie登录详解
2017/12/27 Python
python多任务之协程的使用详解
2019/08/26 Python
python 实现在无序数组中找到中位数方法
2020/03/03 Python
浅谈python锁与死锁问题
2020/08/14 Python
深入理解css中vertical-align属性
2017/04/18 HTML / CSS
求职自我推荐信
2014/06/25 职场文书
小学生禁毒教育心得体会
2016/01/15 职场文书
创业开店,这样方式更合理
2019/08/26 职场文书
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript