对象的合并

需求:设有对象 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. CAD参数绘制直径标注(com接口)

    主要用到函数说明: _DMxDrawX::DrawDimDiametric 绘制一个直径标注.详细说明如下: 参数 说明 DOUBLE dChordPointX 在被标注的曲线上的第一个点X值 DOU ...

  2. jQuery中Ajax事件beforesend及各参数含义1

    jQuery中Ajax事件beforesend及各参数含义 转自:http://blog.sina.com.cn/s/blog_609f9fdd0100wprz.html Ajax会触发很多事件. 有 ...

  3. 【PS切图】前端工程师必备,但又无需精通的一项技能。

    前端主要从事一些代码开发工作,PS使用是前端工程师必备,但又无需精通的一项技能. 前端切图四大面板:在“窗口”菜单下开启 1,信息(手动开启)2,字符(手动开启)3,历史记录(手动开启)4,图层(默认 ...

  4. vue set方法

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

  5. LNMP环境搭建网站

    系统:Centos7.4 一台服务器安装nginx.php.mysql 原理不是很懂,但实测如下两种环境下都能成功,这里做下记录: 1.一个干净的系统,从0开始完成所有步骤,完成LNMP搭建 2.已经 ...

  6. http主要请求头

    一.内容协商 1.Accept:希望服务器返回的数据格式,如下面的:text/javascript, application/javascript, application/ecmascript, a ...

  7. lucene-5.3.1配置(win7x64)

    lucene下载地址:http://www.us.apache.org/dist/lucene/java/5.3.1/lucene-5.3.1.zip 下载之后解压 控制台应用程序下配置: 找到luc ...

  8. Python之面向对象方法

    Python之面向对象方法 property的用法: property属于类的封装的范畴 property是一种特殊的属性,访问它时会执行一段功能(函数),然后返回值. 用property的方法,就可 ...

  9. jmap Unable to open socket file解决

    pid:Unable to open socket file: target process not responding or HotSport VM not loadedThe -F option ...

  10. 动态创建div(鼠标放上显示二维码)

    最近的微信大行其道.各个网站上都给出的微信验证码,进行手机扫描加入. 怎么创建类似与点击鼠标弹出一个浮动的div显示二维码的这种效果. 1.首先制作好这样的图片,写css样式 <style ty ...