JavaScript Map 方法
新的 Map() 方法
您可以透過將陣列傳遞給 new Map() 建構函式來建立 map。
示例
// 建立一個 Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
自己動手試一試 »
Map.get()
使用 get() 方法獲取 map 中某個鍵的值。
Map.set()
使用 set() 方法可以向 map 新增元素。
示例
// 建立一個 Map
const fruits = new Map();
// 設定 Map 值
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);
自己動手試一試 »
set() 方法也可用於更改現有的 map 值。
Map.size
size 屬性返回 map 中的元素數量。
Map.delete()
delete() 方法刪除 map 中的一個元素。
Map.clear()
clear() 方法刪除 map 中的所有元素。
Map.has()
has() 方法在 map 中存在鍵時返回 true。
Map.forEach()
forEach() 方法為 map 中的每個鍵/值對呼叫一個回撥函式。
示例
// 列出所有條目
let text = "";
fruits.forEach (function(value, key) {
text += key + ' = ' + value;
})
自己動手試一試 »
Map.entries()
entries() 方法返回一個包含 map 中 [key, value] 對的迭代器物件。
Map.keys()
keys() 方法返回一個包含 map 中鍵的迭代器物件。
Map.values()
values() 方法返回一個包含 map 中值的迭代器物件。
可以使用 values() 方法對 map 中的值求和。
物件作為鍵
能夠使用物件作為鍵是 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”）
JavaScript Map.groupBy()
ES2024 添加了 Map.groupBy() 方法到 JavaScript。
Map.groupBy() 方法根據回撥函式返回的字串值對物件的元素進行分組。
Map.groupBy() 方法不會更改原始物件。
示例
// 建立一個數組
const fruits = [
{name:"apples", quantity:300},
{name:"bananas", quantity:500},
{name:"oranges", quantity:200},
{name:"kiwi", quantity:150}
];
// Callback function to Group Elements
function myCallback({ quantity }) {
return quantity > 200 ? "ok" : "low";
}
// Group by Quantity
const result = Map.groupBy(fruits, myCallback);
自己動手試一試 »
瀏覽器支援
Map.groupby() 是 ES2024 的特性。
自 2024 年 3 月起，新瀏覽器已支援此功能。
| Chrome 117 | Edge 117 | Firefox 119 | Safari 17.4 | Opera 103 |
| 2023 年 9 月 | 2023 年 9 月 | 2023 年 10 月 | 2024 年 10 月 | 2023 年 5 月 |
警告
ES2024 的特性相對較新。
舊版瀏覽器可能需要替代程式碼（Polyfill）。
Object.groupBy() vs Map.groupBy()
Object.groupBy() 和 Map.groupBy() 之間的區別是
Object.groupBy() 將元素分組到 JavaScript 物件中。
Map.groupBy() 將元素分組到 Map 物件中。
