Object.assign()用法合并多對(duì)象(深淺拷貝)

主要的用途是用來(lái)合并多個(gè)JavaScript的對(duì)象盟戏。

Object.assign()接口可以接收多個(gè)參數(shù),第一個(gè)參數(shù)是目標(biāo)對(duì)象,后面的都是源對(duì)象口蝠,assign方法將多個(gè)原對(duì)象的屬性和方法都合并到了目標(biāo)對(duì)象上面,如果在這個(gè)過(guò)程中出現(xiàn)同名的屬性(方法)津坑,后合并的屬性(方法)會(huì)覆蓋之前的同名屬性(方法)妙蔗。
語(yǔ)法: Object.assign(target, …sources) target: 目標(biāo)對(duì)象,sources: 源對(duì)象
用于將所有可枚舉屬性的值從一個(gè)或多個(gè)源對(duì)象復(fù)制到目標(biāo)對(duì)象。它將返回目標(biāo)對(duì)象疆瑰。

一.淺拷貝:復(fù)制的只是引用眉反,原對(duì)象屬性的改變會(huì)引起拷貝對(duì)象對(duì)應(yīng)引用屬性的變化。

使用Object.assign()(只能拷貝第一層)

let a = {
    name:'tom',
    age:20,
    friends:{
        student:['jack']
    }
}
let b = Object.assign({},a);
a.friends.student = ['tony'];
console.log(a);// { name: 'tom', age: 20, friends: { student: [ 'tony' ] } }
console.log(b);// { name: 'tom', age: 20, friends: { student: [ 'tony' ] } }

二.深拷貝:開(kāi)辟新的內(nèi)存空間穆役,原對(duì)象與拷貝對(duì)象之間沒(méi)有影響寸五。

使用JSON.parse()加JSON.stringify()

let obj = {
  name:'tom',
  age:10,
  friend:{
    name:'jack'
  }
};
let copy = JSON.parse(JSON.stringify(obj));
obj.name = 'elric';
console.log(obj);// {name: "elric", age: 10, friend: {…}}
console.log(copy);// {name: "tom", age: 10, friend: {…}}

copy對(duì)象的name沒(méi)有因?yàn)閛bj的name變化而變化,說(shuō)明該方法實(shí)現(xiàn)了深拷貝孵睬。缺陷:無(wú)法拷貝函數(shù)播歼、undefined

一、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è)栗子:
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)對(duì)象中的屬性具有相同的鍵,則屬性將被源對(duì)象中的屬性覆蓋烁试。后面的源對(duì)象的屬性將類似地覆蓋前面的源對(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è)引用尖坤。
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}} 
最后一次賦值的時(shí)候,b是值是對(duì)象的引用闲擦,只要修改任意一個(gè)慢味,其他的也會(huì)受影響

// 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、對(duì)象的合并

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)對(duì)象自身也會(huì)改變墅冷。
其實(shí)就是對(duì)象的拷貝贮缕,o1就是目標(biāo)對(duì)象,后面的是源對(duì)象俺榆,后面的屬性等會(huì)拷貝到目標(biāo)對(duì)象

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

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ù)中具有相同屬性的其他對(duì)象覆蓋。
2.目標(biāo)對(duì)象的屬性與源對(duì)象的屬性相同罐脊,源的會(huì)覆蓋目標(biāo)的屬性

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

const obj = 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檀何,則為可枚舉屬性
const copy = Object.assign({}, obj);
console.log(copy); // { baz: 3 }

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

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

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

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

const target = 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ì)被拷貝到的。
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末底桂,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子惧眠,更是在濱河造成了極大的恐慌籽懦,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,539評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件氛魁,死亡現(xiàn)場(chǎng)離奇詭異暮顺,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)秀存,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,594評(píng)論 3 396
  • 文/潘曉璐 我一進(jìn)店門(mén)捶码,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人或链,你說(shuō)我怎么就攤上這事惫恼。” “怎么了澳盐?”我有些...
    開(kāi)封第一講書(shū)人閱讀 165,871評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵祈纯,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我叼耙,道長(zhǎng)腕窥,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,963評(píng)論 1 295
  • 正文 為了忘掉前任筛婉,我火速辦了婚禮簇爆,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己入蛆,他們只是感情好响蓉,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,984評(píng)論 6 393
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著安寺,像睡著了一般厕妖。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上挑庶,一...
    開(kāi)封第一講書(shū)人閱讀 51,763評(píng)論 1 307
  • 那天言秸,我揣著相機(jī)與錄音,去河邊找鬼迎捺。 笑死举畸,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的凳枝。 我是一名探鬼主播抄沮,決...
    沈念sama閱讀 40,468評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼岖瑰!你這毒婦竟也來(lái)了叛买?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,357評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤蹋订,失蹤者是張志新(化名)和其女友劉穎率挣,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體露戒,經(jīng)...
    沈念sama閱讀 45,850評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡椒功,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,002評(píng)論 3 338
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了智什。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片动漾。...
    茶點(diǎn)故事閱讀 40,144評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖荠锭,靈堂內(nèi)的尸體忽然破棺而出旱眯,到底是詐尸還是另有隱情,我是刑警寧澤证九,帶...
    沈念sama閱讀 35,823評(píng)論 5 346
  • 正文 年R本政府宣布键思,位于F島的核電站,受9級(jí)特大地震影響甫贯,放射性物質(zhì)發(fā)生泄漏吼鳞。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,483評(píng)論 3 331
  • 文/蒙蒙 一叫搁、第九天 我趴在偏房一處隱蔽的房頂上張望赔桌。 院中可真熱鬧供炎,春花似錦、人聲如沸疾党。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,026評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)雪位。三九已至竭钝,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間雹洗,已是汗流浹背香罐。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,150評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留时肿,地道東北人庇茫。 一個(gè)月前我還...
    沈念sama閱讀 48,415評(píng)論 3 373
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像螃成,于是被迫代替她去往敵國(guó)和親旦签。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,092評(píng)論 2 355

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

  • 1 基本用法 Object.assign方法用于對(duì)象的合并寸宏,將源對(duì)象( source )的所有可枚舉屬性宁炫,復(fù)制到目...
    Api調(diào)用師閱讀 879評(píng)論 0 4
  • 1.屬性的簡(jiǎn)潔表示法 允許直接寫(xiě)入變量和函數(shù) 上面代碼表明,ES6 允許在對(duì)象之中氮凝,直接寫(xiě)變量羔巢。這時(shí),屬性名為變量...
    雨飛飛雨閱讀 1,136評(píng)論 0 3
  • 屬性的簡(jiǎn)潔表示法 ES6允許直接寫(xiě)入變量和函數(shù)覆醇,作為對(duì)象的屬性和方法。 上面代碼表明炭臭,ES6允許在對(duì)象之中永脓,直接寫(xiě)...
    oWSQo閱讀 509評(píng)論 0 0
  • 屬性的簡(jiǎn)潔表示法 ES6允許直接寫(xiě)入變量和函數(shù),作為對(duì)象的屬性和方法鞋仍。這樣的書(shū)寫(xiě)更加簡(jiǎn)潔常摧。 上面代碼表明,ES6允...
    呼呼哥閱讀 2,923評(píng)論 0 2
  • Object.assign()方法用于將所有可枚舉的屬性的值從一個(gè)或多個(gè)源對(duì)象復(fù)制到目標(biāo)對(duì)象威创。它將返回目標(biāo)對(duì)象落午。 ...
    執(zhí)著_7a69閱讀 1,727評(píng)論 0 2