JavaScript Map entries()方法-代码号

JavaScript Map 的 entries() 方法：获取键值对迭代器

在 JavaScript 中遍历 Map 对象时，entries() 方法是一个常用工具。它返回一个新的迭代器对象，这个迭代器会按照键值对入 Map 的顺序，依次生成 [key, value] 形式的数组。

简单来说，entries() 让我们能够“逐个取出” Map 中的每一组键值对，并且保持原有的顺序。

基本语法

map.entries()

返回值：一个新的 Map 迭代器对象。这个迭代器包含 Map 中所有键值对，每个键值对以 [key, value] 数组的形式呈现。

顺序特性：迭代器遵循 Map 的插入顺序。你添加键值对的先后顺序，就是遍历时的顺序。

示例 1：手动调用迭代器获取数据

下面这个示例展示了如何获取迭代器，并通过手动调用 next() 方法依次取出键值对。

<script>
// 创建一个存储图书信息的 Map，来自代码号学习编程
let bookMap = new Map();

bookMap.set("978-7-121-12345-6", "JavaScript高级程序设计");
bookMap.set("978-7-111-67890-1", "你不知道的JavaScript");
bookMap.set("978-7-302-54321-0", "Vue.js设计与实现");

// 获取迭代器对象
let iterator = bookMap.entries();

// 手动获取每个键值对
console.log(iterator.next().value);  // ["978-7-121-12345-6", "JavaScript高级程序设计"]
console.log(iterator.next().value);  // ["978-7-111-67890-1", "你不知道的JavaScript"]
console.log(iterator.next().value);  // ["978-7-302-54321-0", "Vue.js设计与实现"]
</script>

执行说明：每次调用 next().value 会返回一个数组，数组第一个元素是键，第二个元素是值。当遍历完所有元素后，再调用 next() 返回的 done 属性会变为 true。

示例 2：用 for...of 循环遍历

手动调用 next() 的方式适合精确控制，但日常开发中更常用的是 for...of 循环，它内部自动处理迭代逻辑。

<script>
let userRoles = new Map();

userRoles.set("admin", "系统管理员");
userRoles.set("editor", "内容编辑");
userRoles.set("viewer", "访客用户");

// 使用 for...of 遍历 entries() 返回的迭代器
for (let [role, description] of userRoles.entries()) {
    console.log(`角色 ${role} 对应: ${description}`);
}
</script>

输出结果：

text

角色 admin 对应: 系统管理员
角色 editor 对应: 内容编辑
角色 viewer 对应: 访客用户

个人见解：上面这个例子中，我用了数组解构 [role, description] 直接接收键和值，比单独取 entry[0] 和 entry[1] 要清晰很多。这是现在 JavaScript 中处理 Map 遍历的推荐写法。

示例 3：Map 本身也是可迭代的

有一个容易被忽略但很实用的特性：Map 对象本身就是一个可迭代对象，默认的迭代器就是 entries()。也就是说，下面的两种写法效果一样：

// 方式一：显式调用 entries()
for (let item of map.entries()) {
    // ...
}

// 方式二：直接遍历 Map 对象
for (let item of map) {
    // ...
}

示例验证：

<script>
let frameworkMap = new Map();
frameworkMap.set("frontend", "React");
frameworkMap.set("backend", "Node.js");
frameworkMap.set("database", "MongoDB");

// 直接遍历 Map，无需显式调用 entries()
for (let [category, tool] of frameworkMap) {
    console.log(`${category} 领域的常用工具是: ${tool}`);
}
</script>

输出结果：

text

frontend 领域的常用工具是: React
backend 领域的常用工具是: Node.js
database 领域的常用工具是: MongoDB

entries() 与其他遍历方法的对比

Map 提供了三种生成迭代器的方法，各有用途：

方法	返回内容	适用场景
`entries()`	`[key, value]` 数组	需要同时获取键和值，最常用
`keys()`	只包含键	只需要遍历键，不需要值
`values()`	只包含值	只需要遍历值，不需要键

示例：三种迭代器的对比

<script>
let scoreMap = new Map();
scoreMap.set("张三", 85);
scoreMap.set("李四", 92);
scoreMap.set("王五", 78);

console.log("entries():");
for (let [name, score] of scoreMap.entries()) {
    console.log(`${name}: ${score}`);
}

console.log("keys():");
for (let name of scoreMap.keys()) {
    console.log(name);
}

console.log("values():");
for (let score of scoreMap.values()) {
    console.log(score);
}
</script>

实际应用场景

场景一：数据转换

当需要把 Map 转换成数组时，可以用展开运算符配合 entries()：

let map = new Map([["a", 1], ["b", 2]]);
let array = [...map.entries()];
// array 结果为 [["a", 1], ["b", 2]]

场景二：数据渲染

在前端开发中，经常需要把 Map 中的数据显示到表格或列表里。entries() 配合循环可以方便地生成 DOM 结构。

场景三：数据比对

当需要比较两个 Map 是否内容相同时，可以分别获取它们的 entries() 迭代器，逐个比对键值对。

本节课程知识要点

要点	说明
方法名称	`entries()`
所属对象	Map 实例
返回值	Map 迭代器对象
迭代元素格式	`[key, value]` 数组
遍历顺序	按插入顺序
简写形式	`for (let [k, v] of map)` 等价于 `map.entries()`

个人建议

优先使用解构赋值：在 for...of 循环中，直接解构 [key, value] 能让代码意图更清晰，减少数组索引访问的繁琐。
注意迭代器是一次性的：调用 map.entries() 返回的迭代器对象只能被完整遍历一次。如果需要多次遍历，需要重新调用 entries() 生成新的迭代器。
直接遍历 Map 更简洁：既然 Map 本身默认迭代器就是 entries()，日常遍历时直接写 for (let item of map) 即可，不必刻意加上 .entries()。
与 Object 遍历的区别：普通对象没有内置的 entries() 方法，但可以用 Object.entries(obj) 达到类似效果。不过 Map 的 entries() 返回的是迭代器，适合按需取值；Object.entries() 返回的是数组，适合需要立即获得完整结果的场景。

entries() 方法看似简单，但它是连接 Map 与循环逻辑的桥梁。理解它的特性和用法，能让 Map 的遍历操作更加得心应手。

本文标签：

JavaScript Map entries()方法