JS教程 JS版本 JS对象 JS函数 JS类 JS Async JS HTML DOM JS Browser BOM JS Web API JS AJAX JS JSON JS vs jQuery JS图形 JS参考手册

简介使用输出语句语法注释变量 Let Const 运算符算数赋值数据类型函数对象事件字符串字符串方法字符串搜索字符串模板数字 BigInt 数字方法数字属性数组数组方法数组搜索数组排序数组迭代数组 Const 日期日期格式日期获取方法日期设置方法数学随机逻辑比较条件 Switch Loop For Loop For In Loop For Of Loop While Break 可迭代对象 Set Set 方法 Map Map 方法 typeof 类型转换解构位运算正则表达式运算符优先级异常作用域 Hoisting 严格模式 this 关键词箭头函数类模块 JSON 调试样式指南最佳实践错误性能保留词 JS 版本 JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS 2019 JS 2020 JS 2021 JS 2022 JS 2023 JS 2024 JS IE / Edge JS 历史对象定义对象属性对象方法对象显示对象访问器对象构造器对象原型对象引用函数定义函数参数函数调用函数 Call 函数 Apply 函数绑定闭包类简介类继承 Static 回调异步 Promise Async DOM 简介 DOM 方法 DOM 文档 DOM 元素 DOM HTML DOM 表单 DOM CSS DOM 动画 DOM 事件 DOM 事件监听程序 DOM 导航 DOM 节点 DOM 集合 DOM 节点列表 Window Screen Location History Navigator 弹出框 Timing Cookies Web API 简介 Web Form API Web History API Web Storage API Web Worker API Web Fetch API Web Geolocation API AJAX 简介 AJAX XMLHttp AJAX 请求 AJAX 响应 AJAX XML 文件 AJAX PHP AJAX ASP AJAX 数据库 AJAX 应用程序 AJAX 实例 JSON 简介 JSON 语法 JSON vs XML JSON 数据类型 JSON 解析 JSON 字符串化 JSON 对象 JSON 数组 JSON 服务器 JSON PHP JSON HTML JSON JSONP jQuery 选择器 jQuery HTML jQuery CSS jQuery DOM 图形 Canvas Plotly.js Chart 谷歌图表 D3.js 参考手册（类别排序）参考手册（字母排序）

JS教程

JS版本

JS 版本 JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS 2019 JS 2020 JS 2021 JS 2022 JS 2023 JS 2024 JS IE / Edge JS 历史

JS对象

对象定义对象属性对象方法对象显示对象访问器对象构造器对象原型对象引用

JS函数

函数定义函数参数函数调用函数 Call 函数 Apply 函数绑定闭包

JS类

类简介类继承 Static

JS Async

回调异步 Promise Async

JS HTML DOM

DOM 简介 DOM 方法 DOM 文档 DOM 元素 DOM HTML DOM 表单 DOM CSS DOM 动画 DOM 事件 DOM 事件监听程序 DOM 导航 DOM 节点 DOM 集合 DOM 节点列表

JS Browser BOM

Window Screen Location History Navigator 弹出框 Timing Cookies

JS Web API

Web API 简介 Web Form API Web History API Web Storage API Web Worker API Web Fetch API Web Geolocation API

JS AJAX

AJAX 简介 AJAX XMLHttp AJAX 请求 AJAX 响应 AJAX XML 文件 AJAX PHP AJAX ASP AJAX 数据库 AJAX 应用程序 AJAX 实例

JS JSON

JSON 简介 JSON 语法 JSON vs XML JSON 数据类型 JSON 解析 JSON 字符串化 JSON 对象 JSON 数组 JSON 服务器 JSON PHP JSON HTML JSON JSONP

JS vs jQuery

jQuery 选择器 jQuery HTML jQuery CSS jQuery DOM

JS图形

图形 Canvas Plotly.js Chart 谷歌图表 D3.js

JS参考手册

参考手册（类别排序）参考手册（字母排序）

JavaScript

更新时间2025-08-07

Map typeof

new Map() 方法

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

实例

// 创建一个 Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

运行实例 »

点击 "运行实例" 按钮查看在线实例

Map.get()

可以使用 get() 方法获取 Map 中键的值：

实例

fruits.get("apples");

运行实例 »

点击 "运行实例" 按钮查看在线实例

Map.set()

可以使用 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);

运行实例 »

点击 "运行实例" 按钮查看在线实例

Map.size

size 属性返回 Map 中元素的数量：

实例

fruits.size;

运行实例 »

点击 "运行实例" 按钮查看在线实例

Map.delete()

delete() 方法移除 Map 中的一个元素：

实例

fruits.delete("apples");

运行实例 »

点击 "运行实例" 按钮查看在线实例

Map.clear()

clear() 方法移除 Map 中的所有元素：

实例

fruits.clear();

运行实例 »

点击 "运行实例" 按钮查看在线实例

Map.has()

如果 Map 中存在某个键，has() 方法返回 true：

实例

fruits.has("apples");

运行实例 »

点击 "运行实例" 按钮查看在线实例

尝试以下代码：

fruits.delete("apples");
fruits.has("apples");

运行实例 »

点击 "运行实例" 按钮查看在线实例

Map.forEach()

forEach() 方法为 Map 中的每个键值对调用回调函数：

实例

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

运行实例 »

点击 "运行实例" 按钮查看在线实例

Map.entries()

entries() 方法返回一个包含 Map 中 [key, value] 对的迭代器对象：

实例

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

运行实例 »

点击 "运行实例" 按钮查看在线实例

Map.keys()

keys() 方法返回一个包含 Map 中键的迭代器对象：

实例

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

运行实例 »

点击 "运行实例" 按钮查看在线实例

Map.values()

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

运行实例 »

点击 "运行实例" 按钮查看在线实例

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);

运行实例 »

点击 "运行实例" 按钮查看在线实例