导航
×
   ❮   
HTML CSS JavaScript PHP Go ECMS

JavaScript 教程

JS 简介 JS 如何使用 JS 输出 JS 语法 JS 语句 JS 注释 JS 变量 JS 运算符 JS 条件语句 JS 循环 JS 字符串 JS 数字 JS 函数 JS 对象 JS 日期 JS 数组 JS 类型化数组 JS 集合 JS Map 映射 JS Math JS 正则表达式 JS 数据类型 JS 错误 JS 事件 JS 编程 JS 关键字参考 JS 保留关键字参考 JS 运算符参考 JS 运算符优先级 JS UTF-8 字符 JS UTF-8 符号 JS UTF-8 表情符号 JS 版本

JavaScript Map 方法


new Map() 方法

您可以通过将数组传递给 new Map() 构造函数来创建映射:

示例

// 创建一个映射
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);
亲自试一试 »

Map.get()

您可以使用 get() 方法获取映射中键的值。

示例

fruits.get("apples");
亲自试一试 »

Map.set()

您可以使用 set() 方法向地图添加元素:

示例

// 创建一个 Map
const fruits = new Map();

// 设置 Map 值
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);
亲自试一试 »

set() 方法也可用于更改现有映射值:

示例

fruits.set("apples", 500);
亲自试一试 »

Map.size

size 属性返回映射中的元素数量:

示例

fruits.size;
亲自试一试 »

Map.delete()

delete() 方法用于删除地图元素:

示例

fruits.delete("apples");
亲自试一试 »

Map.clear()

clear() 方法会移除映射表中的所有元素:

示例

fruits.clear();
亲自试一试 »

Map.has()

has() 方法会在映射中存在某个键时返回 true:

示例

fruits.has("apples");
亲自试一试 »

试试这个:

fruits.delete("apples");
fruits.has("apples");
亲自试一试 »

Map.forEach()

forEach() 方法会为映射中的每个键/值对调用一个回调函数:

示例

// 列出所有条目
let text = "";
fruits.forEach (function(value, key) {
  text += key + ' = ' + value;
})
亲自试一试 »

Map.entries()

entries() 方法返回一个迭代器对象,其中包含一个映射表,该映射表包含 [key,values]:

示例

// 列出所有条目
let text = "";
for (const x of fruits.entries()) {
  text += x;
}
亲自试一试 »

Map.keys()

keys() 方法返回一个迭代器对象,其中包含映射中的键:

示例

// 列出所有键
let text = "";
for (const x of fruits.keys()) {
  text += x;
}
亲自试一试 »

Map.values()

values() 方法返回一个迭代器对象,其中包含映射中的值:

示例

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

您可以使用 values() 方法对映射中的值求和:

示例

// 对所有值求和
let total = 0;
for (const x of fruits.values()) {
  total += x;
}
亲自试一试 »

对象作为 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"):

示例

fruits.get("apples");  // Returns 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 月起,新版浏览器支持 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 对象中。


freew3c.com 中文网是独立运营的中文开发者学习平台,与 freew3c.com 无关联。提供的内容仅用于学习和测试,不保证内容的正确性。


Copyright @2020-2026 京ICP备888888号-8