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({ ...

随机推荐

JQuery事件（2）
jQuery 事件下面是 jQuery 中事件方法的一些例子: Event 函数绑定函数至 $(document).ready(function) 将函数绑定到文档的就绪事件(当文档完成加载时) ...
jenkins自动部署代码到多台服务器
下面讲一下如何通过一台jenkins服务器构建后将代码分发到其他的远程服务器,即jenkins自动部署代码到多台服务器. 1.下载 pulish over ssh 插件 2.系统管理 -> 系统 ...
Delphi Button组件
linux 静态路由
用ip route删除默认路由 ip route del default via 192.168.18.1 用route删除默认路由route del default gw 192.168.18.1 ...
springmvc视图文件的保护
可以将视图文件,包含视图文件的目录放在WEB-INF下,WEB-INF是受保护的,放在该目录下,就只能在代码中访问到了view文件了,用户无法通过浏览器直接输入地址访问.
Python之路：进程、线程
目录一.进程与线程区别 1.1 什么是线程 1.2 什么是进程 1.3 进程与线程的区别二.Python GIL全局解释器锁三.线程 3.1 threading模块 3.2 Join & ...
《Python基础教程》一点笔记
这本书还是月初的时候翻了翻,看了前十章左右就发现这本书写的比较烂,翻译地就更烂了,讲的内容其实没有抓住重点. 下面是看的时候记得几小段代码: #首字母相同的男生女生 girls = ['alice', ...
thinkphp5.0.22--日志分析和错误调试
但凡遇到php页面报错信息,我们可以借助phpgjx工具,一款类似postman的工具来跟踪导致问题的sql信息,这工具的实质是一款文件夹和文件组合,通过Apache和nginx部署分析排查这类问 ...
织梦dedecms做的网站首页标题篡改跳转赌博网站解决方案
织梦dedecms因其强大功能,简单实用的优点常常被用来做企业网站,程序开源使用的人多了网站漏洞多会有中毒的情况,常见的有一种,首页标题关键词描述被篡改,百度快照收录点击后跳转的赌博网站,怎么解决这个 ...
信息提示框：MessageBox
一函数原型及参数 function MessageBox(hWnd: HWND; Text, Caption: PChar; Type: Word): Integer; 1.参数列表 hW ...

jquery数组的合并 对象的合并