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 相关文章推荐
Mootools 1.2教程 同时进行多个形变动画
Sep 15 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
Mar 11 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
Jul 18 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 Javascript
一张Web前端的思维导图分享
Jul 03 Javascript
ArtEditor富文本编辑器增加表单提交功能
Apr 18 Javascript
js ajaxfileupload.js上传报错的解决方法
May 05 Javascript
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 Javascript
浅谈Vue.set实际上是什么
Oct 17 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
Nov 07 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
Jun 01 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 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
php读取mysql的简单实例
2014/01/15 PHP
PHP的mysqli_set_charset()函数讲解
2019/01/23 PHP
由浅到深了解JavaScript类
2006/09/08 Javascript
使用jquery插件实现图片延迟加载技术详细说明
2011/03/12 Javascript
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
Javascript小技巧之生成html元素
2014/05/15 Javascript
js 获取元素所有兄弟节点的实现方法
2016/09/06 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
2017/03/15 Javascript
Vuex简单入门
2017/04/19 Javascript
Express + Node.js实现登录拦截器的实例代码
2017/07/01 Javascript
React学习之事件绑定的几种方法对比
2017/09/24 Javascript
js canvas画布实现高斯模糊效果
2018/11/27 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
2019/06/25 Javascript
vue路由 遍历生成复数router-link的例子
2019/10/30 Javascript
[03:36]2015国际邀请赛第二日现场精彩集锦
2015/08/06 DOTA
零基础学Python(一)Python环境安装
2014/08/20 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
浅谈Python对内存的使用(深浅拷贝)
2018/01/17 Python
python matplotlib绘图,修改坐标轴刻度为文字的实例
2018/05/25 Python
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
python 移除字符串尾部的数字方法
2018/07/17 Python
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
Python给定一个句子倒序输出单词以及字母的方法
2018/12/20 Python
python 实现selenium断言和验证的方法
2019/02/13 Python
在Qt中正确的设置窗体的背景图片的几种方法总结
2019/06/19 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
python如何实现word批量转HTML
2020/09/30 Python
HTML5新增元素如何兼容旧浏览器有哪些方法
2014/05/09 HTML / CSS
学生自我评价范文
2014/02/02 职场文书
司机检讨书
2014/02/13 职场文书
党员违纪检讨书
2014/02/18 职场文书
国际贸易系求职信
2014/08/09 职场文书
公民授权委托书
2014/10/15 职场文书
vue自定义右键菜单之全局实现
2022/04/09 Vue.js