js中数组和对象的合并
1 数组合并
1.1 concat 方法
1
2
3
4
|
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 循环遍历
1
2
3
4
5
6
7
8
|
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);
1
2
3
4
5
6
7
8
|
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()
1
2
3
|
var obj1= { 'a' : 1}; var obj2= { 'b' : 1}; var c = $.extend(obj1, obj2); |
1
|
console.log(obj1); // {a: 1, b: 1} obj1已被修改 |
1
|
//或者 <br>var obj3 = $.extend({}, obj1, obj2) <br>console.log(obj3); //{a: 1, b: 1} 不会改变obj1,obj2 |
2.2 遍历赋值
1
2
3
4
5
6
7
8
9
|
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)
1
2
3
|
//a. 复制一个对象<br>var obj = { a: 1 ,b:2}; var copyObj = Object.assign({}, obj); console.log(copyObj); // { a: 1,b:2 }<br><br>//b.合并多个对象 |
1
2
3
4
5
6
7
|
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的影响

js中数组和对象的合并的更多相关文章
- js 中数组或者对象的深拷贝和浅拷贝
浅拷贝 : 就是两个js 对象指向同一块内存地址,所以当obj1 ,obj2指向obj3的时候,一旦其中一个改变,其他的便会改变! 深拷贝:就是重新复制一块内存,这样就不会互相影响. 有些时候我们定义 ...
- JS中数组与对象的遍历方法实例小结
一.数组的遍历: 首先定义一个数组 1 arr=['snow','bran','king','nightking']; 1.for循环,需要知道数组的长度; 2.foreach,没有返回值,可以不知道 ...
- js中数组Array对象的方法sort()的应用
一. sort()方法的介绍 //给一组数据排序 var arrNum = [12,1,9,23,56,100,88,66]; console.log("排序前的数组:"+arrN ...
- JS中数组和对象的区别
- js中 给json对象添加属性和json数组添加元素
js中 给json对象添加新的属性 比如现在有一个json对象为jsonObj,需要给这个对象添加新的属性newParam,同时给newParam赋值为pre.做法如下: var obj={ &quo ...
- js中如何访问对象和数组
js中如何访问对象和数组 一.总结 一句话总结:js访问对象点和中括号,访问数组的话就是中括号 对象 . [] 数组 [] 1.js访问对象的两种方式? . [] 可以使用下面两种方式访问对象的属性和 ...
- js中数组方法大全
js数组方法大全 一:前言 我们在学到js中数组的时候,我们会接触到js中数组的一些方法,这些方法对我们来说,可以很遍历的达到我们想要的结果,但是因为方法比较多,有些方法也不常用,可能会过一段时间就会 ...
- js中两个对象的比较
代码取自于underscore.js 1.8.3的isEqual函数. 做了一些小小的修改,主要是Function的比较修改. 自己也加了一些代码解读. <!DOCTYPE html> & ...
- js中的json对象详细介绍
JSON一种简单的数据格式,比xml更轻巧,在JavaScript中处理JSON数据不需要任何特殊的API或工具包,下面为大家详细介绍下js中的json对象, 1.JSON(JavaScript Ob ...
随机推荐
- 数读 | 为什么运维朋友们都需要学Python?
运维人员需不需要学开发?需不需要学Python?PythonN和Shell有什么区别?天天问这种好水的问题,我实在受不了,决定帮大家扫扫盲. 现阶段,掌握一门开发语言已经成为高级运维工程师的必备计能, ...
- [apue] 使用 popen/pclose 的一点疑问
当我们需要将输出作为标准输入传递给一个命令,或者将一个命令的输出作为标准输入来读取, 一般会想到使用pipe与fork相结合的方式,来重定向标准输入/输出给指定命令. popen/pclose 帮助我 ...
- try catch finally 用法 今天闲来没事就总结下
try { 执行的代码,其中可能有异常.一旦发现异常,则立即跳到catch执行.否则不会执行catch里面的内容 } catch { 除非try里面执行代码发生了异常,否则这里的代码不会执行 } fi ...
- HTTP 学习笔记02
请求行 格式:请求方式 资源路径 HTTP版本号 HTTP1.1 还需要 [host] 例:GET /test.html HTTP/1.0 GET /test.html HTTP/ ...
- java中session和application的用法
Session的用法 首先创建2个jsp文件t1.jsp t2.jsp 在t1.jsp <% //设置session的键与值 session.setAttribute("abc&qu ...
- 自动化冒烟测试 Unittest , Pytest 哪家强?
前言:之前有一段时间一直用 Python Uittest做自动化测试,觉得Uittest组织冒烟用例比较繁琐,后来康哥提示我使用pytest.mark来组织冒烟用例 本文讲述以下几个内容: 1.Uni ...
- ubuntu18.04上搭建KVM虚拟机环境超完整过程
看标题这是篇纯运维的文章.在中小型企业中,一般很少配置专业的运维人员,都是由开发人员兼着.同时,对有志于技术管理的开发人员来说,多了解一些运维及整个软件生命周期的知识,是很有帮助的,因为带团队不仅仅是 ...
- 让Redis突破内存大小的限制
Redis虽然可以实现持久化存储,也是基于数据内存模型的基础之上,单机内存大小限制着Redis存储的数据量,有没有一种替代方案呢?本文介绍一款笔者使用的采用New BSD License 许可协议的软 ...
- shell_链接命令ln与nohup命令使用方法
ln命令是一个链接命令,工作中用的比较多的就是对一个文件或者是目录建立起软连接.软连接的概念类似于windows下的快捷方式.比如,在win下,我们经常在安装完word.ppt等office程序后,在 ...
- 微信小程序生成随机数
const charts = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K', ...