JavaScript Map 方法
new Map() 方法
您可以通过将数组传递给 new Map() 构造函数来创建映射:
示例
// 创建一个映射
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
亲自试一试 »Map.get()
您可以使用 get() 方法获取映射中键的值。
Map.set()
您可以使用 set() 方法向地图添加元素:
示例
// 创建一个 Map
const fruits = new Map();
// 设置 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() 方法返回一个迭代器对象,其中包含一个映射表,该映射表包含 [key,values]:
Map.keys()
keys() 方法返回一个迭代器对象,其中包含映射中的键:
Map.values()
values() 方法返回一个迭代器对象,其中包含映射中的值:
您可以使用 values() 方法对映射中的值求和:
对象作为 key 键
能够使用对象作为键是 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 为 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 月起,新版浏览器支持 JavaScript 2024。
| 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() 与 Map.groupBy()
Object.groupBy() 和 Map.groupBy() 的区别在于:
Object.groupBy() 将元素分组到一个 JavaScript 对象中。
Map.groupBy() 将元素分组到一个 Map 对象中。
