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

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

ES6中的

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

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

儘管如此，與普通物件相比，映射具有一些優勢，例如可迭代性和保證的元素順序。這篇文章將介紹如何使用 JavaScript 將普通物件轉換為 ES6 Map。

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

我們今天要學習的轉換普通物件 intp ES6 映射的第一種方法包含兩個步驟 -

• 使用 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() 方法只需要一行程式碼，並且得到大多數現代瀏覽器的完全支援。然而，這種方法僅限於具有可枚舉屬性的對象，並且排除具有符號鍵的屬性。

方法 2：使用 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); 

在這種方法中，我們循環並設定地圖屬性，這可能會使該方法比第一種方法效率低。

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

方法 3：使用 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() 建構函數方法是最佳選擇；否則，其他方法都可以正常運作。

以上是如何使用 JavaScript 將普通物件轉換為 ES6 Map？的詳細內容。更多資訊請關注PHP中文網其他相關文章！