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 相关文章推荐
JavaScript 设计模式学习 Factory
Jul 29 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
Jun 11 Javascript
js 用CreateElement动态创建标签示例
Nov 20 Javascript
$("").click与onclick的区别示例介绍
Sep 25 Javascript
JS制作手机端自适应缩放显示
Jun 11 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
Nov 18 Javascript
原生javascript实现匀速运动动画效果
Feb 26 Javascript
Bootstrap每天必学之标签页(Tab)插件
Aug 09 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 Javascript
bootstrap输入框组使用方法
Feb 07 Javascript
layui 优化button按钮和弹出框的方法
Aug 15 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 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
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
php读取大文件示例分享(文件操作类)
2014/04/13 PHP
PHP 实现的将图片转换为TXT
2015/10/21 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
php利用header函数下载各种文件
2016/08/24 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
editable.js 基于jquery的表格的编辑插件
2011/10/24 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
2016/05/05 Javascript
javascript三种代码注释方法
2016/06/02 Javascript
基于js中的原型、继承的一些想法
2016/08/10 Javascript
微信小程序 密码输入(源码下载)
2017/06/27 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
微信小程序实现流程进度的图样式功能
2018/01/16 Javascript
angular2实现统一的http请求头方法
2018/08/13 Javascript
JS代码触发事件代码实例
2020/01/02 Javascript
Python2.7基于笛卡尔积算法实现N个数组的排列组合运算示例
2017/11/23 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
在vscode中配置python环境过程解析
2019/09/28 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
Python统计文本词汇出现次数的实例代码
2020/02/27 Python
Django中的session用法详解
2020/03/09 Python
django中url映射规则和服务端响应顺序的实现
2020/04/02 Python
Python request使用方法及问题总结
2020/04/26 Python
Python configparser模块操作代码实例
2020/06/08 Python
怎么快速自学python
2020/06/22 Python
python基于win32api实现键盘输入
2020/12/09 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
世界上最大的餐具公司:Oneida
2016/12/17 全球购物
家长对孩子的感言
2014/03/10 职场文书
2014年母亲节演讲稿范文
2014/05/07 职场文书
演讲比赛策划方案
2014/06/11 职场文书
2014年新农村建设工作总结
2014/12/01 职场文书
英文慰问信范文
2015/03/24 职场文书