什麼是 javascript map？

JavaScript 曾經受到其集合功能的限制。在其他語言中，您可以使用集合、關聯映射、列表和字典，但 JavaScript 只允許您使用數組。JavaScript 開發人員找到了一種將鍵映射到值的方法，但他們的方法有其自身的局限性。

在 ES6 版本中，JavaScript 為地圖引入了一個新的內置類，可以更輕鬆地使用集合。在這個簡短的教程中，我們將討論 JavaScriptMap程式碼範例、方法和用例，我們將介紹高級概念以供學習。

我們將介紹：

什麼是 JavaScript 地圖？
JavaScript 地圖語法
JavaScript 映射方法和用例
高級地圖概念

開始使用現代 JavaScript
本課程涵蓋現代 JavaScript 功能，包括 2015 ES6、2016 ES7 和 2017 ES8。到最後，您將能夠添加新功能並更有效地編寫程式碼。

重新發現 JavaScript：ES6、ES7 和 ES8

什麼是 JavaScript 地圖？

在 ES6 之前，JavaScript 開發人員使用對象將鍵映射到值，但是使用對像作為映射有一些限制：

沒有可靠的方法來迭代鍵
該keys()方法將字段轉換為字符串，這會產生鍵衝突
沒有簡單的方法可以添加新鍵和新值

這些問題在 ES6 版本中在Map引入集合類型時得到了解決。它可以保存任何類型的鍵值對，並且可以記住鍵插入順序。任何值（對象和原語）都可以用作鍵或值。

JavaScriptMap創建一個新數組，其中包含迭代數組元素的結果，並按順序為每個元素調用一次提供的函數。它是一種重要的數據結構，具有許多基本用途。

注意： WeakMap與類似Map，但 a 中的所有鍵WeakMap都是對象。

要創建一個新的Map，請遵循以下語法：

let map = new Map([iterable]);

假設我們想要創建一個將名稱存儲為鍵和分數作為值的存儲。

'use strict';

//START:DEFINE
const scores =
new Map([['Ruby', 12], ['Steven', 11], ['Sam', 15], ['Robin', 14]]);

scores.set('James', 14);

console.log(scores.size);
//END:DEFINE

我們在這裡做了三件事：

scores使用名稱和分數初始化地圖
使用方法向地圖添加鍵和值set()（第 7 行）
使用該size屬性確定映射中有多少鍵（第 9 行）

我們可以使用 JavaScript 映射做更多事情，例如：

遍歷地圖
使用可迭代對像初始化地圖
按鍵從地圖中獲取元素
獲取地圖中元素的數量
將映射鍵或值轉換為數組
按插入順序為每個鍵值對調用回調
等等。

在我們深入研究一些方法和用例之前，讓我們首先學習 JavaScript 映射語法。

JavaScript 地圖語法

此 JavaScript 映射語法如下：

描述：

數組：調用特定函數的數組
map：為具有所需參數的數組調用的方法
function(currentValue, index, arr)：帶有參數的函數，需要為數組中的每個元素運行
currentValue：當前元素的值

index：當前元素的索引

arr：map()被調用的數組對象
thisValue：執行時用作函數值的this值

現在我們已經學習了語法，讓我們看一個map()函數的範例實現：

// creating an array
var an_array = [ 5, 3, 1, 4, 2]

// map calls a function with “item” as parameter
// map will pass each element of an_array as “item” in this function
// the function will triple each element passed and return it as the return value
result = an_array.map(function(item) {
return item* 3;
});

//new list will print with the tripled values
console.log( result);

注意：原始地圖數組不會改變。

現代化您的 JavaScript 技能
將您的 Javascript 技能提升到一個新的水平。本課程涵蓋現代 JavaScript 功能，包括 2015 ES6、2016 ES7 和 2017 ES8。Educative 的基於文本的課程易於瀏覽，並具有實時編碼環境，使學習更加有趣和高效。 br> 重新發現 JavaScript：ES6、ES7 和 ES8

JavaScript 映射方法和用例

現在我們了解了 JavaScript 地圖語法並通過了範例實現，讓我們討論一些常用的地圖方法及其用例。

使用可迭代對像初始化地圖

構造函數使用可迭代對Map()像初始化地圖：

let userRoles = new Map( [
[ruby, 'director'],
[steven, 'producer'],
[foo, 'writer'],
[robin, 'actress']
]);

返回映射到特定鍵的值

get()返回映射到特定鍵的值：

userRoles.get(robin); // actress

If you pass a key that’s not in the map, it will return as undefined:

let emma = {name: 'Emma'};
userRoles.get(emma); // undefined

has() returns a boolean value showing whether a specified key exists:

userRoles.has(emma); // false
userRoles.has(ruby); // true

The size property returns the number of entries in the map:

console.log(userRoles.size); // 4

values() returns a new iterator object that includes the value of each element:

for (let role of userRoles.values()) {
console.log(role);
}
// director
// producer
// writer
// actress

從地圖對像中刪除指定元素

delete()從地圖對像中刪除指定元素：

userRoles.delete(ruby);

刪除地圖對像中的所有元素

clear()刪除地圖對像中的所有元素：

userRoles.clear();

如果我們檢查大小，它將返回為零：

console.log(userRoles.size); // 0

更重要的地圖方法：

forEach(callback[, thisArg])：按插入順序為映射中的每個鍵對值調用回調
set(key, value)：設置地圖對像中鍵的值
keys()：返回一個新的迭代器，其中包含插入順序中元素的鍵
entries(): 遍歷鍵和值的集合

高級地圖概念

JavaScriptMap是一種有價值的集合類型，它使使用 JavaScript 進行編程更簡潔、更高效。我們已經了解了地圖語法、方法和用例。現在您已準備好處理更高級的概念。接下來要介紹的一些推薦概念是：

元編程
原型繼承
實現構造函數
字面量

要快速了解 JavaScript 的功能，請查看 Educative 的課程重新發現 JavaScript：ES6、ES7 和 ES8。本課程探討現代 JavaScript 功能，以幫助您使您的程式碼更簡潔、更具表現力且不易出錯。您將從學習現代 JavaScript 的基本特性開始，然後進入更複雜的特性，例如解構、元編程、對象字面量和繼承。

在課程結束時，您將能夠輕鬆添加新的 JavaScript 功能並更有效地編寫程式碼。

快樂學習！

繼續閱讀 JavaScript

JavaScript Map and Set 教程：如何使用新的內置類
JavaScript 數組方法：如何使用 map 和 reduce
JavaScript 版本：這些年來 JavaScript 的變化

mdn

value

js

en

certificate

map

en-us

javascript array map

map set

json

什麼是 javascript map？