对象的合并

需求:设有对象 o1 ,o2,需要得到对象 o3

var o1 = { a:'a' }, o2 = { b:'b' };
// 则
var o3 = { a:'a', b:'b' }

方法1:使用JQuery的extend方法

**方法定义**:jQuery.extend([deep], target, object1, [objectN])

> 用一个或多个其他对象来扩展一个对象,返回被扩展的对象。

  > 如果不指定target,则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。 如果第一个参数设置为true,则jQuery返回一个深层次的副本,递归地复制找到的任何对象(递归合并)。否则的话,副本会与原对象共享结构。 未定义的属性将不会被复制,然而从对象的原型继承的属性将会被复制。

o3 = $.extend(o1, o2)  // 合并 o1 和 o2, 将结果返回给 o3. 注意: 此时,o1 == o3! 即 o1 被修改
// 或
o3 = $.extend({}, o1, o2) // 合并 o1 和 o2, 将结果返回给 o3. 注意: 此时,o1 != o3! 即 o1 没有被修改

方法2:用 Object.assign();

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 }, 注意目标对象自身也会改变。

方法3:遍历赋值法

代码逻辑:

  1. 循环对象n中的每一个对应属性。
  2. 确认对象n中存在该属性
  3. 确认对象o中不存在该属性
var extend=function(o,n){
for (var p in n){
if(n.hasOwnProperty(p) && (!o.hasOwnProperty(p) ))
o[p]=n[p];
}
};

类似于直接赋值增加属性:

o3=o1;
o3['b']='b';
// o3 ={ o1:'a', o2:'b' };

.

js 合并对象的更多相关文章

  1. JS深度合并对象

    /** * 如果target(也就是FirstOBJ[key])存在, * 且是对象的话再去调用deepObjectMerge, * 否则就是FirstOBJ[key]里面没这个对象,需要与Secon ...

  2. object-assign合并对象

    1. Object.assign() 对于合并对象操作, ECMAScript 6 中提供了一个函数: Object.assign(target, source); 这个方法会将所有可枚举 [1] 的 ...

  3. JS合并两个数组的方法

    JS合并两个数组的方法 我们在项目过程中,有时候会遇到需要将两个数组合并成为一个的情况.比如: var a = [1,2,3]; var b = [4,5,6]; 有两个数组a.b,需求是将两个数组合 ...

  4. require.js 加载 vue组件 r.js 合并压缩

    https://www.taoquns.com 自己搭的个人博客 require.js 参考阮一峰 Javascript模块化编程(三):require.js的用法 r.js 合并压缩 参考司徒正美 ...

  5. 组件 computed 与 vuex 中 getters 的使用,及 mapGetters 的使用,对象上追加属性,合并对象

    vue 是响应式的数据,这一点相当的方便我们的操作,但有些错误的操作方法会 vue 的响应无效 除此之外我们还要了解 vue.set() 和 Object.assgin() 的使用 vue.set() ...

  6. jquery数组的合并 对象的合并

    直接转自:https://www.cnblogs.com/ooo0/p/7737678.html 1.数组的合并 1.1 concat方法 var a=[1,2,3],b=[4,5,6]; var c ...

  7. $.extend({},旧的,新的);合并对象,后面的覆盖前面的

    $.extend({},旧的,新的):合并对象,后面的覆盖前面的: <script> $(function(){ int={ a:1, b:function(){console.log(' ...

  8. Object.assign方法复制或合并对象

    Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象 var obj = { a: 1 }; var copy = Object.assign({ ...

  9. js定义对象的几种容易犯的错误

    //js定义对象的几种容易犯的错误function Person() { getName = function (){ console.info(1); }; return this;}//Perso ...

随机推荐

  1. vue 写一个聊天工具

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. mysql中 for update 使用

    解释: for update是在数据库中上锁用的,可以为数据库中的行上一个排它锁.当一个事务的操作未完成时候,其他事务可以读取但是不能写入或更新.例子: 比如一张表三个字段 , id(商品id), n ...

  3. python常见问题一(安装报错)

    常见问题一:我在安装python2.7时,提示错误:'An error occurred during the installation of assembly 'Microsoft.VC90.CRT ...

  4. Html 内联元素、外联元素 和 可变元素

    块元素(block element)一般是其他元素的容器元素 块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P".“form"这个块元素比较特殊,它 ...

  5. ajax 分页点击数据缓存

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. Nginx(alias 和 root的区别)

    Nginx(alias 和 root的区别)1.alias 和 root 的区别: location /request_path/image { root /local_path/image/; } ...

  7. assert.notDeepStrictEqual()详解

    assert.notDeepStrictEqual(actual, expected[, message]) 深度地严格不相等比较测试,与 assert.deepStrictEqual() 相反. c ...

  8. PHP:压缩 Zip

    文章来源:http://www.cnblogs.com/hello-tl/p/7661222.html <?php # 文件字符集 header("Content-type: text ...

  9. 牛客网NOIP赛前集训营 第6场 T1 最长路

    [题解] 先建反向图,然后跑拓扑排序求出最长路. 将所有的点按照最长路从小到大分层,把上一层连向这一层的边按照边权为第一关键字.起点的排名为第二关键字排序. 按照这个顺序更新这一层的答案,按照这一层每 ...

  10. ASP.net在IE6下乱码问题

    今天处理程序的时候遇到一个坑爹的问题 该死的IE6传中文参数会出现 类似于◆的乱码 不过终于解决了  也许解决的方法有很多  和大家分享下我的解决方案 我用的javascript中 传的参数 < ...