Object.assign()的用法

Object.assign方法用來將源對象(source)的所有可枚舉屬性俗批,復制到目標對象(target)孟抗。它至少需要兩個對象作為參數(shù)泳挥,第一個參數(shù)是目標對象,后面的參數(shù)都是源對象煮岁。

let targetObj1 = { a: 1 };

? ? ? ? let sourceObj1 = { b: 1 };

? ? ? ? let sourceObj11 = { c: 3 };

? ? ? ? Object.assign(targetObj1, sourceObj1, sourceObj11);

? ? ? ? console.log(targetObj1);

注:如果目標對象與源對象有同名屬性,或多個源對象有同名屬性,則后面的屬性會覆蓋前面的屬性画机。

let targetObj1 = { a: 1, b: 2 };

? ? ? ? let sourceObj1 = { b: 1 };

? ? ? ? let sourceObj11 = { c: 3 };

? ? ? ? Object.assign(targetObj1, sourceObj1, sourceObj11);

? ? ? ? console.log(targetObj1);

如果只有一個參數(shù)冶伞,Object.assign會直接返回該參數(shù)。

let targetObj1 = { a: 4 }

? ? ? ? Object.assign(targetObj1);

? ? ? ? console.log(targetObj1)

如果該參數(shù)不是對象色罚,則會先轉(zhuǎn)成對象碰缔,然后返回。

console.log(typeof (Object.assign(2)));

由于undefined和null無法轉(zhuǎn)成對象戳护,所以如果它們作為參數(shù)金抡,就會報錯。

console.log(typeof(Object.assign(null)));

console.log(typeof(Object.assign(underfind)));

注意:如果非對象參數(shù)出現(xiàn)在源對象的位置(即非首參數(shù))腌且,那么處理規(guī)則有所不同梗肝。首先,這些參數(shù)都會轉(zhuǎn)成對象铺董,如果無法轉(zhuǎn)成對象巫击,就會跳過。這意味著精续, 如果undefined和null不在首參數(shù)坝锰,就不會報錯。其他類型的值(即數(shù)值重付、字符串和布爾值)不在首參數(shù)顷级,也不會報錯。但是确垫,除了字符串會以數(shù)組形式弓颈,拷貝入目標對象,其他值都不會產(chǎn)生效果删掀。

Object.assign只拷貝自身屬性翔冀,不可枚舉的屬性(enumerable為false)和繼承的屬性不會被拷貝。

let obj1 = Object.assign({ dwb: 'zjl' },

Object.defineProperty({}, 'zmf', {

enumerable: false,

value: 'zmf'

})

)

console.log(obj1);

let obj2 = Object.assign({ dwb: 'zjl' },

Object.defineProperty({}, 'zmf', {

enumerable: true,

value: 'zmf'

})

)

console.log(obj2);

對于嵌套的對象披泪,Object.assign的處理方法是替換纤子,而不是添加。

var target = { a: { b: 'c', d: 'e' } }

var source = { a: { b: 'hello' } }

Object.assign(target, source);

上面代碼中款票,target對象的a屬性被source對象的a屬性整個替換掉了计福,而不會得到{ a: { b: 'hello', d: 'e' } }的結(jié)果。這通常不是開發(fā)者想要的徽职,需要特別小心象颖。有一些函數(shù)庫提供Object.assign的定制版本(比如Lodash的_.defaultsDeep方法),可以解決深拷貝的問題姆钉。

注意说订,Object.assign可以用來處理數(shù)組抄瓦,但是會把數(shù)組視為對象。

console.log(Object.assign([1, 2, 3], [4, 5]));

其中陶冷,4覆蓋1钙姊,5覆蓋2,因為它們在數(shù)組的同一位置埂伦,所以就對應位置覆蓋了煞额。

Object.assign方法實行的是淺拷貝,而不是深拷貝沾谜。也就是說膊毁,如果源對象某個屬性的值是對象,那么目標對象拷貝得到的是這個對象的引用基跑。

var object1 = { a: { b: 1 } };

var object2 = Object.assign({}, object1);

object1.a.b = 2;

console.log(object2.a.b);

2.用途

2.1為對象添加屬性

2.2為對象添加方法

2.3克隆對象

function copyFnc(origin) {

return Object.assign({}, origin)

}

var sur = { a: 1, b: 2 };

console.log(copyFnc(sur));

上面代碼將原始對象拷貝到一個空對象婚温,就得到了原始對象的克隆。

不過媳否,采用這種方法克隆栅螟,只能克隆原始對象自身的值,不能克隆它繼承的值篱竭。如果想要保持繼承鏈力图,可以采用下面的代碼。

function clone(origin) {

let originProto = Object.getPrototypeOf(origin);

return Object.assign(Object.create(originProto), origin);

}

在JS里子類利用Object.getPrototypeOf去調(diào)用父類方法,用來獲取對象的原型掺逼。

2.4 合并多個對象

//多個對象合并到某個對象

const merge = (target, ...sources) => Object.assign(target, ...sources);

//多個對象合并到新對象

const merge = (...sources) => Object.assign({}, ...sources);

2.5為屬性指定默認值

const DEFAULTS = {

logLevel: 0,

outputFormat: 'html'

};

function processContent(options) {

let options = Object.assign({}, DEFAULTS, options);

}

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末搪哪,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子坪圾,更是在濱河造成了極大的恐慌,老刑警劉巖惑朦,帶你破解...
    沈念sama閱讀 212,185評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件兽泄,死亡現(xiàn)場離奇詭異,居然都是意外死亡漾月,警方通過查閱死者的電腦和手機病梢,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,445評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來梁肿,“玉大人蜓陌,你說我怎么就攤上這事》悦铮” “怎么了钮热?”我有些...
    開封第一講書人閱讀 157,684評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長烛芬。 經(jīng)常有香客問我隧期,道長飒责,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,564評論 1 284
  • 正文 為了忘掉前任仆潮,我火速辦了婚禮宏蛉,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘性置。我一直安慰自己拾并,他們只是感情好,可當我...
    茶點故事閱讀 65,681評論 6 386
  • 文/花漫 我一把揭開白布鹏浅。 她就那樣靜靜地躺著嗅义,像睡著了一般。 火紅的嫁衣襯著肌膚如雪篡石。 梳的紋絲不亂的頭發(fā)上芥喇,一...
    開封第一講書人閱讀 49,874評論 1 290
  • 那天,我揣著相機與錄音凰萨,去河邊找鬼继控。 笑死,一個胖子當著我的面吹牛胖眷,可吹牛的內(nèi)容都是我干的武通。 我是一名探鬼主播,決...
    沈念sama閱讀 39,025評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼珊搀,長吁一口氣:“原來是場噩夢啊……” “哼冶忱!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起境析,我...
    開封第一講書人閱讀 37,761評論 0 268
  • 序言:老撾萬榮一對情侶失蹤囚枪,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后劳淆,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體链沼,經(jīng)...
    沈念sama閱讀 44,217評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,545評論 2 327
  • 正文 我和宋清朗相戀三年沛鸵,在試婚紗的時候發(fā)現(xiàn)自己被綠了括勺。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,694評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡曲掰,死狀恐怖疾捍,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情栏妖,我是刑警寧澤乱豆,帶...
    沈念sama閱讀 34,351評論 4 332
  • 正文 年R本政府宣布,位于F島的核電站吊趾,受9級特大地震影響咙鞍,放射性物質(zhì)發(fā)生泄漏房官。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,988評論 3 315
  • 文/蒙蒙 一续滋、第九天 我趴在偏房一處隱蔽的房頂上張望翰守。 院中可真熱鬧,春花似錦疲酌、人聲如沸蜡峰。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,778評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽湿颅。三九已至,卻和暖如春粥诫,著一層夾襖步出監(jiān)牢的瞬間油航,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,007評論 1 266
  • 我被黑心中介騙來泰國打工怀浆, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留谊囚,地道東北人。 一個月前我還...
    沈念sama閱讀 46,427評論 2 360
  • 正文 我出身青樓执赡,卻偏偏與公主長得像镰踏,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子沙合,可洞房花燭夜當晚...
    茶點故事閱讀 43,580評論 2 349

推薦閱讀更多精彩內(nèi)容