JavaScript 数组 keys values entries 迭代器的用法

JavaScript数组的keys()、values()、entries()均返回惰性迭代器，按插入顺序产出索引、值或[index, value]对，不可重用且无数组方法；keys()适用于索引操作，values()专注值处理，entries()支持解构遍历与结构化处理。

JavaScript 数组的 keys()、values() 和 entries() 都返回**惰性迭代器（Iterator）**，不是数组，不立即执行，也不自动转换为数组——它们按插入顺序产出内容，适合按需遍历、节省内存，尤其在处理大数组或需要精细控制流程时更高效。

keys()：只遍历索引

返回一个产出数组索引（0, 1, 2…）的迭代器，适用于仅需位置信息的场景，比如批量设置 DOM 属性、生成序号、或做索引相关逻辑判断。

• 直接用 for...of： for (const i of arr.keys()) { console.log(i); }
• 转成数组再操作： Array.from(arr.keys()).filter(i => i % 2 === 0)（取偶数索引）
• 注意：稀疏数组中，keys() 仍会产出所有索引（包括空位对应的索引），不会跳过

values()：专注元素值本身

返回一个产出数组每个元素值的迭代器，避免了手动通过索引取值（arr[i]），语义清晰，且返回的是原值引用（对象/函数类型不变）。

• 配合 for...of 渲染或校验：for (const val of arr.values()) { if (!val) throw new Error("空值不允许"); }
• 转数组后统计：const sum = Array.from(arr.values()).reduce((a, b) => a + b, 0)
• 不能反查索引——迭代器只提供值，不带位置信息

entries()：同时拿到索引和值

返回键值对 [index, element] 的迭代器，是数组默认的迭代方式（arr[Symbol.iterator] === arr.entries()），适合需要“边读边改”或结构化处理的场景。

立即学习“Java免费学习笔记（深入）”；

• 解构遍历最常用：for (const [i, val] of arr.entries()) { console.log(`${i}: ${val}`); }
• 转数组便于后续映射：Array.from(arr.entries()).map(([i, v]) => ({ id: i, data: v }))
• 比分别调用 keys() 和 values() 更高效——一次遍历完成配对，避免两次独立迭代的顺序风险

通用注意事项

三者返回的都是单次可用的惰性迭代器，不具备数组方法（如 map、filter、length），也不能重用：

• 已遍历完的迭代器再次调用 next() 始终返回 { done: true }
• 想多次使用，必须重新调用 arr.keys() 等获取新迭代器
• 若需链式操作，先用 Array.from() 或扩展运算符转成数组：[...arr.values()]
• 浏览器兼容性良好（Chrome 66+、Firefox 60+、Safari 12.1+），IE 不支持