首頁  >  文章  >  web前端  >  關於物件合併功能的實現詳解

關於物件合併功能的實現詳解

小云云
小云云原創
2018-01-26 11:54:091126瀏覽

本文主要為大家帶來一篇基於物件合併功能的實作範例。小編覺得蠻不錯的,現在就分享給大家,也給大家做個參考。一起跟著小編過來看看吧,希望能幫助大家。

前言

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(),好用但是不是很清楚其中的實現,自己*,也許實現上還有不嚴謹的地方,但是覺得收穫還是不錯的。

相關推薦:

實作物件合併功能的方法

#

以上是關於物件合併功能的實現詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn