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的影响

原文地址:https://www.cnblogs.com/kid526940065/p/11011523.html

时间: 06-12

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

js中数组去重的几种方法

js中数组去重的几种方法         1.遍历数组,一一比较,比较到相同的就删除后面的                 function unique(arr){                         for(var i=0;i<arr.length;i++){                                 for(var j=i+1;j<arr.length;j++){                                         if(ar

JS中的event 对象详解

JS中的event 对象详解 JS的event对象 Event属性和方法: 1. type:事件的类型,如onlick中的click: 2. srcElement/target:事件源,就是发生事件的元素: 3. button:声明被按下的鼠标键,整数,1代表左键,2代表右键,4代表中键,如果按下多个键,酒把这些值加起来,所以3就代表左右键同时按下:(firefox中 0代表左键,1代表中间键,2代表右键) 4. clientX/clientY:事件发生的时候,鼠标相对于浏览器窗口可视文档区域的

js中数组操作

var selectedCodeArray = []; var num = $.inArray(值, selectedCodeArray)  //值在数组中的位置 selectedCodeArray.push(值码); selectedCodeArray.splice(num, 1);//从数组中删除 js中数组操作,布布扣,bubuko.com

js中数组遍历for与for in区别(强烈建议不要使用for in遍历数组)

转自: http://www.cnblogs.com/javaee6/p/4142270.html?utm_source=tuicool&utm_medium=referral js中遍历数组的有两种方式 1 2 3 4 5 6 7 8 9 var array=['a'] //标准的for循环 for(var i=1;i<array.length;i++){     alert(array[i]) } //foreach循环 for(var i in array){     alert(ar

js中数组Array的一些常用方法总结

var list = new Array()是我们在js中常常写到的代码,今天就总结一下Array的对象具有哪些方法. list[0] = 0; list[1] = 1; list[2] = 2; 或者这样声明:var list = [0,1,2]; (1) shift():  alert(list.shift()); //删除数组的第一个元素,返回删除的值.这里是0  alert(list.length); //返回的数组长度是2 (2) unshift( i , j ): list.unsh

JS中数组的操作

1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度 var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); 创建一个数组并赋值 要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了长度为5,仍然可以将元素存储在规定长

JS中数组去重

JS数组去重 JS中对数组去重最好不要用unique方法,该方法主要是对dom节点数组的去重,如果对普通的数组元素去重只会去掉与之相邻的重复元素,也就是如果数组中还有不相邻的重复元素存在,将不会被去掉,而且有时候会出现问题,所以对数组去重可以利用如下方法: 先对数组a进行遍历,同时创建一个新的数组对象arr for (var i=0 ;i<a.length;i++) {    if (arr.indexOf(a[i]) == -1) { arr.push(a[i]) } } 经过这样处理后的数组

js中关于Blob对象的介绍与使用

blob对象介绍 一个 Blob对象表示一个不可变的, 原始数据的类似文件对象.Blob表示的数据不一定是一个JavaScript原生格式 blob对象本质上是js中的一个对象,里面可以储存大量的二进制编码格式的数据. 创建blob对象 创建blob对象本质上和创建一个其他对象的方式是一样的,都是使用Blob() 的构造函数来进行创建. 构造函数接受两个参数: 第一个参数为一个数据序列,可以是任意格式的值. 第二个参数是一个包含两个属性的对象{ type: MIME的类型, endings: 决

js中闭包和对象相关知识点

学习js时候,读到几篇不错的博客.http://www.cnblogs.com/yexiaochai/p/3802681.html一,作用域 和C.C++.Java 等常见语言不同,JavaScript 的作用域不是以花括号包围的块级作用域(block scope),这个特性经常被大多数人忽视,因而导致莫名其妙的错误.例如下面代码,在大多数类C 的语言中会出现变量未定义的错误,而在JavaScript 中却完全合法: if(true) { var somevar = 'value'; } con

js中的console对象(读书笔记-阮一峰的js标准参考教程)

阮老师的jstutorial:http://javascript.ruanyifeng.com/tool/console.html console对象是JavaScript中的原生对象.主要用于: 显示网页代码运行时的错误信息. 提供了一个命令行接口,用来与网页代码互动. 1.浏览器实现: Elements:用来调试网页的HTML源码和CSS代码. Resources:查看网页加载的各种资源文件(比如代码文件.字体文件.css文件等),以及在硬盘上创建的各种内容(比如本地缓存.Cookie.Lo