Object.assign
基本用法
Object.assign() 方法用于將所有可枚舉屬性的值從一個或者多個源對象source復制到目標對象。它將返回目標對象target
const target = { a: 1, b: 2 }
const source = { b: 4, c: 5 }const returnedTarget = Object.assign(target, source)target // { a: 1, b: 4, c: 5 }
returnedTarget // { a: 1, b: 4, c: 5 }
Object.assign方法的第一個參數是目標對象,后面的參數都是源對象。
注意:如果目標對象與源對象有同名屬性,或多個源對象有同名屬性,則后面的屬性會覆蓋前面的屬性。
如果該參數不是對象,則會先轉為對象,然后返回
由于undefined和null無法轉為對象,所以如果它們作為目標對象參數,就會報錯
與解構賦值的區別
const data1 = {...preData, a:1}
const data2 = Object.assign(preData,{a:1})
兩者的主要區別在于對象的修改方式 和 是否影響原始對象
const data = {...preData, a:1}
- 作用:創建一個新對象,將preData的所有屬性拷貝過來,并覆蓋a的值
- 特點:
- 不修改preData,而是創建一個新的對象
- 淺拷貝:如果preData里面是嵌套對象,仍然是引用關系
const preData = { x: 10, y: 20 };
const data = { ...preData, y: 30 };console.log(preData); // { x: 10, y: 20 }(不受影響)
console.log(data); // { x: 10, y: 30 }(新對象)
const data = Object.assign(preData,{a:1})
- 作用:直接將{a:1}合并到preData中,并返回修改后的preData
- 特點:
- 修改了preData
- 淺拷貝
const preData = { x: 10, y: 20 };
const data = Object.assign(preData, { y: 30 });console.log(preData); // { x: 10, y: 30 }(被修改了!)
console.log(data); // { x: 10, y: 30 }(與 preData 相同)
- 應用場景
- 如果想修改原對象,使用Object.assign
- 如果不想修改原對象,使用解構賦值