JS Object.assign詳解

一、基本介紹

Object.assign()方法用於將所有可枚舉屬性的值從一個或多個源對象複製到目標對象，並且返回目標對象。

Object.assign()方法接受任意數量的參數，第一個參數是目標對象，後面的參數是源對象。如果有多個源對象，後面的對象屬性將覆蓋前面的對象屬性。

語法：

Object.assign(target, ...sources)

返回值：目標對象

二、使用場景

Object.assign()方法常用於對象的複製、對象屬性的合併、對象屬性的默認值設置等場景。

三、對象的複製

下面代碼演示了如何使用Object.assign()方法進行淺複製對象。

const source = { a: 1, b: 2 };
const target = Object.assign({}, source);
console.log(target); // { a: 1, b: 2 }

在上面的代碼中，我們將source對象的所有屬性複製到了一個新的空對象中，並將其賦值給了target。這樣就完成了淺複製對象的操作。

四、對象屬性的合併

Object.assign()方法還可以用來合併多個對象，將多個對象的屬性合併到一個新對象中。

const source1 = { a: 1 };
const source2 = { b: 2 };
const source3 = { c: 3 };
const target = Object.assign({}, source1, source2, source3);
console.log(target); // { a: 1, b: 2, c: 3 }

在上面的代碼中，我們將3個源對象的屬性合併到了一個新對象中，並將其賦值給了target。

五、對象屬性的默認值設置

Object.assign()方法常用於為對象設置默認值，如果某個屬性已經存在，則使用已有的屬性值，如果不存在則使用默認值。

const source = { a: 1, b: 2 };
const defaults = { b: 0, c: 3 };
const target = Object.assign({}, source, defaults);
console.log(target); // { a: 1, b: 2, c: 3 }

在上面的代碼中，我們將source和defaults對象的屬性合併到了一個新對象中，並將其賦值給了target。如果defaults對象中的屬性已經存在於source對象中，則使用source中的屬性值；如果不存在，則使用defaults中的默認值。

六、其他使用方式

Object.assign()方法還可以用於數組的合併、字元串的複製、函數參數的默認值設置等場景。

// 對數組進行合併
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = Object.assign([], arr1, arr2);
console.log(arr3); // [1, 2, 3, 4, 5, 6]

// 複製字元串
const str = 'hello';
const copyStr = Object.assign('', str);
console.log(copyStr); // 'hello'

// 函數參數默認值
function func(options) {
  const settings = Object.assign({}, {
    name: 'Default',
    age: 18
  }, options);
  console.log(settings);
}
func({ name: 'Tom' }); // { name: 'Tom', age: 18 }

七、注意事項

Object.assign()方法進行複製和合併時，涉及到的屬性值都是淺複製的。也就是說，如果源對象的屬性值是一個引用類型的值（如數組、對象等），則目標對象中的屬性值僅僅是該引用類型值的引用，並不是該引用類型的深拷貝。

const source = { a: [1, 2, 3] };
const target = Object.assign({}, source);
console.log(target); // { a: [1, 2, 3] }
source.a.push(4);
console.log(target); // { a: [1, 2, 3, 4] }

在上面的代碼中，我們將source對象的屬性複製到了target對象中。然後改變了source.a屬性值的內容，發現target對象中的a屬性值也發生了改變，因為source和target對象中的a屬性值其實是同一個數組的引用。

八、總結

Object.assign()方法是一個十分常用的JavaScript方法，可以實現對象的複製、屬性的合併和默認值的設置等場景。使用Object.assign()方法需要注意屬性值的淺複製問題。