ES6 物件的擴充套件2

2021-07-22 16:36:37 字數 2866 閱讀 3584

object.assign方法實行的是淺拷貝,而不是深拷貝。也就是說,如果源物件某個屬性的值是物件,那麼目標物件拷貝得到的是這個物件的引用。

var obj1 =};

var obj2 = object.

assign(

, obj1)

;obj1.a.b =2;

obj2.a.b// 2

上面**中,源物件obj1a屬性的值是乙個物件,object.assign拷貝得到的是這個物件的引用。這個物件的任何變化,都會反映到目標物件上面。

對於這種巢狀的物件,一旦遇到同名屬性,object.assign的處理方法是替換,而不是新增。

var target =

}var source =

}object.

assign(

target, source)

// }

上面**中,target物件的a屬性被source物件的a屬性整個替換掉了,而不會得到}的結果。這通常不是開發者想要的,需要特別小心。

有一些函式庫提供object.assign的定製版本(比如lodash的_.defaultsdeep方法),可以解決淺拷貝的問題,得到深拷貝的合併。

注意,object.assign可以用來處理陣列,但是會把陣列視為物件。

object.

assign([1

,2,3

],[4

,5])

// [4, 5, 3]

上面**中,object.assign把陣列視為屬性名為0、1、2的物件,因此目標陣列的0號屬性4覆蓋了原陣列的0號屬性1

object.assign方法有很多用處。

(1)為物件新增屬性

class point);

}}

上面方法通過object.assign方法,將x屬性和y屬性新增到point類的物件例項。

(2)為物件新增方法

object.

assign(

someclass.prototype,

,anothermethod()}

);// 等同於下面的寫法

someclass.prototype.somemethod =

function

(arg1, arg2)

;someclass.prototype.anothermethod =

function()

;

上面**使用了物件屬性的簡潔表示法,直接將兩個函式放在大括號中,再使用assign方法新增到someclass.prototype之中。

(3)轉殖物件

function

clone(

origin)

, origin)

;}

上面**將原始物件拷貝到乙個空物件,就得到了原始物件的轉殖。

不過,採用這種方法轉殖,只能轉殖原始物件自身的值,不能轉殖它繼承的值。如果想要保持繼承鏈,可以採用下面的**。

function

clone(

origin)

(4)合併多個物件

將多個物件合併到某個物件。

const merge =

(target,..

.sources)

=> object.

assign(

target,..

.sources)

;

如果希望合併後返回乙個新物件,可以改寫上面函式,對乙個空物件合併。

const merge =(.

..sources)

=> object.

assign(,.

..sources)

;

(5)為屬性指定預設值

const defaults =

;function

processcontent(

options)

, defaults, options)

;}

上面**中,defaults物件是預設值,options物件是使用者提供的引數。object.assign方法將defaultsoptions合併成乙個新物件,如果兩者有同名屬性,則option的屬性值會覆蓋defaults的屬性值。

注意,由於存在深拷貝的問題,defaults物件和options物件的所有屬性的值,都只能是簡單型別,而不能指向另乙個物件。否則,將導致defaults物件的該屬性不起作用。

ES6 物件擴充套件

es6 允許直接寫入變數和函式,作為物件的屬性和方法 var key1 1 var bj var bz 方法的簡寫 var ob fn2 表示式還可以用於定義方法名。var lastword last word var a a first word hello a lastword world a ...

ES6物件擴充套件

es6允許直接寫入變數和函式,作為屬性名和方法 var a b var c c 如果屬性值與屬性名一樣,我們值寫屬性名就可以 方法簡寫 add add function 定義物件屬性有兩種方法 obj.name lijixuan 2obj name lijixuan 我們原本只能用識別符號定義屬性,...

ES6 物件擴充套件

物件擴充套件主要從四個方面開展 1.簡潔表示法 2.屬性表示式 3.擴充套件運算子 4.object新增方法 let es6 console.log es5,es6 object object 在es5中,我們去定義物件,多使用鍵值對的方式來定義,在es6中,我們直接使用變數名稱來定義就可以了。是不...