对象的合并

需求:设有对象 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 }, 注意目标对象自身也会改变。
console.info(o2); // { b: 2 }
console.info(o3); //{ c: 3 }

和$.extend相同,将对象合并到第一个对象中。

方法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];
}
};

js 对象的合并(3种方法)转载的更多相关文章

  1. JS对象创建的几种方法

    最近一直在看JS高级程序设计这本书,有空来梳理一下几种创建对象的方式.话不多说,直接步入正题. 第一种:Object构造函数创建 var Person = new Object(); Person.n ...

  2. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

  3. JS对象创建的几种方式整理

    ​ 本文主要介绍了JS对象创建的几种方式 第一种:Object构造函数创建 var Person = new Object(); Person.name = 'Nike'; Person.age = ...

  4. ajax请求参数中含有特殊字符"#"的问题 (另附上js编码解码的几种方法)

    使用ajax向后台提交的时候 由于参数中含有#  默认会被截断 只保留#之前的字符  json格式的字符串则不会被请求到后台的action 可以使用encodeURIComponent在前台进行编码, ...

  5. JSON(JS 对象简谱,一种数据交换格式)

    JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式 存储和表示数据的文本格式 层次结构清晰.简洁 JSON是一个序列化的对象或数组 1.js ...

  6. js中判断对象类型的几种方法

    我们知道,JavaScript中检测对象类型的运算符有:typeof.instanceof,还有对象的constructor属性: 1) typeof 运算符 typeof 是一元运算符,返回结果是一 ...

  7. js访问对象属性的两种方法

    var obj={name:'fuuf',age:19} 第一种,用.访问 obj.name 第二种 用[]访问 obj['name']  //此时name是字符串,要加引号 注意事项 使用第二种方法 ...

  8. JS中遍历对象属性的四种方法

    Object.keys().Object.values().Object.entries().for...in.Map (1)Object.keys(): let ex1 = {c1: 'white' ...

  9. html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel,保留table样式

    先上代码   <script type="text/javascript" language="javascript">   var idTmr; ...

随机推荐

  1. 20145226 2016-2017-2 夏艺华 《Java程序设计》 课程总结

    20145226夏艺华 <Java程序设计>课程总结 每周读书笔记链接汇总 第一周读书笔记 了解Java编程风格,认识Java的类型与变量,掌握Java流程控制的方法(分支.循环). ht ...

  2. [Oracle]如何查看一个数据文件是否是自动扩展

    开始 SQL> col file_id format 99SQL> col file_name format a50SQL> col tablespace_name format a ...

  3. 11- IO模型-未完成

    1.同步.异步.阻塞.非阻塞 同步(synchronous) IO和异步(asynchronous) IO,阻塞(blocking) IO和非阻塞(non-blocking)IO分别是什么,到底有什么 ...

  4. request不能接受前端传来的参数的问题

    这是因为设置了 disabled ,所以接收不到参数,只需要去掉disabled即可.

  5. 一目了然带你看lniux

    第一部分    熟悉Linux基本操作 一.初识Linux 1.Linux特点 ◊  开放性 ◊  多用户 ◊  多任务 ◊  良好的用户界面 ◊  设备独立性 ◊  丰富的网络功能 ◊  可靠的系统 ...

  6. linux安装anaconda3

    1,查看系统的版本  Uname –r 2,安装git 等依赖库 yum install git yum install zlib-devel bzip2-devel openssl-devel nc ...

  7. Qt-网易云音乐界面实现-5 收藏列表,播放列表实现 QListWidget QTableWidget

    先上目前完成的内容吧,发现后面越写越多.在看看点击量,心凉凉. 完成了左侧的导航列表,还有就是右下角的播放列表. //创建的歌单 my_Create_Music_List = new QListWid ...

  8. jmeter发送http请求(初学者)

    1.jmeter安装配置(百度,这里就不赘述了) 2.添加线程组 测试计划-->添加-->Threads-->线程组 3.线程组配置 线程数:用户数或者并发数,设置为100则有100 ...

  9. 人脸识别-关于face_recognition库的安装

    首先十分感谢博客https://blog.csdn.net/scc_722/article/details/80613933,经历过很多尝试(快要醉了),终于看了这篇博客后安装成功. face_rec ...

  10. opengl-glsl

    GLSL 着色器是使用一种叫GLSL的类C语言写成的.GLSL是为图形计算量身定制的,它包含一些针对向量和矩阵操作的有用特性. 着色器的开头总是要声明版本,接着是输入和输出变量.uniform和mai ...