Object.assign()的使用

一锌雀、Object.assign()對象的拷貝

Object.assign() 方法用于將所有可枚舉屬性的值從一個或多個源對象復(fù)制到目標(biāo)對象灾测。它將返回目標(biāo)對象够话。
Object.assign(target, ...sources)    【target:目標(biāo)對象】尿褪,【souce:源對象(可多個)】
舉個栗子:
const object1 = {
  a: 1,
  b: 2,
  c: 3
};

const object2 = 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)對象中的屬性具有相同的鍵肄程,則屬性將被源對象中的屬性覆蓋锣吼。后面的源對象的屬性將類似地覆蓋前面的源對象的屬性
2.Object.assign 方法只會拷貝源對象自身的并且可枚舉的屬性到目標(biāo)對象。該方法使用源對象的[[Get]]和目標(biāo)
對象的[[Set]]蓝厌,所以它會調(diào)用相關(guān) getter 和 setter玄叠。因此,它分配屬性拓提,而不僅僅是復(fù)制或定義新的屬性读恃。如
果合并源包含getter,這可能使其不適合將新屬性合并到原型中。為了將屬性定義(包括其可枚舉性)復(fù)制到
原型寺惫,應(yīng)使用Object.getOwnPropertyDescriptor()和Object.defineProperty() 疹吃。

二、Object.assign()對象的深拷貝

針對深拷貝西雀,需要使用其他辦法萨驶,因?yàn)?Object.assign()拷貝的是屬性值。假如源對象的屬性值是一個對象的引用艇肴,那么它也只指向那個引用腔呜。
let obj1 = { a: 0 , b: { c: 0}}; 
let obj2 = 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}} 
最后一次賦值的時候,b是值是對象的引用再悼,只要修改任意一個核畴,其他的也會受影響

// Deep Clone (深拷貝)
obj1 = { a: 0 , b: { c: 0}}; 
let obj3 = JSON.parse(JSON.stringify(obj1)); 
obj1.a = 4; 
obj1.b.c = 4; 
console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}

3、對象的合并

const o1 = { a: 1 };
const o2 = { b: 2 };
const o3 = { c: 3 };

const obj = 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)對象自身也會改變冲九。
其實(shí)就是對象的拷貝膛檀,o1就是目標(biāo)對象,后面的是源對象娘侍,后面的屬性等會拷貝到目標(biāo)對象

4咖刃、合并具有相同屬性的對象

const o1 = { a: 1, b: 1, c: 1 };
const o2 = { b: 2, c: 2 };
const o3 = { c: 3 };

const obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
1.屬性被后續(xù)參數(shù)中具有相同屬性的其他對象覆蓋。
2.目標(biāo)對象的屬性與源對象的屬性相同憾筏,源的會覆蓋目標(biāo)的屬性

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

const obj = Object.create({foo: 1}, { // foo 是個繼承屬性嚎杨。
    bar: {
        value: 2  // bar 是個不可枚舉屬性。
    },
    baz: {
        value: 3,
        enumerable: true  // baz 是個自身可枚舉屬性氧腰。
    }
});
創(chuàng)建對象時枫浙,如果沒有設(shè)置enumerable的值,默認(rèn)為false(不可枚舉屬性)古拴,設(shè)置為true箩帚,則為可枚舉屬性
const copy = Object.assign({}, obj);
console.log(copy); // { baz: 3 }

6.原始類型會被包裝為對象

const v1 = "abc";
const v2 = true;
const v3 = 10;
const v4 = Symbol("foo")

const obj = Object.assign({}, v1, null, v2, undefined, v3, v4); 
// 原始類型會被包裝,null 和 undefined 會被忽略黄痪。
// 注意紧帕,只有字符串的包裝對象才可能有自身可枚舉屬性。
console.log(obj); // { "0": "a", "1": "b", "2": "c" }

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

const target = Object.defineProperty({}, "foo", {
    value: 1,
    writable: false
}); // target 的 foo 屬性是個只讀屬性桅打。

Object.assign(target, {bar: 2}, {foo2: 3, foo: 3, foo3: 3}, {baz: 4});
// TypeError: "foo" is read-only
// 注意這個異常是在拷貝第二個源對象的第二個屬性時發(fā)生的是嗜。

console.log(target.bar);  // 2,說明第一個源對象拷貝成功了挺尾。
console.log(target.foo2); // 3鹅搪,說明第二個源對象的第一個屬性也拷貝成功了。
console.log(target.foo);  // 1遭铺,只讀屬性不能被覆蓋丽柿,所以第二個源對象的第二個屬性拷貝失敗了恢准。
console.log(target.foo3); // undefined,異常之后 assign 方法就退出了甫题,第三個屬性是不會被拷貝到的顷歌。
console.log(target.baz);  // undefined,第三個源對象更是不會被拷貝到的幔睬。
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末眯漩,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子麻顶,更是在濱河造成了極大的恐慌赦抖,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,311評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件辅肾,死亡現(xiàn)場離奇詭異队萤,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)矫钓,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評論 2 382
  • 文/潘曉璐 我一進(jìn)店門要尔,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人新娜,你說我怎么就攤上這事赵辕。” “怎么了概龄?”我有些...
    開封第一講書人閱讀 152,671評論 0 342
  • 文/不壞的土叔 我叫張陵还惠,是天一觀的道長。 經(jīng)常有香客問我私杜,道長蚕键,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,252評論 1 279
  • 正文 為了忘掉前任衰粹,我火速辦了婚禮锣光,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘铝耻。我一直安慰自己誊爹,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,253評論 5 371
  • 文/花漫 我一把揭開白布田篇。 她就那樣靜靜地躺著替废,像睡著了一般箍铭。 火紅的嫁衣襯著肌膚如雪泊柬。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,031評論 1 285
  • 那天诈火,我揣著相機(jī)與錄音兽赁,去河邊找鬼状答。 笑死,一個胖子當(dāng)著我的面吹牛刀崖,可吹牛的內(nèi)容都是我干的惊科。 我是一名探鬼主播,決...
    沈念sama閱讀 38,340評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼亮钦,長吁一口氣:“原來是場噩夢啊……” “哼馆截!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起蜂莉,我...
    開封第一講書人閱讀 36,973評論 0 259
  • 序言:老撾萬榮一對情侶失蹤蜡娶,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后映穗,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體窖张,經(jīng)...
    沈念sama閱讀 43,466評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,937評論 2 323
  • 正文 我和宋清朗相戀三年蚁滋,在試婚紗的時候發(fā)現(xiàn)自己被綠了宿接。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,039評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡辕录,死狀恐怖睦霎,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情走诞,我是刑警寧澤碎赢,帶...
    沈念sama閱讀 33,701評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站速梗,受9級特大地震影響肮塞,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜姻锁,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,254評論 3 307
  • 文/蒙蒙 一枕赵、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧位隶,春花似錦拷窜、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至笋妥,卻和暖如春懊昨,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背春宣。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工酵颁, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留嫉你,地道東北人。 一個月前我還...
    沈念sama閱讀 45,497評論 2 354
  • 正文 我出身青樓躏惋,卻偏偏與公主長得像幽污,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子簿姨,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,786評論 2 345

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

  • 屬性的簡潔表示法 ES6允許直接寫入變量和函數(shù)距误,作為對象的屬性和方法。這樣的書寫更加簡潔扁位。 上面代碼表明深寥,ES6允...
    呼呼哥閱讀 2,906評論 0 2
  • 1.屬性的簡潔表示法 允許直接寫入變量和函數(shù) 上面代碼表明,ES6 允許在對象之中贤牛,直接寫變量惋鹅。這時,屬性名為變量...
    雨飛飛雨閱讀 1,130評論 0 3
  • 1 基本用法 Object.assign方法用于對象的合并殉簸,將源對象( source )的所有可枚舉屬性闰集,復(fù)制到目...
    Api調(diào)用師閱讀 879評論 0 4
  • 屬性的簡潔表示法 ES6允許直接寫入變量和函數(shù),作為對象的屬性和方法般卑。 上面代碼表明武鲁,ES6允許在對象之中,直接寫...
    oWSQo閱讀 504評論 0 0
  • 給心開一扇窗 給自己一縷陽光 種子開始發(fā)芽 耐心灌溉 淡定成長 嗅著空氣的芳香 跳著歡快的舞步 內(nèi)心開始沉淀 無需...
    灼然言悅閱讀 188評論 0 5