快捷導(dǎo)航

基于對象合并功能的實(shí)現(xiàn)示例

更新時(shí)間：2017年10月10日 08:24:21 作者：Shapeying

下面小編就為大家?guī)硪黄趯ο蠛喜⒐δ艿膶?shí)現(xiàn)示例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

前言

jQuery 中的 $.extend() 是經(jīng)常使用到工具函數(shù)，多用于合并參數(shù)（對象），具體用法在這里不過多贅述，可通過傳參控制合并過程中是否使用深度拷貝；而ES2015中新增的 Object.assign()方法，也可以實(shí)現(xiàn)對象的合并，不過合并過程中使用的是淺拷貝；本文參考了jQuery的extend方法的源碼，將自己實(shí)現(xiàn)對象合并，即將多個(gè)對象的屬性復(fù)制到目標(biāo)對象上，若有相同的屬性，后面的對象覆蓋前面的。

淺拷貝的方式實(shí)現(xiàn)對象合并

之前的一篇博文有專門介紹對象和數(shù)組的深淺拷貝，不了解的童鞋請移步。先看實(shí)現(xiàn)再解釋

function extend() { //extend 淺拷貝實(shí)現(xiàn)
  var name,options,copy,
   length = arguments.length,
   i = 1,
   target = arguments[0] || {}; //取目標(biāo)對象
  
 if(['object','function'].indexOf(typeof target) < 0){
  target = {};
  }
 

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

  options = arguments[i]

  if(options != null){ //排除空參數(shù)的情況 extend({},,)

   for(name in options){ //遍歷對象 賦值

   copy = options[name];

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

  return target 
 }

 //測試數(shù)據(jù) 
 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、默認(rèn)取第一個(gè)參數(shù)為目標(biāo)對象，若第一個(gè)參數(shù)非對象數(shù)據(jù)類型，則賦值為空對象

2、遍歷剩下的參數(shù)（源對象），將源對象的屬性復(fù)制到目標(biāo)對象上。

3、返回目標(biāo)對象為合并的結(jié)果

在第二步中沒有對源對象的屬性值進(jìn)行判斷，所有的全部使用 ‘=' 賦值，所以當(dāng)源對象的屬性值為對象屬性時(shí)，復(fù)制的只是引用值，即為淺拷貝的方式，在測試結(jié)果中可以看出 test 和 test2 的 b 屬性的屬性值，使用的是同一個(gè)對象，會互相影響。知道了這些之后，如何實(shí)現(xiàn)合并時(shí)的深拷貝也應(yīng)該有思路了。

深度拷貝的方式實(shí)現(xiàn)對象合并

需要在復(fù)制源對象屬性值時(shí)，判斷值的類型，如果是對象數(shù)據(jù)類型，則遞歸調(diào)用extend函數(shù)。則可以實(shí)習(xí)深拷貝方式的對象合并，實(shí)現(xiàn)如下：

function extend() { //extend 深拷貝實(shí)現(xiàn)
  var name,options,src,copy,
   deep = false, //是否深拷貝 默認(rèn)為false
   length = arguments.length,
   i = 1,
   target = arguments[0] || {};

  //如果第一個(gè)參數(shù)為boolean類型,賦值給deep
  if(typeof target == 'boolean'){
  deep = arguments[0];
  target = arguments[i] || {}; //目標(biāo)對象順延
  i++;
  }

  //如果target不是對象數(shù)據(jù)類型的話 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){ //避免重復(fù)循環(huán)
    continue;
   }

   if(deep && copy && (typeof copy == 'object')){ // 類型判斷

    src = Object.prototype.toString.call(copy) == '[object Array]' ? [] : {}; //區(qū)分?jǐn)?shù)組和‘對象'
    target[name] = extend(deep,src,copy);
   }else {

    if (copy !== undefined) {

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

  return target
 }

1、參數(shù)判斷，若第一個(gè)參數(shù)為布爾類型，則取為控制是否深度拷貝的參數(shù)deep , deep 默認(rèn)為false；同時(shí) 目標(biāo)元素會是第二個(gè)參數(shù)

2、復(fù)制屬性值時(shí)，要判斷deep參數(shù)和屬性值的類型；若 deep為true 且屬性值為對象類型則遞歸調(diào)用 extend函數(shù) ，否則直接賦值

3、需要區(qū)分數(shù)組和 ‘對象' ，來給目標(biāo)對象的屬性賦值不同的初始值。如果都是 {} 的話，數(shù)組類型的屬性值復(fù)制到目標(biāo)元素上會變?yōu)?{'0':xx , '1' : xx ...}

結(jié)語

一直都是在直接使用 $.extend()，好用但是不是很清楚其中的實(shí)現(xiàn)，自己擼一擼，也許實(shí)現(xiàn)上還有不嚴(yán)謹(jǐn)?shù)牡胤?，但是覺得收獲還是不錯(cuò)的。

以上這篇基于對象合并功能的實(shí)現(xiàn)示例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: