ES6 Object.assign()

一、Object.assign()對(duì)象的拷貝

Object.assign()方法用于將所有可枚舉屬性的值從一個(gè)或多個(gè)源對(duì)象復(fù)制到目標(biāo)對(duì)象。它將返回目標(biāo)對(duì)象。Object.assign(target,...sources)【target:目標(biāo)對(duì)象】,【souce:源對(duì)象(可多個(gè))】舉個(gè)栗子:constobject1={a:1,b:2,c:3};constobject2=Object.assign({c:4,d:5},object1);console.log(object2.c,object2.d);console.log(object1)// { a: 1, b: 2, c: 3 }console.log(object2)// { c: 3, d: 5, a: 1, b: 2 }注意:1.如果目標(biāo)對(duì)象中的屬性具有相同的鍵,則屬性將被源對(duì)象中的屬性覆蓋卑硫。后面的源對(duì)象的屬性將類(lèi)似地覆蓋前面的源對(duì)象的屬性2.Object.assign 方法只會(huì)拷貝源對(duì)象自身的并且可枚舉的屬性到目標(biāo)對(duì)象。該方法使用源對(duì)象的[[Get]]和目標(biāo)對(duì)象的[[Set]]蚕断,所以它會(huì)調(diào)用相關(guān) getter 和 setter欢伏。因此,它分配屬性亿乳,而不僅僅是復(fù)制或定義新的屬性硝拧。如果合并源包含getter,這可能使其不適合將新屬性合并到原型中风皿。為了將屬性定義(包括其可枚舉性)復(fù)制到原型河爹,應(yīng)使用Object.getOwnPropertyDescriptor()和Object.defineProperty()。

二桐款、Object.assign()對(duì)象的深拷貝

針對(duì)深拷貝咸这,需要使用其他辦法,因?yàn)?Object.assign()拷貝的是屬性值魔眨。假如源對(duì)象的屬性值是一個(gè)對(duì)象的引用媳维,那么它也只指向那個(gè)引用。letobj1={a:0,b:{c:0}};letobj2=Object.assign({},obj1);console.log(JSON.stringify(obj2));// { a: 0, b: { c: 0}} obj1.a=1;console.log(JSON.stringify(obj1));// { a: 1, b: { c: 0}} console.log(JSON.stringify(obj2));// { a: 0, b: { c: 0}} obj2.a=2;console.log(JSON.stringify(obj1));// { a: 1, b: { c: 0}} console.log(JSON.stringify(obj2));// { a: 2, b: { c: 0}}obj2.b.c=3;console.log(JSON.stringify(obj1));// { a: 1, b: { c: 3}} console.log(JSON.stringify(obj2));// { a: 2, b: { c: 3}} 最后一次賦值的時(shí)候遏暴,b是值是對(duì)象的引用侄刽,只要修改任意一個(gè),其他的也會(huì)受影響// Deep Clone (深拷貝)obj1={a:0,b:{c:0}};letobj3=JSON.parse(JSON.stringify(obj1));obj1.a=4;obj1.b.c=4;console.log(JSON.stringify(obj3));// { a: 0, b: { c: 0}}

3朋凉、對(duì)象的合并

consto1={a:1};consto2={b:2};consto3={c:3};constobj=Object.assign(o1,o2,o3);console.log(obj);// { a: 1, b: 2, c: 3 }console.log(o1);// { a: 1, b: 2, c: 3 }, 注意目標(biāo)對(duì)象自身也會(huì)改變州丹。其實(shí)就是對(duì)象的拷貝,o1就是目標(biāo)對(duì)象杂彭,后面的是源對(duì)象墓毒,后面的屬性等會(huì)拷貝到目標(biāo)對(duì)象

4、合并具有相同屬性的對(duì)象

consto1={a:1,b:1,c:1};consto2={b:2,c:2};consto3={c:3};constobj=Object.assign({},o1,o2,o3);console.log(obj);// { a: 1, b: 2, c: 3 }1.屬性被后續(xù)參數(shù)中具有相同屬性的其他對(duì)象覆蓋亲怠。2.目標(biāo)對(duì)象的屬性與源對(duì)象的屬性相同所计,源的會(huì)覆蓋目標(biāo)的屬性

5.繼承屬性和不可枚舉屬性是不能拷貝

constobj=Object.create({foo:1},{// foo 是個(gè)繼承屬性。bar:{value:2// bar 是個(gè)不可枚舉屬性团秽。},baz:{value:3,enumerable:true// baz 是個(gè)自身可枚舉屬性主胧。}});創(chuàng)建對(duì)象時(shí)叭首,如果沒(méi)有設(shè)置enumerable的值,默認(rèn)為false(不可枚舉屬性)踪栋,設(shè)置為true焙格,則為可枚舉屬性constcopy=Object.assign({},obj);console.log(copy);// { baz: 3 }

6.原始類(lèi)型會(huì)被包裝為對(duì)象

constv1="abc";constv2=true;constv3=10;constv4=Symbol("foo")constobj=Object.assign({},v1,null,v2,undefined,v3,v4);// 原始類(lèi)型會(huì)被包裝,null 和 undefined 會(huì)被忽略己英。// 注意间螟,只有字符串的包裝對(duì)象才可能有自身可枚舉屬性。console.log(obj);// { "0": "a", "1": "b", "2": "c" }

7.異常會(huì)打斷后續(xù)拷貝任務(wù)

consttarget=Object.defineProperty({},"foo",{value:1,writable:false});// target 的 foo 屬性是個(gè)只讀屬性损肛。Object.assign(target,{bar:2},{foo2:3,foo:3,foo3:3},{baz:4});// TypeError: "foo" is read-only// 注意這個(gè)異常是在拷貝第二個(gè)源對(duì)象的第二個(gè)屬性時(shí)發(fā)生的。console.log(target.bar);// 2荣瑟,說(shuō)明第一個(gè)源對(duì)象拷貝成功了治拿。console.log(target.foo2);// 3,說(shuō)明第二個(gè)源對(duì)象的第一個(gè)屬性也拷貝成功了笆焰。console.log(target.foo);// 1劫谅,只讀屬性不能被覆蓋,所以第二個(gè)源對(duì)象的第二個(gè)屬性拷貝失敗了嚷掠。console.log(target.foo3);// undefined捏检,異常之后 assign 方法就退出了,第三個(gè)屬性是不會(huì)被拷貝到的不皆。console.log(target.baz);// undefined贯城,第三個(gè)源對(duì)象更是不會(huì)被拷貝到的。

作者:Amy_yqh

鏈接:http://www.reibang.com/p/f9ec860ecd81

來(lái)源:簡(jiǎn)書(shū)

著作權(quán)歸作者所有霹娄。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)能犯,非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末犬耻,一起剝皮案震驚了整個(gè)濱河市踩晶,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌枕磁,老刑警劉巖渡蜻,帶你破解...
    沈念sama閱讀 219,589評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異计济,居然都是意外死亡茸苇,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,615評(píng)論 3 396
  • 文/潘曉璐 我一進(jìn)店門(mén)峭咒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)税弃,“玉大人,你說(shuō)我怎么就攤上這事凑队≡蚬” “怎么了幔翰?”我有些...
    開(kāi)封第一講書(shū)人閱讀 165,933評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)西壮。 經(jīng)常有香客問(wèn)我遗增,道長(zhǎng),這世上最難降的妖魔是什么款青? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,976評(píng)論 1 295
  • 正文 為了忘掉前任做修,我火速辦了婚禮,結(jié)果婚禮上抡草,老公的妹妹穿的比我還像新娘饰及。我一直安慰自己,他們只是感情好康震,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,999評(píng)論 6 393
  • 文/花漫 我一把揭開(kāi)白布燎含。 她就那樣靜靜地躺著,像睡著了一般腿短。 火紅的嫁衣襯著肌膚如雪屏箍。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 51,775評(píng)論 1 307
  • 那天橘忱,我揣著相機(jī)與錄音赴魁,去河邊找鬼。 笑死钝诚,一個(gè)胖子當(dāng)著我的面吹牛颖御,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播敲长,決...
    沈念sama閱讀 40,474評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼郎嫁,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了祈噪?” 一聲冷哼從身側(cè)響起泽铛,我...
    開(kāi)封第一講書(shū)人閱讀 39,359評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎辑鲤,沒(méi)想到半個(gè)月后盔腔,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體渊胸,經(jīng)...
    沈念sama閱讀 45,854評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡拂酣,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,007評(píng)論 3 338
  • 正文 我和宋清朗相戀三年厢岂,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了拦赠。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,146評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡纹坐,死狀恐怖轧飞,靈堂內(nèi)的尸體忽然破棺而出密任,到底是詐尸還是另有隱情决左,我是刑警寧澤愕够,帶...
    沈念sama閱讀 35,826評(píng)論 5 346
  • 正文 年R本政府宣布走贪,位于F島的核電站,受9級(jí)特大地震影響惑芭,放射性物質(zhì)發(fā)生泄漏坠狡。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,484評(píng)論 3 331
  • 文/蒙蒙 一遂跟、第九天 我趴在偏房一處隱蔽的房頂上張望逃沿。 院中可真熱鬧,春花似錦幻锁、人聲如沸凯亮。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,029評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)触幼。三九已至,卻和暖如春究飞,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背堂鲤。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,153評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工亿傅, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人瘟栖。 一個(gè)月前我還...
    沈念sama閱讀 48,420評(píng)論 3 373
  • 正文 我出身青樓葵擎,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親半哟。 傳聞我的和親對(duì)象是個(gè)殘疾皇子酬滤,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,107評(píng)論 2 356

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