手册
目录
可以通过将数组传递给 new Map() 构造函数来创建 Map:
// 创建一个 Map const fruits = new Map([ ["apples", 500], ["bananas", 300], ["oranges", 200] ]);运行实例 »
点击 "运行实例" 按钮查看在线实例
可以使用 get() 方法获取 Map 中键的值:
fruits.get("apples");
运行实例 »点击 "运行实例" 按钮查看在线实例
可以使用 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);
运行实例 »点击 "运行实例" 按钮查看在线实例
size 属性返回 Map 中元素的数量:
fruits.size;运行实例 »
点击 "运行实例" 按钮查看在线实例
delete() 方法移除 Map 中的一个元素:
fruits.delete("apples");
运行实例 »点击 "运行实例" 按钮查看在线实例
clear() 方法移除 Map 中的所有元素:
fruits.clear();运行实例 »
点击 "运行实例" 按钮查看在线实例
如果 Map 中存在某个键,has() 方法返回 true:
fruits.has("apples");
运行实例 »点击 "运行实例" 按钮查看在线实例
尝试以下代码:
fruits.delete("apples");
fruits.has("apples");
运行实例 »点击 "运行实例" 按钮查看在线实例
forEach() 方法为 Map 中的每个键值对调用回调函数:
// 列出所有条目
let text = "";
fruits.forEach(function(value, key) {
text += key + ' = ' + value;
});
运行实例 »点击 "运行实例" 按钮查看在线实例
entries() 方法返回一个包含 Map 中 [key, value] 对的迭代器对象:
// 列出所有条目
let text = "";
for (const x of fruits.entries()) {
text += x;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
keys() 方法返回一个包含 Map 中键的迭代器对象:
// 列出所有键
let text = "";
for (const x of fruits.keys()) {
text += x;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
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
运行实例 »点击 "运行实例" 按钮查看在线实例
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 月起,新浏览器均支持该特性:
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 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() 将元素分组到 JavaScript 对象中。
Map.groupBy() 将元素分组到 Map 对象中。
如需完整参考,请访问我们的:JavaScript Map 参考手册。
该手册包含所有 Map 属性和方法的描述和实例。
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.2万人学习
共49课时
77万人学习
共29课时
61.7万人学习
共25课时
39.3万人学习
共43课时
70.9万人学习
共25课时
61.6万人学习
共22课时
23万人学习
共28课时
33.9万人学习
共89课时
125万人学习