Javascript 对象(object)合并操作实例分析


Posted in Javascript onJuly 30, 2019

本文实例讲述了Javascript 对象(object)合并操作。分享给大家供大家参考,具体如下:

对象的合并

需求:设有对象 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' };

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JS支持带x身份证号码验证函数
Aug 10 Javascript
js表数据排序 sort table data
Feb 18 Javascript
js数字输入框(包括最大值最小值限制和四舍五入)
Nov 24 Javascript
js中如何把字符串转化为对象、数组示例代码
Jul 17 Javascript
js实现按钮加背景图片常用方法
Nov 01 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
Aug 28 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
Apr 26 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 Javascript
如何利用JSHint减少JavaScript的错误
Aug 23 Javascript
es6 filter() 数组过滤方法总结
Apr 03 Javascript
vue项目中全局引入1个.scss文件的问题解决
Aug 01 Javascript
Javascript实现简易天数计算器
May 18 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
Jul 30 #Javascript
8个有意思的JavaScript面试题
Jul 30 #Javascript
开源一个微信小程序仪表盘组件过程解析
Jul 30 #Javascript
原生js添加一个或多个类名的方法分析
Jul 30 #Javascript
vue2.0项目集成Cesium的实现方法
Jul 30 #Javascript
Koa从零搭建到Api实现项目的搭建方法
Jul 30 #Javascript
js实现的格式化数字和金额功能简单示例
Jul 30 #Javascript
You might like
TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结
2020/02/10 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
2011/10/16 Javascript
密码框显示提示文字jquery示例
2013/08/29 Javascript
JavaScript获取当前页面上的指定对象示例代码
2014/02/28 Javascript
javascript的几种继承方法介绍
2016/03/22 Javascript
浅析Bootstrap缩略图组件与警示框组件
2016/04/29 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
Bootstrap精简教程中秋大放送
2016/09/15 Javascript
JSON键值对序列化和反序列化解析
2017/01/24 Javascript
详解node.js平台下Express的session与cookie模块包的配置
2017/04/26 Javascript
深入探究AngularJs之$scope对象(作用域)
2017/07/20 Javascript
vue组件学习教程
2017/09/09 Javascript
vue中配置mint-ui报css错误问题的解决方法
2017/10/11 Javascript
JavaScript Date对象应用实例分享
2017/10/30 Javascript
javaScript中"=="和"==="的区别详解
2018/03/16 Javascript
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
一文搞懂ES6中的Map和Set
2019/05/20 Javascript
使用Python写个小监控
2016/01/27 Python
基于Python开发chrome插件的方法分析
2018/07/07 Python
python删除字符串中指定字符的方法
2018/08/13 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
对Django url的几种使用方式详解
2019/08/06 Python
使用Django搭建一个基金模拟交易系统教程
2019/11/18 Python
jupyter lab的目录调整及设置默认浏览器为chrome的方法
2020/04/10 Python
python3爬虫GIL修改多线程实例讲解
2020/11/24 Python
马来西亚演唱会订票网站:StubHub马来西亚
2018/10/18 全球购物
光声世纪笔试题目
2012/08/25 面试题
小学生元旦感言
2014/02/26 职场文书
成品库仓管员岗位职责
2014/04/06 职场文书
项目申报专员岗位职责
2014/07/09 职场文书
体育运动会广播稿
2014/10/05 职场文书
离婚财产分配协议书
2014/10/21 职场文书
MySQL 分组查询的优化方法
2021/05/12 MySQL
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android