五. JavaScript实现对象合并功能

Posted 2020-11-01 hy-space

jQuery 中的 $.extend() 是经常使用到工具函数，多用于合并参数（对象）

extend(bool,{},item1,item2….)

bool型参数为true表示深拷贝，为false时表示浅拷贝。{}表示合并结果放入其中，具体可以通过一下示例来说明：

示例：

var item={name：“olive”,age:23,address{provice:”河南”,city:”郑州”}};

var item1={sex:”girl”,address{city:”北京”}};

var result=$.extend(true,item,item1);

var result1=$.extend(false,item,item1);

结果：

Result={name：“olive”,age:23,sex:”gril”,address:{provice:”河南”,city:”北京”}};

Result1={name：“olive”,age:23,sex:”gril”,address:{ city:”北京”}};

说明：

以上结果说明，当参数为ture时，即为深拷贝，当子项item1中的子项有与item中的子项相同属性的值不一样时，item1中子项的值会将item子项中的值给覆盖，当子项item1的属性跟item中的属性不同时，会与item进行合并。

当参数为false时，子项item1中的子项中与item中的子项属性相同时，item1中子项的属性值会将item中的值给完全覆盖。

 

本文参考了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 ...}