jquery数组的合并 对象的合并
直接转自:https://www.cnblogs.com/ooo0/p/7737678.html
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(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的影响
########附源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jquery 数组的合并 对象的合并</title>
<script src="./jquery-3.3.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
//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);
console.log(arr1);
console.log(arr2);
//或者
var arr3=['a','b'];
var arr4=['c','d','e'];
arr3.push.apply(arr3,arr4);
console.log(arr3) //['a','b','c','d','e']
//2 对象合并
//2.1 $.extend()
var obj1= {'a': 1};
var obj2= {'b': 1};
var c = $.extend(obj1, obj2);
console.log(c); // {a: 1, b: 1} obj1已被修改
console.log(obj1); // {a: 1, b: 1} obj1已被修改
console.log(obj2); // {a: 1, b: 1} obj1已被修改
//或者
var obj4= {'a': 1};
var obj5= {'b': 1};
var obj3 = $.extend({}, obj4, obj5)
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 }<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 }, o1作为目标对象自身也会改变。
console.log(o2); //{ b: 2 }; o2 不变
console.log(o3); //{ c: 3 }; o3 不变
//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 obj7={'a':1};
var obj6={'b':{'b1':22,'b2':33}};
$.extend(true,obj7, obj6); //第一个参数设为true表示深复制
console.log(obj7) // {'a':1,'b'{'b1':22,'b2':33}}
console.log(obj7.b.b1) // 22
obj6.b.b1=44; //obj2重新赋值
console.log(obj7.b.b1) // 22 obj1拷贝了obj2的所有属性以及值,并不受obj2的影响
</script>
</body>
</html>
jquery数组的合并 对象的合并的更多相关文章
- js jquery 数组的合并 对象的合并
转载自:http://www.cnblogs.com/xingxiangyi/p/6416468.html 1 数组合并 1.1 concat 方法 1 2 3 4 var a=[1,2,3],b=[ ...
- ES6-对象赋值,key值得构建,is()方法对比对象,assign()合并对象
ES6对象赋值: // es5 let name = "ananiah"; let skill ='web'; let obj = {name:name,skill:skill}; ...
- jQuery.extend()的合并对象功能
jQuery.extend( [ deep ], target, object1, [ objectN ] )合并对象到第一个对象 //deep为boolean类型,其它参数为object类型 var ...
- js 对象的合并(3种方法)转载
对象的合并 需求:设有对象 o1 ,o2,需要得到对象 o3 var o1 = { a:'a' }, o2 = { b:'b' }; // 则 var o3 = { a:'a', b:'b' } 方法 ...
- 微信小程序3 - 对象的合并
ES6中 Object.assign方法用于对象的合并,将源对象( source )的所有可枚举属性,复制到目标对象( target ). 限制: 只是浅拷贝, 即 内部对象 不会拷贝,只是 引用 ...
- js 合并对象
对象的合并 需求:设有对象 o1 ,o2,需要得到对象 o3 var o1 = { a:'a' }, o2 = { b:'b' }; // 则 var o3 = { a:'a', b:'b' } 方法 ...
- es6对象复制合并 Object.assign
对象的复制 var obj= { a: 1 }; var copy = Object.assign({}, obj); console.log(copy); //{ a: 1 } 对象的合并和封装 v ...
- 将两个数组相同index的value合并成一个新的value组成一个新的数组
将两个数组相同index的value合并成一个新的value组成一个新的数组 前提: 这两个数组的长度相同 生成后的新数组长度也相同 返回值都是对象 把rows对象的key和value弄成两个数组, ...
- Object.assign方法复制或合并对象
Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象 var obj = { a: 1 }; var copy = Object.assign({ ...
随机推荐
- TensorFlow入门——hello
上一节说了TensorFlow的安装,这一节说一下测试的问题 新建一个Python文件,输入 import tensorflow as tf hello = tf .constant (’Hello, ...
- Linux 日志分析
学会查看日志文件是一件很有意义的事,因为在Linux系统中运行的程序通常会把一些系统消息和错误消息写入对应的日志中,若是一旦出现问题,我们就可以通过查看日志来迅速定位,及时解决故障. 日志的三种类型 ...
- Winform Global exception and task parallel library exception;
static class Program { /// <summary> /// 应用程序的主入口点. /// </summary> [STAThread] static vo ...
- CentOS 安装 oralce Java的图形出错: libXtst.so.6: cannot open shared object file: No such file or directory
问题类似: shared object file: No such file or directory occurred..java.lang.UnsatisfiedLinkError: /tmp/O ...
- 去掉或修改lightinthebox网址与标题中Wholesale关键词
includes\languages\english.php define('SEO_COMMON_KEYWORDS','Wholesale'); 将里面的Wholesale换成你想显示的词即可.
- Linux 指令总结
1. 显示本机信息 显示ip地址 hostname -i 显示当前使用用户 whoani 显示cpu信息 lscpu
- ArrayMatched
import os from jinja2 import Environment,FileSystemLoader def generateNewLackArray(ArrayList,count,T ...
- Spring MVC HandlerMapping
http://www.cnblogs.com/tengyunhao/p/7658952.html http://www.cnblogs.com/tengyunhao/p/7518481.html Sp ...
- 【HDU6709】Fishing
题目大意:有 N 条鱼,每条鱼都有钓鱼和烤鱼的时间,钓鱼的时间均相同,每条鱼都有自己的烤鱼时间,一次只能烤一条鱼,且不能间断.现要求通过某种顺序将所有的鱼钓上来并烤完,求最小的时间是多少. 题解: 对 ...
- CAP 与 注册中心
https://blog.csdn.net/fly910905/article/details/100023415 http://www.ruanyifeng.com/blog/2018/07/cap ...