对象的合并

需求:设有对象 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. 强大的云存储与应用管理工具DzzOffice1.0 Beta(大桌子办公)发布下载

    之前在9月份我们发布了一份内测版,得到了1000多位朋友参与下载测试.经过2个月,结合测试后朋友们反馈的问题,和开发建议.终于完成了这次Beta版的开发.感谢这两个月中参与测试,和帮助我们完善程序的朋 ...

  2. spring mvc介绍只试图解析(转载)

    转载路径 http://haohaoxuexi.iteye.com/blog/1770554 SpringMVC视图解析器 前言 在前一篇博客中讲了SpringMVC的Controller控制器,在这 ...

  3. 学习嵌入式开发板的Android平台体系结构和源码结构

    本文转自迅为论坛资料:http://www.topeetboard.com 推荐学习嵌入式开发板平台:iTOP-4412开发板 下面这张图出自Google官方,展示了Android系统的主要组成部分. ...

  4. html 零散问题

    1.iconfont的使用 https://www.cnblogs.com/yujihang/p/6706056.html 2.阴影效果比较 box-shadow:0 0 6px #000 inset ...

  5. jekyll 将纯文本转化为静态网站和博客 静态网站生成器

    jekyll 将纯文本转化为静态网站和博客 静态网站生成器 这个貌似对windows 支持不是很好~ 但是有支持,官方说不建议使用

  6. Flex 布局 (两个div居中自适应 宽度变小变一列,宽度够就是两列)

    https://www.runoob.com/w3cnote/flex-grammar.html display: flex; justify-content: center; align-items ...

  7. i++为什么不能作为左值,而++i可以作为左值

    今天看书见到如下代码: int a=2; ++a++; 根据操作符的优先级和结合性知,操作符++的优先级为3,结合性为右结合,即++a++;可以理解为++(a++); 但我把代码放在vs2015上,结 ...

  8. C++操作MYSQL遇到的一些问题

    首先 我使用的是 vcpkg<不知道的可以进行百度 可以剧透一下,这个对Visual Studio使用一些C++的轮子太方便了, 上面是我装的一些库<大大安利vcpkg 安装时一定要使用p ...

  9. Kafka Broker配置

    Kafka发行包里自带的配置样本可以用来安装单机服务,但并不能满足大多数安装场景的要求.kafka有很多配置选项,Kafka有很多配置选项,涉及安装和调优的方方面面.不过大多数调优选项可以使用默认配置 ...

  10. Python之数字

    Python之数字 int(数字)===>在Python3中,int没有范围,在Python2中,int超出范围就叫长整型(Long). 浮点运算:单精度 float 双精度 double a: ...