JavaScript 地图方法
新的 Map() 方法
你可以通过将数组传递给 new Map() 构造函数来创建一个地图
Map.get()
你可以使用 get() 方法获取地图中键的值
Map.set()
你可以使用 set() 方法向地图添加元素
示例
// 创建一个地图
const fruits = new Map();
// 设置地图值
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);
自己尝试 »
set() 方法也可以用于更改现有地图值
Map.size
size 属性返回地图中的元素数量
Map.delete()
delete() 方法删除地图元素
Map.clear()
clear() 方法删除地图中的所有元素
Map.has()
has() 方法如果地图中存在键则返回 true
Map.forEach()
forEach() 方法为地图中的每个键值对调用回调函数
示例
// 列出所有条目
let text = "";
fruits.forEach (function(value, key) {
text += key + ' = ' + value;
})
自己尝试 »
Map.entries()
entries() 方法返回一个包含地图中 [键, 值] 的迭代器对象
Map.keys()
keys() 方法返回一个包含地图中键的迭代器对象
Map.values()
values() 方法返回一个包含地图中值的迭代器对象
你可以使用 values() 方法来对地图中的值求和
对象作为键
能够使用对象作为键是 Map 的一个重要功能。
示例
// 创建对象
const apples = {name: 'Apples'};
const bananas = {name: '香蕉'};
const oranges = {name: '橙子'};
// 创建一个地图
const fruits = new Map();
// 将新元素添加到 Map 中
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);
自己尝试 »
注意：键是对象（apples），而不是字符串（"apples"）
JavaScript Map.groupBy()
ES2024 在 JavaScript 中添加了 Map.groupBy() 方法。
Map.groupBy() 方法根据回调函数返回的字符串值对对象中的元素进行分组。
Map.groupBy() 方法不会改变原始对象。
示例
// 创建一个数组
const fruits = [
{name:"苹果", quantity:300},
{name:"香蕉", quantity:500},
{name:"橙子", quantity:200},
{name:"奇异果", quantity:150}
];
// 回调函数用于对元素进行分组
function myCallback({ quantity }) {
return quantity > 200 ? "ok" : "low";
}
// 按数量分组
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 对象中。
