基于对象合并功能的实现示例


Posted in Javascript onOctober 10, 2017

前言

jQuery 中的 $.extend() 是经常使用到工具函数,多用于合并参数(对象),具体用法在这里不过多赘述,可通过传参控制合并过程中是否使用深度拷贝;而ES2015中新增的 Object.assign()方法,也可以实现对象的合并,不过合并过程中使用的是浅拷贝;本文参考了jQuery的extend方法的源码,将自己实现对象合并,即将多个对象的属性复制到目标对象上,若有相同的属性,后面的对象覆盖前面的。

浅拷贝的方式实现对象合并

之前的一篇博文 有专门介绍对象和数组的深浅拷贝,不了解的童鞋请移步。先看实现再解释

function extend() { //extend 浅拷贝实现
  var name,options,copy,
   length = arguments.length,
   i = 1,
   target = arguments[0] || {}; //取目标对象
  
 if(['object','function'].indexOf(typeof target) < 0){
  target = {};
  }
 

  for(;i<length;i++){

  options = arguments[i]

  if(options != null){ //排除空参数的情况 extend({},,)

   for(name in options){ //遍历对象 赋值

   copy = options[name];

   if (copy !== undefined) {
    target[name] = copy;
   }
   }
  }
  }

  return target 
 }

 //测试数据 
 var test1 = {
  a : 1,
  b : {
  c : 2,
  d : 3
  },
  e : [1,'a']
 },
 test2 = {
  b : {
  c : 4,
  d : 5,
  f : 6
  },
  e : [1,'a'],
  g : 7
 }

 var test = extend({},test1,test2);
 console.log(test.b.d); //5

 test2.b.d = 'x'; //修改test2
 console.log(test.b.d); // 'x' test随之修改

思路如下:

1、默认取第一个参数为目标对象,若第一个参数非对象数据类型,则赋值为空对象

2、遍历剩下的参数(源对象),将源对象的属性复制到目标对象上 。

3、返回目标对象为合并的结果

在第二步中没有对源对象的属性值进行判断,所有的全部使用 ‘=' 赋值,所以当源对象的属性值为对象属性时,复制的只是引用值,即为浅拷贝的方式,在测试结果中可以看出 test 和 test2 的 b 属性的属性值,使用的是同一个对象,会互相影响。知道了这些之后,如何实现合并时的深拷贝也应该有思路了。

深度拷贝的方式实现对象合并

需要在复制源对象属性值时,判断值的类型,如果是对象数据类型,则递归调用extend函数。则可以实习深拷贝方式的对象合并,实现如下:

function extend() { //extend 深拷贝实现
  var name,options,src,copy,
   deep = false, //是否深拷贝 默认为false
   length = arguments.length,
   i = 1,
   target = arguments[0] || {};

  //如果第一个参数为boolean类型,赋值给deep
  if(typeof target == 'boolean'){
  deep = arguments[0];
  target = arguments[i] || {}; //目标对象顺延
  i++;
  }

  //如果target不是对象数据类型的话 target赋值为 {}
  if(['object','function'].indexOf(typeof target) < 0){
  target = {};
  }

  for(;i<length;i++){

  options = arguments[i];

  if(options != null){

   for(name in options){

   copy = options[name];
   src = target[name];

   if(target === copy){ //避免重复循环
    continue;
   }

   if(deep && copy && (typeof copy == 'object')){ // 类型判断

    src = Object.prototype.toString.call(copy) == '[object Array]' ? [] : {}; //区分数组和‘对象'
    target[name] = extend(deep,src,copy);
   }else {

    if (copy !== undefined) {

    target[name] = copy;
    }
   }
   }
  }
  }

  return target
 }

1、参数判断,若第一个参数为布尔类型,则取为控制是否深度拷贝的参数deep , deep 默认为false;同时 目标元素会是第二个参数

2、复制属性值时,要判断deep参数和 属性值的类型 ; 若 deep为true 且 属性值为对象类型 则递归调用 extend函数 , 否则直接赋值

3、需要区分 数组 和 ‘对象' ,来给 目标对象的属性赋值不同的初始值。如果都是 {} 的话,数组类型的属性值复制到目标元素上会变为 {'0':xx , '1' : xx ...}

结语

一直都是在直接使用 $.extend(),好用但是不是很清楚其中的实现,自己撸一撸,也许实现上还有不严谨的地方,但是觉得收获还是不错的。

以上这篇基于对象合并功能的实现示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个JS翻页效果
Jul 23 Javascript
Jquery 1.42 checkbox 全选和反选代码
Mar 27 Javascript
DWR实现模拟Google搜索效果实现原理及代码
Jan 30 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
Jul 07 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
Nov 04 Javascript
本地存储localStorage用法详解
Jul 31 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
Apr 04 Javascript
如何在Node和浏览器控制台中打印彩色文字
Jan 09 Javascript
js实现简单的秒表
Jan 16 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
Jun 01 Javascript
Vue使用Three.js加载glTF模型的方法详解
Jun 14 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
Sep 04 Javascript
聊聊Vue.js的template编译的问题
Oct 09 #Javascript
Vue组件之全局组件与局部组件的使用详解
Oct 09 #Javascript
Angular2监听页面大小变化的解决方法
Oct 09 #Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
Oct 09 #Javascript
input 标签实现输入框带提示文字效果(两种方法)
Oct 09 #Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
Oct 09 #Javascript
JS中Attr的用法详解
Oct 09 #Javascript
You might like
php4的彩蛋
2006/10/09 PHP
php调用C代码的实现方法
2014/03/11 PHP
PHP和Shell实现检查SAMBA与NFS Server是否存在
2015/01/07 PHP
PHP实现动态柱状图改进版
2015/03/30 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
jQuery 开天辟地入门篇一
2009/12/09 Javascript
使用JavaScript switch case 另类写法
2010/03/14 Javascript
js带按钮的提示框可供选择示例代码
2013/09/17 Javascript
js事件监听器用法实例详解
2015/06/01 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
vue 组件中添加样式不生效的解决方法
2018/07/06 Javascript
jQuery中DOM操作原则实例分析
2019/08/01 jQuery
JS中async/await实现异步调用的方法
2019/08/28 Javascript
vue设置全局访问接口API地址操作
2020/08/14 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
2020/09/21 Javascript
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
python logging重复记录日志问题的解决方法
2018/07/12 Python
详解python 注释、变量、类型
2018/08/10 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
Finishline官网:美国一家领先的运动品牌鞋类、服装零售商
2016/07/20 全球购物
Delphi工程师笔试题
2013/09/21 面试题
公司委托书格式范文
2014/04/04 职场文书
汉语专业毕业生自荐信
2014/07/06 职场文书
爱情保证书
2015/01/17 职场文书
自主招生自荐信格式范文
2015/03/25 职场文书
工程项目合作意向书
2015/05/08 职场文书
教师节领导致辞
2015/07/29 职场文书
初中生物教学反思
2016/02/20 职场文书
简历中的自我评价怎么写呢?
2019/04/30 职场文书
MySQL索引失效场景及解决方案
2022/07/23 MySQL
python manim实现排序算法动画示例
2022/08/14 Python