欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript 復(fù)制對象與Object.assign方法無法實現(xiàn)深復(fù)制

 更新時間:2018年11月02日 11:35:42   作者:最騷的就是你  
這篇文章主要介紹了JavaScript 復(fù)制對象與Object.assign方法無法實現(xiàn)深復(fù)制,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

在JavaScript這門語言中,數(shù)據(jù)類型分為兩大類:基本數(shù)據(jù)類型和復(fù)雜數(shù)據(jù)類型?;緮?shù)據(jù)類型包括Number、Boolean、String、Null、String、Symbol(ES6 新增),而復(fù)雜數(shù)據(jù)類型包括Object,而所有其他引用類型(Array、Date、RegExp、Function、基本包裝類型(Boolean、String、Number)、Math等)都是Object類型的實例對象,因此都可以繼承Object原型對象的一些屬性和方法。

而對于基本數(shù)據(jù)類型來說,復(fù)制一個變量值,本質(zhì)上就是copy了這個變量。一個變量值的修改,不會影響到另外一個變量。看一個簡單的例子。

let val = 123;
let copy = val;
console.log(copy); //123
val = 456;     //修改val的值對copy的值不產(chǎn)生影響
console.log(copy); //123

而對于復(fù)雜數(shù)據(jù)類型來說,同基本數(shù)據(jù)類型實現(xiàn)的不太相同。對于復(fù)雜數(shù)據(jù)類型的復(fù)制,要注意的是,變量名只是指向這個對象的指針。當(dāng)我們將保存對象的一個變量賦值給另一個變量時,實際上復(fù)制的是這個指針,而兩個變量都指向都一個對象。因此,一個對象的修改,會影響到另外一個對象。

// obj只是指向?qū)ο蟮闹羔?
let obj = {
  character: 'peaceful'
};
//copy變量復(fù)制了這個指針,指向同一個對象
let copy = obj;
console.log(copy);     //{character: 'peaceful'}
obj.character = 'lovely';
console.log(copy);     //{character: 'lovely'} 

有一副很形象的圖描述了復(fù)雜數(shù)據(jù)類型復(fù)制的原理

同理,在復(fù)制一個數(shù)組時,變量名只是指向這個數(shù)組對象的指針;在復(fù)制一個函數(shù)時,函數(shù)名只是指向這個函數(shù)對象的指針

let arr = [1, 2, 3];
let copy = arr;
console.log(copy); // [1, 2, 3]
arr[0] = 'keith';
console.log(copy); // 數(shù)組對象被改變: ['keith', 2, 3]
arr = null;
console.log(copy); // ['keith', 2, 3] 即使arr=null,也不會影響copy。因此此時的arr變量只是一個指向數(shù)組對象的指針

function foo () {
  return 'hello world';
};
let bar = foo;
console.log(foo());
foo = null;   //foo只是指向函數(shù)對象的指針
console.log(bar());

因此,我們應(yīng)該如何實現(xiàn)對象的深淺復(fù)制?

復(fù)制對象

在JavaScript中,復(fù)制對象分為兩種方式,淺復(fù)制和深復(fù)制。

淺復(fù)制沒有辦法去真正的去復(fù)制一個對象,而只是保存了對該對象的引用;而深復(fù)制可以實現(xiàn)真正的復(fù)制一個對象。

淺復(fù)制

在ES6中,Object對象新增了一個assign方法,可以實現(xiàn)對象的淺復(fù)制。這里談?wù)凮bject.assign方法的具體用法,因為稍后會分析jQuery的extend方法,實現(xiàn)的原理同Object.assign方法差不多

Object.assign的第一個參數(shù)是目標對象,可以跟一或多個源對象作為參數(shù),將源對象的所有可枚舉([[emuerable]] === true)復(fù)制到目標對象。這種復(fù)制屬于淺復(fù)制,復(fù)制對象時只是包含對該對象的引用。Object.assign(target, [source1, source2, ...])

  • 如果目標對象與源對象有同名屬性,則后面的屬性會覆蓋前面的屬性
  • 如果只有一個參數(shù),則直接返回該參數(shù)。即Object.assign(obj) === obj
  • 如果第一個參數(shù)不是對象,而是基本數(shù)據(jù)類型(Null、Undefined除外),則會調(diào)用對應(yīng)的基本包裝類型
  • 如果第一個參數(shù)是Null和Undefined,則會報錯;如果Null和Undefined不是位于第一個參數(shù),則會略過該參數(shù)的復(fù)制

要實現(xiàn)對象的淺復(fù)制,可以使用Object.assign方法

let target = {a: 123};
let source1 = {b: 456};
let source2 = {c: 789};
let obj = Object.assign(target, source1, source2);
console.log(obj);

不過對于深復(fù)制來說,Object.assign方法無法實現(xiàn)

let target = {a: 123};
let source1 = {b: 456};
let source2 = {c: 789, d: {e: 'lovely'}};
let obj = Object.assign(target, source1, source2);
source2.d.e = 'peaceful';
console.log(obj);  // {a: 123, b: 456, c: 789, d: {e: 'peaceful'}}

從上面代碼中可以看出,source2對象中e屬性的改變,仍然會影響到obj對象

深復(fù)制

在實際的開發(fā)項目中,前后端進行數(shù)據(jù)傳輸,主要是通過JSON實現(xiàn)的。JSON全稱:JavaScript Object Notation,JavaScript對象表示法。

JSON對象下有兩個方法,一是將JS對象轉(zhuǎn)換成字符串對象的JSON.stringify方法;一個是將字符串對象轉(zhuǎn)換成JS對象的JSON.parse方法。

這兩個方法結(jié)合使用可以實現(xiàn)對象的深復(fù)制。也就是說,當(dāng)我們需要復(fù)制一個obj對象時,可以先調(diào)用JSON.stringify(obj),將其轉(zhuǎn)換為字符串對象,然后再調(diào)用JSON.parse方法,將其轉(zhuǎn)換為JS對象。就可以輕松的實現(xiàn)對象的深復(fù)制

let obj = {
  a: 123,
  b: {
    c: 456,
    d: {
      e: 789
    }
  }
};
let copy = JSON.parse(JSON.stringify(obj));
// 對obj對象無論怎么修改,都不會影響到copy對象
obj.b.c = 'hello';
obj.b.d.e = 'world';
console.log(copy); // {a: 123, b: {c: 456, d: {e: 789}}}

當(dāng)然,使用這種方式實現(xiàn)深復(fù)制有一個缺點就是必須給JSON.parse方法傳入的字符串必須是合法的JSON,否則會拋出錯誤

jQuery.extend || jQuery.fn.extend

jQuery.extend對象,對使用jQuery超過一定時間的朋友來說并不默認。這個$.extend方法可以用來擴展jQuery的全局對象,而$.fn.extend方法可以用來擴展實例對象。fn實際上是prototype對象的別名,所以,擴展實例對象的方法實際上就是在jQuery原型對象上添加一些方法。

$.extend方法不僅可以用來寫jQuery插件,同樣的,它可以用來實現(xiàn)對象的深淺復(fù)制。(使用$.extend與$.fn.extend實現(xiàn)深淺復(fù)制都可以,唯一的差別就是this的指向性不同)

在具體分析源代碼之前,我在源碼中看到的$.extend方法的一些特點

  • 當(dāng)不接受任何參數(shù)時,直接返回一個空對象
  • 當(dāng)只有一個參數(shù)時(這個參數(shù)可以任何數(shù)據(jù)類型(Null、Undefined、Boolean、String、Number、Object)),會返回this對象,這里會分為兩種情況。如果用$.extend,會返回jQuery對象;如果用$.fn.extend,會返回jQuery的原型對象。
  • 當(dāng)接收兩個參數(shù)時,并且第一個參數(shù)是Boolean值時,也會返回一個空對象。如果第一個參數(shù)不是Boolean值,那么會將源對象復(fù)制到目標對象
  • 當(dāng)接收三個參數(shù)以上時,可以分為兩種情況。如果第一個參數(shù)是Boolean值表示深淺復(fù)制,那么目標對象會移動到第二個參數(shù),源對象會移動到第三個參數(shù)。(目標對象、源對象和Object.assign方法中的相同)。如果第一個參數(shù)不是Boolean值,那么用法與Object.assign方法常規(guī)的復(fù)制相同。
  • 在循環(huán)源對象的過程中,任何數(shù)據(jù)類型為Null、Undefined或者源對象是一個空對象時,在復(fù)制的過程中都會被忽略。
  • 如果源對象和目標對象具有同名的屬性,則源對象的屬性會覆蓋掉目標對象中的屬性。如果同名屬性是一個對象的話,則會在deep=true等其他條件下向目標對象的該同名對象添加屬性

下面貼出jQuery-2.1.4中jQuery.extend實現(xiàn)方式的源代碼

jQuery.extend = jQuery.fn.extend = function() {
  var options, name, src, copy, copyIsArray, clone,
    target = arguments[0] || {},
    // 使用||運算符,排除隱式強制類型轉(zhuǎn)換為false的數(shù)據(jù)類型
    // 如'', 0, undefined, null, false等
    // 如果target為以上的值,則設(shè)置target = {}
    i = 1,
    length = arguments.length,
    deep = false;

  // 當(dāng)typeof target === 'boolean'時
  // 則將deep設(shè)置為target的值
  // 然后將target移動到第二個參數(shù),
  if (typeof target === "boolean") {
    deep = target;
    // 使用||運算符,排除隱式強制類型轉(zhuǎn)換為false的數(shù)據(jù)類型
    // 如'', 0, undefined, null, false等
    // 如果target為以上的值,則設(shè)置target = {}
    target = arguments[i] || {};
    i++;
  }

  // 如果target不是一個對象或數(shù)組或函數(shù),
  // 則設(shè)置target = {}
  // 這里與Object.assign的處理方法不同,
  // assign方法會將Boolean、String、Number方法轉(zhuǎn)換為對應(yīng)的基本包裝類型
  // 然后再返回,
  // 而extend方法直接將typeof不為object或function的數(shù)據(jù)類型
  // 全部轉(zhuǎn)換為一個空對象
  if (typeof target !== "object" && !jQuery.isFunction(target)) {
    target = {};
  }

  // 如果arguments.length === 1 或
  // typeof arguments[0] === 'boolean', 且存在arguments[1],
  // 這時候目標對象會指向this
  // this的指向哪個對象需要看是使用$.fn.extend還是$.extend
  if (i === length) {
    target = this;
    // i-- 表示不進入for循環(huán)
    i--;
  }

  // 循環(huán)arguments類數(shù)組對象,從源對象開始
  for (; i < length; i++) {
    // 針對下面if判斷
    // 有一點需要注意的是
    // 這里有一個隱式強制類型轉(zhuǎn)換 undefined == null 為 true
    // 而undefined === null 為 false
    // 所以如果源對象中數(shù)據(jù)類型為Undefined或Null
    // 那么就會跳過本次循環(huán),接著循環(huán)下一個源對象
    if ((options = arguments[i]) != null) {
      // 遍歷所有[[emuerable]] === true的源對象
      // 包括Object, Array, String
      // 如果遇到源對象的數(shù)據(jù)類型為Boolean, Number
      // for in循環(huán)會被跳過,不執(zhí)行for in循環(huán)
      for (name in options) {
        // src用于判斷target對象是否存在name屬性
        src = target[name];

        // 需要復(fù)制的屬性
        // 當(dāng)前源對象的name屬性
        copy = options[name];

        // 這種情況暫時未遇到..
        // 按照我的理解,
        // 即使copy是同target是一樣的對象
        // 兩個對象也不可能相等的..
        if (target === copy) {
          continue;
        }

        // if判斷主要用途:
        // 如果是深復(fù)制且copy是一個對象或數(shù)組
        // 則需要遞歸jQuery.extend(),
        // 直到copy成為一個基本數(shù)據(jù)類型為止
        if (deep && copy && (jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)))) {
          // 深復(fù)制
          if (copyIsArray) {
            // 如果是copy是一個數(shù)組
            // 將copyIsArray重置為默認值
            copyIsArray = false;
            // 如果目標對象存在name屬性且是一個數(shù)組
            // 則使用目標對象的name屬性,否則重新創(chuàng)建一個數(shù)組,用于復(fù)制
            clone = src && jQuery.isArray(src) ? src : [];

          } else {
            // 如果目標對象存在name屬性且是一個對象
            // 則使用目標對象的name屬性,否則重新創(chuàng)建一個對象,用于復(fù)制
            clone = src && jQuery.isPlainObject(src) ? src : {};
          }

          // 因為深復(fù)制,所以遞歸調(diào)用jQuery.extend方法
          // 返回值為target對象,即clone對象
          // copy是一個源對象
          target[name] = jQuery.extend(deep, clone, copy);

        } else if (copy !== undefined) {
          // 淺復(fù)制
          // 如果copy不是一個對象或數(shù)組
          // 那么執(zhí)行elseif分支
          // 在elseif判斷中如果copy是一個對象或數(shù)組,
          // 但是都為空的話,排除這種情況
          // 因為獲取空對象的屬性會返回undefined
          target[name] = copy;
        }
      }
    }
  }

  // 當(dāng)源對象全部循環(huán)完畢之后,返回目標對象
  return target;
};   

因此,可以針對分析過后的源碼,給出一些例子

let obj1 = $.extend();
console.log(obj1); // 返回一個空對象 {}

let obj2 = $.extend(undefined);
console.log(obj2); //返回jQuery對象,Object.assign傳入undefined會報錯

let obj3 = $.extend('123');
console.log(obj3); // 返回jQuery對象,Object.assign傳入'123'會返回字符串的String對象

let target = {
  a: 123,
  b: 234
};

let source1 = {
  b: 456,
  d: ['keith', 'peaceful', 'lovely']
};

let source2 = {c: 789};
let source3 = {};

let obj4 = $.extend(target, source1, source2);
// let obj4 = $.extend(false, target, source1, source2);
console.log(obj4); // {a: 123, b: 456, d: Array(3), c: 789}
// 默認情況下,復(fù)制方式都是淺復(fù)制
// 如果只需要淺復(fù)制,不傳入deep參數(shù)也可以
// 淺復(fù)制時,obj4對象中的d屬性只是指向數(shù)組對象的指針

let obj5 = $.extend(target, undefined, source2);
let obj6 = $.extend(target, source3, source2);
console.log(obj5, obj6);
// {a: 123, b: 234, c: 789}, {a: 123, b: 234, c: 789}
// 會略過空對象或Undefined、Null值

let obj7 = $.extend(true, target, source1, source2);
console.log(obj7); // {a: 123, b: 456, d: Array(3), c: 789}
// 這里target對象有b屬性,源對象source1也有b屬性
// 此時源對象的b屬性會覆蓋目標對象的b屬性
// 這里deep=true,屬于深復(fù)制
// 當(dāng)name=d時,會遞歸調(diào)用$.extend, 直到它的屬性對應(yīng)的屬性值全部為基本數(shù)據(jù)類型
// 源對象的改變不會影響到obj7對象

JavaScript 復(fù)制對象

因此,可以根據(jù)$.extend方法,寫出一個通用的實現(xiàn)對象深淺復(fù)制的函數(shù),copyObject函數(shù)唯一的不同就是當(dāng)i === arguments.length屬性時,copyObject函數(shù)直接返回了target對象

function copyObject () {
  let i = 1,
    target = arguments[0] || {},
    deep = false,
    length = arguments.length,
    name, options, src, copy,
    copyIsArray, clone;

  // 如果第一個參數(shù)的數(shù)據(jù)類型是Boolean類型
  // target往后取第二個參數(shù)
  if (typeof target === 'boolean') {
    deep = target;
    // 使用||運算符,排除隱式強制類型轉(zhuǎn)換為false的數(shù)據(jù)類型
    // 如'', 0, undefined, null, false等
    // 如果target為以上的值,則設(shè)置target = {}
    target = arguments[1] || {};
    i++;
  }

  // 如果target不是一個對象或數(shù)組或函數(shù)
  if (typeof target !== 'object' && !(typeof target === 'function')) {
    target = {};
  }

  // 如果arguments.length === 1 或
  // typeof arguments[0] === 'boolean',
  // 且存在arguments[1],則直接返回target對象
  if (i === length) {
    return target;
  }

  // 循環(huán)每個源對象
  for (; i < length; i++) {
    // 如果傳入的源對象是null或undefined
    // 則循環(huán)下一個源對象
    if (typeof (options = arguments[i]) != null) {
      // 遍歷所有[[emuerable]] === true的源對象
      // 包括Object, Array, String
      // 如果遇到源對象的數(shù)據(jù)類型為Boolean, Number
      // for in循環(huán)會被跳過,不執(zhí)行for in循環(huán)
      for (name in options) {
        // src用于判斷target對象是否存在name屬性
        src = target[name];
        // copy用于復(fù)制
        copy = options[name];
        // 判斷copy是否是數(shù)組
        copyIsArray = Array.isArray(copy);
        if (deep && copy && (typeof copy === 'object' || copyIsArray)) {
          if (copyIsArray) {
            copyIsArray = false;
            // 如果目標對象存在name屬性且是一個數(shù)組
            // 則使用目標對象的name屬性,否則重新創(chuàng)建一個數(shù)組,用于復(fù)制
            clone = src && Array.isArray(src) ? src : [];
          } else {
            // 如果目標對象存在name屬性且是一個對象
            // 則使用目標對象的name屬性,否則重新創(chuàng)建一個對象,用于復(fù)制
            clone = src && typeof src === 'object' ? src : {};
          }
          // 深復(fù)制,所以遞歸調(diào)用copyObject函數(shù)
          // 返回值為target對象,即clone對象
          // copy是一個源對象
          target[name] = copyObject(deep, clone, copy);
        } else if (copy !== undefined){
          // 淺復(fù)制,直接復(fù)制到target對象上
          target[name] = copy;
        }
      }
    }
  }
  // 返回目標對象
  return target;   
}

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評論