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

 更新时间:2017年10月10日 08:24:21   作者:Shapeying   我要评论

下面小编就为大家带来一篇基于对象合并功能的实现示例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

前言

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(),好用但是不是很清楚其中的实现,自己撸一撸,也许实现上还有不严谨的地方,但是觉得收获还是不错的。

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

相关文章

  • document.execCommand()的用法小结

    document.execCommand()的用法小结

    本篇文章主要是对document.execCommand()的用法进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • Bootstrap文件上传组件之bootstrap fileinput

    Bootstrap文件上传组件之bootstrap fileinput

    这篇文章主要介绍了Bootstrap文件上传组件之bootstrap fileinput,重点是把界面做得更加友好,更好的增加用户体验。还有还多注意细节大家可以通过本文详细了解下
    2016-11-11
  • js 弹出菜单/窗口效果

    js 弹出菜单/窗口效果

    想象一下,你把一个重要内容放在一个弹出窗口,又不聚集到这个窗口。让使用屏幕阅读器的同学情何以堪,只有当他们 tab 到这页面结束,还继续 tab,才可能找到这个弹窗
    2011-10-10
  • 基于JavaScript实现类名的添加与移除

    基于JavaScript实现类名的添加与移除

    本文给大家分享javascript实现类名的添加与移除功能,需要的朋友参考下吧
    2017-04-04
  • 深入浅析JavaScript中数据共享和数据传递

    深入浅析JavaScript中数据共享和数据传递

    这篇文章主要介绍了深入浅析JavaScript中数据共享和数据传递的相关资料,需要的朋友可以参考下
    2016-04-04
  • JavaScript中跨域调用Flash的方法

    JavaScript中跨域调用Flash的方法

    这篇文章主要介绍了JavaScript中跨域调用Flash的方法,只需要在Flash中加一句话即可,需要的朋友可以参考下
    2014-08-08
  • JavaScript实现数据类型的相互转换

    JavaScript实现数据类型的相互转换

    这篇文章主要为大家详细介绍了JavaScript实现数据类型的相互转换,感兴趣的朋友可以参考一下
    2016-03-03
  • JS回调函数简单用法示例

    JS回调函数简单用法示例

    这篇文章主要介绍了JS回调函数简单用法,结合实例形式分析了js回调函数的定义与简单使用方法,具有一定参考借鉴价值,需要的朋友可以参考下
    2017-02-02
  • JavaScript 布尔操作符解析  && || !

    JavaScript 布尔操作符解析 && || !

    在一门编程语言中,布尔操作符的重要性堪比相等操作符。如果没有测试两个值关系的能力,那么诸如if...else和循环之类的语句就不会有用武之地了。布尔操作符一共有3个: 非、与、或
    2012-08-08
  • JavaScript中附件预览功能实现详解(推荐)

    JavaScript中附件预览功能实现详解(推荐)

    这篇文章主要介绍了JavaScript中附件预览功能的实现,具体操作步骤大家可查看下文详细讲解,感兴趣的小伙伴们可以参考一下。
    2017-08-08

最新评论