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); 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已被修改 //或者
var obj3 = $.extend({}, obj1, obj2);
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){
// 此处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. 复制一个对象
var obj = { a: 1 ,b:2};
var copyObj = Object.assign({}, obj);
console.log(copyObj); // { a: 1,b:2 } //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的影响

.

js中数组的合并和对象的合并的更多相关文章

  1. js中数组,字符串,对象常用方法总结

    时间对象方法 获取当前时间的毫秒数 1.var timestamp = Date.parse(new Date()); 2.var timestamp = (new Date()).valueOf() ...

  2. JS中如何判断对象是对象还是数组

    JS中如何判断对象是对象还是数组 一.总结 一句话总结:typeof Array.isArray === "function",Array.isArray(value)和Objec ...

  3. js中数组方法大全

    js数组方法大全 一:前言 我们在学到js中数组的时候,我们会接触到js中数组的一些方法,这些方法对我们来说,可以很遍历的达到我们想要的结果,但是因为方法比较多,有些方法也不常用,可能会过一段时间就会 ...

  4. php和js中数组的总结

      php中数组的表示方法:array()或者[] js中数组的表示方法:new array()或者[] 一.php中初始化命名数组 在PHP中声明数组的方式主要有两种:一是应用array()函数声明 ...

  5. JS中数组的介绍

    一.数组: 一组数据的集合: 二.JS中数组的特点: 1.数组定义时无需指定数据类型: 2.数组定义时可以无需指定数组长度: 3.数组可以存储任何类型的数据: 4.一般是相同的数据类型: 三.数组的创 ...

  6. js中数组如何使用

    js中数组如何使用 一.总结 一句话总结:new Array()和[]两种方法都可以创建数组. 二.js中创建数组,并往数组里添加元素 数组的创建 var arrayObj = new Array() ...

  7. js中数组扁平化处理

  8. js中数组去重的几种方法

    js中数组去重的几种方法         1.遍历数组,一一比较,比较到相同的就删除后面的                 function unique(arr){                 ...

  9. JavaScript -- 时光流逝(二):js中数组的方法

    JavaScript -- 知识点回顾篇(二):js中数组的方法 1. 数组 (1)定义数组,数组赋值 <script type="text/javascript"> ...

  10. js中数组增删查改unshift、push、pop、shift、slice、indexOf、concat、join

    js中数组增删查改unshift.push.pop.shift.slice.indexOf.concat.join

随机推荐

  1. odp.net 读写oracle blob字段

    DEVELOPER: ODP.NET Serving Winning LOBs: http://www.oracle.com/technetwork/issue-archive/2005/05-nov ...

  2. windows7下检测耳机麦克拔插(转)

    原文转自 https://blog.csdn.net/rankun1/article/details/50972990 #include "stdafx.h" #define SA ...

  3. 多线程之:java线程创建

    java中创建线程有两种方式: 1.继承Thread类,重写run()方法,如: public class MyThread extends Thread { public void run(){ S ...

  4. Appium+python自动化3-启动淘宝app【转载】

    前言 前面两篇环境已经搭建好了,接下来就是需要启动APP,如何启动app呢?首先要获取包名,然后获取launcherActivity.获取这两个关键东西的方法很多,这里就不一一多说,小伙伴们可以各显神 ...

  5. 原来是adblock惹的祸

    一个在本地开发好的网站,放到服务器就不行了.花了好几个小时的时间,最后试着把adblock关了,然后正常了.

  6. (15)oracle序列

    1.创建序列 CREATE SEQUENCE EMP_SEQ START WITH 1 MAXVALUE 9999999999999999999999999999 MINVALUE 1 NOCYCLE ...

  7. (1)oracle安装、卸载、启动、关闭、登陆以及同时遇到的问题

    数据库概念 在oracle里数据库是一个静态的概念,数据库的资料保存在硬盘上,一个数据库可以有多个实例 数据库实例 数据库实例是一个动态的概念,它是进程+这个进程的内存块.就把它当成个指针吧,这个指针 ...

  8. POJ 3253 Fence Repair【哈弗曼树/贪心/优先队列】

    Fence Repair Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 53645   Accepted: 17670 De ...

  9. Python的工具包[2] -> matplotlib图像绘制 -> matplotlib 库及使用总结

    matplotlib图像绘制 / matplotlib image description  目录 关于matplotlib matplotlib库 补充内容 Figure和AxesSubplot的生 ...

  10. 线段树【p1607】[USACO09FEB]庙会班车Fair Shuttle

    Description 逛逛集市,兑兑奖品,看看节目对农夫约翰来说不算什么,可是他的奶牛们非常缺乏锻炼--如果要逛完一整天的集市,他们一定会筋疲力尽的.所以为了让奶牛们也能愉快地逛集市,约翰准备让奶牛 ...