這篇文章給大家分享的是有關如何使用JS基于對象實現(xiàn)合并功能的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)是專業(yè)的慶安網站建設公司，慶安接單;提供成都做網站、網站設計、外貿營銷網站建設,網頁設計,網站設計,建網站,PHP網站建設等專業(yè)做網站服務;采用PHP框架,可快速的進行慶安網站開發(fā)網頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網站,專業(yè)的做網站團隊,希望更多企業(yè)前來合作!

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

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

function extend() { //extend 淺拷貝實現(xiàn)
  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){ //排除空參數(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、默認取第一個參數(shù)為目標對象，若第一個參數(shù)非對象數(shù)據(jù)類型，則賦值為空對象

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

3、返回目標對象為合并的結果

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

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

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

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

  //如果第一個參數(shù)為boolean類型,賦值給deep
  if(typeof target == 'boolean'){
  deep = arguments[0];
  target = arguments[i] || {}; //目標對象順延
  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){ //避免重復循環(huán)
    continue;
   }

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

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

    if (copy !== undefined) {

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

  return target
 }

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

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

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

感謝各位的閱讀！關于“如何使用JS基于對象實現(xiàn)合并功能”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

分享題目：如何使用JS基于對象實現(xiàn)合并功能-創(chuàng)新互聯(lián)
鏈接分享：http://chinadenli.net/article26/hhhjg.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站收錄、App設計、網站制作、關鍵詞優(yōu)化、網站設計公司、自適應網站

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)