如何使用 JavaScript 將普通物件轉換為 ES6 Map？

---

有多種方法可以將普通 JavaScript 物件轉換為 ES6 Map。最簡單有效的方法是使用 `Object.entries()` 函式和 `Map()` 建構函式。相比之下，更靈活的替代方法包括 `Object.keys()` 和 `Array.prototype.forEach()` 以及 `for...in` 迴圈和 `Map()` 函式方法。

ES6 中的 Map 是鍵值對的集合。在這裡，我們可以使用任何型別的物件作為鍵，包括字串和數字等原始資料型別。Map 中的值可以是任何型別的物件。

Map 和物件的主要區別在於，在 Map 中，鍵可以具有任何資料型別，而在物件中，它們始終轉換為字串。

然而，Map 比普通物件有一些優勢，例如可迭代性和保證的元素順序。本文將介紹如何使用 JavaScript 將普通物件轉換為 ES6 Map。

方法一：使用 Object.entries() 和 Map()

我們將學習的第一個將普通物件轉換為 ES6 Map 的方法包括兩個步驟：

• 使用 `Object.entries()` 方法從物件中獲取鍵值對陣列

• 然後將該陣列傳遞給 `Map()` 建構函式。

示例

`Object.entries()` 方法返回的陣列中的每個陣列都表示物件中的鍵值對。以下是如何使用 `Object.entries()` 和 `Map()` 建構函式將普通物件轉換為 ES6 Map 的示例：

let plainObject = { "one": 1, "two": 2, "three": 3 };
let map = new Map(Object.entries(plainObject));
console.log(map); 

在這個例子中，普通物件使用 `Object.entries()` 函式轉換為鍵值對陣列。然後將該陣列傳遞給 `Map()` 函式，該函式建立一個包含這些鍵值對的新 Map 物件。

`Object.entries()` 方法只需要一行程式碼，並且大多數現代瀏覽器都完全支援它。但是，此方法僅限於具有可列舉屬性的物件，並且不包括鍵為符號的屬性。

方法二：使用 for...in 迴圈和 Map() 建構函式

現在讓我們來看另一種將普通物件轉換為 ES6 Map 的方法。此方法包括以下步驟：

• 使用 `for...in` 迴圈迭代物件的屬性

• 使用 `Map.set()` 方法將它們新增到新的 Map 物件中。

示例

以下是如何使用 `for...in` 迴圈和 `Map()` 建構函式將普通物件轉換為 ES6 Map 的示例：

let plainObject = { "one": 1, "two": 2, "three": 3 };
let map = new Map();
for (let key in plainObject) {
   map.set(key, plainObject[key]);
}
console.log(map); 

在這種方法中，我們正在迴圈並將屬性設定為對映，這可能使此方法不如第一種方法有效。

但是，此方法也適用於具有不可列舉屬性的物件以及鍵為符號的屬性。

方法三：使用 Object.keys() 和 Array.prototype.forEach()

在這種方法中，我們遵循以下步驟：

• 我們首先使用 `Object.keys(obj)` 獲取物件鍵的陣列。

• 然後我們使用 `Array.prototype.forEach()` 方法迭代鍵

• 然後我們使用 `Map.set()` 方法將鍵值對新增到對映中。

示例

let plainObject = { "one": 1, "two": 2, "three": 3 };
let map = new Map();
Object.keys(plainObject).forEach(key => {
   map.set(key, plainObject[key]);
});
console.log(map);

需要注意的是，`for...in` 迴圈、`Object.keys()` 和 `Array.prototype.forEach()` 方法返回的屬性順序與它們在原始物件中定義的順序不同。屬性將按列舉順序返回。

但是，`Map()` 函式方法按傳遞的順序返回鍵值對。

結論

您可以根據專案的具體要求選擇最適合您需求的方法。請記住，如果順序在您的用例中很重要，則 `Map()` 建構函式方法是最佳選擇；否則，其他方法也可以正常工作。