JavaScript Map 的 values() 方法：从原理到实践
Map 对象在 JavaScript 中是一个非常重要的数据结构，它允许我们存储键值对，并且能够记住键的原始插入顺序。在2026年的今天，它依然是处理复杂数据关系时一个可靠的选择。今天，我们聚焦于它的一个核心方法：values()。
这个方法很简单，但理解其背后的“迭代器”概念，对于写出高效、优雅的代码来说，是必备的一环。
一、values() 方法到底做了什么？
简单说，values() 方返回一个新的 Map 迭代器（Map Iterator） 对象。这个迭代器对象里，包含了 Map 中每一个元素的值（value），并且这些值的顺序，就是它们入 Map 时的顺序。
语法：
map.values()
参数： 无。
返回值： 一个 Map 迭代器（Map Iterator） 对象。
很多刚接触的朋友可能会问，为什么不用 map.forEach 直接遍历？forEach 确实方便，但 values() 返回的迭代器赋予了开发者更多的控制权。比如，你可以随时暂停遍历，或者只取前几个值，这是 forEach 做不到的。对于需要处理大量数据、需要精细控制遍历流程的场景，迭代器是更合适的选择。
二、核心示例：一步步看 values() 如何工作
假设我们正在维护一个“代码号”的课程库，用 Map 来存储课程编号和课程名称。
示例 1：手动迭代获取值
在这个例子中，我们手动调用迭代器的 next() 方法来获取每一个值。这种方式让我们清晰地看到迭代器的内部状态。
<script>
// 创建一个 Map，存储课程信息
let courseMap = new Map();
courseMap.set(101, "JavaScript 核心原理");
courseMap.set(102, "React 组件化开发");
courseMap.set(103, "Vue 3 响应式系统");
// 调用 values() 获取迭代器对象
let valueIterator = courseMap.values();
// 通过 next() 方法逐个获取值
document.writeln(valueIterator.next().value + "<br>"); // 输出：JavaScript 核心原理
document.writeln(valueIterator.next().value + "<br>"); // 输出：React 组件化开发
document.writeln(valueIterator.next().value); // 输出：Vue 3 响应式系统
</script>
输出：
JavaScript 核心原理
React 组件化开发
Vue 3 响应式系统
个人见解： 你可能会觉得这样写代码很“啰嗦”。但在一些复杂的异步流程里，手动控制 next() 的调用时机非常有价值。比如，你需要根据第一个值的结果，来决定是否获取第二个值，这种流程控制是 for...of 或 forEach 很难实现的。
示例 2：结合 for...of 循环更优雅地遍历
大多数情况下，我们并不需要手动调用 next()。我们可以利用 for...of 循环，它内部会自动处理迭代器的工作，让代码更简洁、易读。
<script>
let courseMap = new Map();
courseMap.set(201, "数据结构与算法");
courseMap.set(202, "网络编程实战");
courseMap.set(203, "数据库设计范式");
// 使用 for...of 循环直接遍历 values()
let valueIterator = courseMap.values();
for (let courseName of valueIterator) {
document.writeln(courseName + "<br>");
}
</script>
输出：
数据结构与算法
网络编程实战
数据库设计范式
本节课程知识要点：
-
values()返回迭代器：它返回的不是一个数组，而是一个迭代器（Iterator）对象。 -
插入顺序保证：迭代器遍历值的顺序，严格遵循元素插入 Map 时的顺序。
-
迭代器是一次性的：当迭代器遍历到末尾后，再次调用
next()会返回{value: undefined, done: true}。如果需要重新遍历，必须再次调用map.values()生成新的迭代器。 -
与
keys()和entries()的区别：keys()返回键的迭代器，entries()返回[键， 值]对的迭代器。在需要同时操作键和值时，entries()更常用；当只关心值时，values()是优选。
三、为什么选择 values() 而非其他方式？
在开发中，我们经常需要获取 Map 中的所有值。除了 values()，我们还可以使用展开运算符 [...map.values()] 将其转换为数组，或者使用 Array.from(map.values())。
个人建议：
-
如果你需要对值进行数组操作（如
map、filter、reduce），那么直接使用[...map.values()]将迭代器转换为数组，会是最便捷的路径。 -
如果你只是需要简单地遍历值并执行操作，
for...of配合values()在性能和内存上更优，因为它不会额外创建一个新数组。
let courseMap = new Map();
courseMap.set(301, "前端工程化");
courseMap.set(302, "Node.js 服务端开发");
courseMap.set(303, "Webpack 配置优化");
// 场景1: 需要过滤出包含 'Node' 的课程名
let filteredCourses = [...courseMap.values()].filter(name => name.includes("Node"));
console.log(filteredCourses); // 输出：["Node.js 服务端开发"]
// 场景2: 只是打印所有课程名，直接使用迭代器遍历
for (let name of courseMap.values()) {
console.log(name);
}
values() 方法是 JavaScript 迭代器协议在 Map 上的一个典型应用。理解它，能帮助你更好地掌握这门语言在数据处理上的灵活性和深度。在2026年的前端开发中，对这类基础知识的扎实掌握，依然是写出高质量、可维护代码的关键。
