登录  /  注册
首页 > web前端 > js教程 > 正文

实现对象合并功能的方法

一个新手
发布: 2017-10-12 10:16:49
原创
2423人浏览过

前言

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

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

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


    function extend() {  //extend 浅拷贝实现
      var name,options,copy,
          length = arguments.length,
          i = 1,
          target = arguments[0] || {};  //取目标对象
      
    if([&#39;object&#39;,&#39;function&#39;].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,&#39;a&#39;]
    },
    test2 = {
      b : {
        c : 4,
        d : 5,
        f : 6
      },
      e : [1,&#39;a&#39;],
      g : 7
    }    var test = extend({},test1,test2);
    console.log(test.b.d);   //5
    test2.b.d = &#39;x&#39;;  //修改test2
    console.log(test.b.d);  // &#39;x&#39;   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  == &#39;boolean&#39;){
        deep = arguments[0];
        target = arguments[i] || {}; //目标对象顺延
        i++;
      }      //如果target不是对象数据类型的话  target赋值为 {}
      if([&#39;object&#39;,&#39;function&#39;].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 == &#39;object&#39;)){ // 类型判断
              src = Object.prototype.toString.call(copy) == &#39;[object Array]&#39; ? [] : {};  //区分数组和‘对象’
              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(),好用但是不是很清楚其中的实现,自己*,也许实现上还有不严谨的地方,但是觉得收获还是不错的。

以上就是实现对象合并功能的方法的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号