JavaScript Map 方法

new Map() 方法

可以通過將數組傳遞給 new Map() 構造函數來創建 Map：

實例

// 創建一個 Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

親自試一試

Map.get()

可以使用 get() 方法獲取 Map 中鍵的值：

實例

fruits.get("apples");

親自試一試

Map.set()

可以使用 set() 方法向 Map 添加元素：

實例

// 創建一個 Map
const fruits = new Map();
// 設置 Map 值
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);

親自試一試

set() 方法也可以用于更改現有的 Map 值：

實例

fruits.set("apples", 500);

親自試一試

Map.size

size 屬性返回 Map 中元素的數量：

實例

fruits.size;

親自試一試

Map.delete()

delete() 方法移除 Map 中的一個元素：

實例

fruits.delete("apples");

親自試一試

Map.clear()

clear() 方法移除 Map 中的所有元素：

實例

fruits.clear();

親自試一試

Map.has()

如果 Map 中存在某個鍵，has() 方法返回 true：

實例

fruits.has("apples");

親自試一試

嘗試以下代碼：

fruits.delete("apples");
fruits.has("apples");

親自試一試

Map.forEach()

forEach() 方法為 Map 中的每個鍵值對調用回調函數：

實例

// 列出所有條目
let text = "";
fruits.forEach(function(value, key) {
  text += key + ' = ' + value;
});

親自試一試

Map.entries()

entries() 方法返回一個包含 Map 中 [key, value] 對的迭代器對象：

實例

// 列出所有條目
let text = "";
for (const x of fruits.entries()) {
  text += x;
}

親自試一試

Map.keys()

keys() 方法返回一個包含 Map 中鍵的迭代器對象：

實例

// 列出所有鍵
let text = "";
for (const x of fruits.keys()) {
  text += x;
}

親自試一試

Map.values()

values() 方法返回一個包含 Map 中值的迭代器對象：

實例

// 列出所有值
let text = "";
for (const x of fruits.values()) {
  text += x;
}

親自試一試

可以使用 values() 方法對 Map 中的值求和：

實例

// 對所有值求和
let total = 0;
for (const x of fruits.values()) {
  total += x;
}

親自試一試

對象作為鍵

提示：能夠使用對象作為鍵是 Map 的一個重要特性。

實例

// 創建對象
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// 創建一個 Map
const fruits = new Map();
// 向 Map 添加新元素
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);

親自試一試

注意：鍵是對象（apples），而不是字符串（"apples"）：

實例

fruits.get("apples"); // 返回 undefined

親自試一試

JavaScript Map.groupBy()

ES2024 向 JavaScript 添加了 Map.groupBy() 方法。

Map.groupBy() 方法根據回調函數返回的字符串值對對象的元素進行分組。

Map.groupBy() 方法不會更改原始對象。

實例

// 創建一個數組
const fruits = [
  {name: "apples", quantity: 300},
  {name: "bananas", quantity: 500},
  {name: "oranges", quantity: 200},
  {name: "kiwi", quantity: 150}
];
// 用于分組的回調函數
function myCallback({ quantity }) {
  return quantity > 200 ? "ok" : "low";
}
// 按數量分組
const result = Map.groupBy(fruits, myCallback);

親自試一試

瀏覽器支持

Map.groupBy() 是 ES2024 的特性。

自 2024 年 3 月起，新瀏覽器均支持該特性：

Object.groupBy() 與 Map.groupBy() 的區別

Object.groupBy() 和 Map.groupBy() 的區別在于：

Object.groupBy() 將元素分組到 JavaScript 對象中。

Map.groupBy() 將元素分組到 Map 對象中。

完整的 Map 參考手冊

如需完整參考，請訪問我們的：JavaScript Map 參考手冊。

該手冊包含所有 Map 屬性和方法的描述和實例。