Robi.Run
登入

有想到什麼再寫什麼，沒想到什麼就算了

javascript Object.assign(..., ...); 的用途

2024-11-25 01:28 by @robi

JavaScript 的 Object.assign() 方法是一個強大的工具，用於將一個或多個源對象的可枚舉自身屬性複製到目標對象。其用途廣泛，涵蓋了對象的複製、合併以及擴展等多種場景。 理解其工作機制和應用場景，對於高效的 JavaScript 編程至關重要。

Object.assign() 的基本語法是：Object.assign(target, ...sources)，其中 target 是目標對象，sources 是零個或多個源對象。 該方法會將 sources 中所有可枚舉自身屬性複製到 target 中。如果目標對象和源對象具有同名屬性，則源對象的屬性值會覆蓋目標對象的屬性值。 返回的結果是目標對象本身，這一點需要特別注意。

複製對象: 這是 Object.assign() 最直接的應用。 如果需要創建一個對象的副本，可以使用 Object.assign()，但需要注意的是，它進行的是淺拷貝（shallow copy）。 淺拷貝意味著只複製對象的頂層屬性，如果屬性是對象（例如嵌套對象或數組），則只複製其引用，而不是創建新的對象或數組。 因此，修改副本中的嵌套對象也會影響原始對象。

const originalObject = { a: 1, b: { c: 2 } };
const copiedObject = Object.assign({}, originalObject);

copiedObject.a = 3; // 只修改副本
copiedObject.b.c = 4; // 修改原始對象和副本


console.log(originalObject); // { a: 1, b: { c: 4 } }
console.log(copiedObject); // { a: 3, b: { c: 4 } }

合併對象: Object.assign() 可以將多個源對象的屬性合併到一個目標對象中。 這在需要組合來自不同來源的數據時非常有用。 後面的源對象會覆蓋前面源對象的同名屬性。

const object1 = { a: 1, b: 2 };
const object2 = { b: 3, c: 4 };
const mergedObject = Object.assign({}, object1, object2);

console.log(mergedObject); // { a: 1, b: 3, c: 4 }

擴展對象: Object.assign() 可以向現有對象添加新的屬性。 這在需要動態添加屬性或修改對象結構時非常方便。

const myObject = { name: "John" };
Object.assign(myObject, { age: 30, city: "New York" });

console.log(myObject); // { name: "John", age: 30, city: "New York" }

與 spread syntax 的比較: ES6 引入了 spread syntax (...)，它提供了一種更簡潔的方式來複製和合併對象。 對於複製對象，spread syntax 和 Object.assign() 的效果類似，但 spread syntax 更易讀。 對於合併對象，spread syntax 可以創建一個新的對象，避免了修改原始對象的問題。

const originalObject = { a: 1, b: { c: 2 } };
const copiedObjectSpread = { ...originalObject }; //spread syntax

copiedObjectSpread.a = 3;
copiedObjectSpread.b.c = 4;

console.log(originalObject); // { a: 1, b: { c: 2 } }  //原始對象未被修改
console.log(copiedObjectSpread); // { a: 3, b: { c: 4 } }

注意事項:

  • 淺拷貝: Object.assign() 進行淺拷貝，這一點必須時刻銘記。 對於深層嵌套的對象，需要使用深拷貝技術（例如 JSON.parse(JSON.stringify(object))，但此方法並不完美，會忽略函數和一些特殊對象）。
  • 只複製可枚舉自身屬性: Object.assign() 只複製源對象的可枚舉自身屬性，不會複製原型鏈上的屬性或不可枚舉的屬性。
  • 修改目標對象: Object.assign() 直接修改目標對象，並返回目標對象本身。

總而言之，Object.assign() 是一個功能強大且用途廣泛的方法，但需要注意其淺拷貝的特性。 在選擇使用 Object.assign() 或 spread syntax 時，需要根據具體的應用場景和需求選擇最合適的方法，以確保代碼的正確性和可讀性。 理解其特性和侷限性，才能更好地利用它來簡化 JavaScript 編程。

提示