跳转到主内容
websoft网络软件专家 - 深耕网络技术，打造实用软件！
📁 网站地图

如何用 Array.prototype.entries 配合 for...of 在遍历数组的同时获取索引和值

陆砚码
陆砚码
• 👁 2人浏览过
entries() 返回一个数组迭代器对象，每次调用 next() 产出形如 [index, value] 的二元数组，支持 for...of 遍历，不可直接解构为对象。 entries() 返回的是什么类型的迭代器
Array.prototype.entries()
返回一个数组迭代器对象，每次调用
next()
会产出一个长度为 2 的数组：索引在前，值在后，即
[index, value]
。它不是直接返回对象，也不是返回
Map
或
Set
，所以不能直接解构为
{ index, value }
—— 这是常见误解的源头。 实际使用中，
for...of
会自动调用该迭代器的
next()
方法，因此你只需关注每次循环拿到的这个二元数组怎么拆。 for...of 中正确解构 entries() 的写法 必须用数组解构语法，且顺序固定：第一个元素是索引，第二个是值。不能写成
let {0: i, 1: v} of arr.entries()
，也不推荐用
let [i, v] = entry
再单独声明——那样多写一行，还容易漏掉
const
声明。 ✅ 正确：
for (const [i, v] of arr.entries()) { ... }
❌ 错误：
for (const {index, value} of arr.entries()) { ... }
（entries 不产出对象） ⚠️ 低效：
for (const entry of arr.entries()) { const [i, v] = entry; ... }
（冗余解构） 示例：
const arr = ['a', 'b', 'c']; for (const [i, v] of arr.entries()) { console.log(i, v); // 0 'a' → 1 'b' → 2 'c' }
和 for...in、传统 for 循环比有什么区别
for...in
遍历的是对象的可枚举属性名（包括原型链上新增的），对数组会把索引当字符串处理，还可能遍历到非数字属性；传统
for (let i = 0; i 虽然可控，但要手动维护索引变量、处理边界、无法天然支持 break
/
continue
在迭代器层面的中断语义。
arr.entries()
只产出数组自有、按序排列的索引-值对，不污染、不越界、不跳过空位（稀疏数组中，
undefined
仍会产出对应索引） 它返回的迭代器可被多次消费（只要没耗尽），而
for...of
每次都是新迭代 性能上略低于传统
for
，但在绝大多数业务场景中差异可忽略；若真卡在循环性能上，说明逻辑本身更值得优化 遇到空位或 undefined 元素时的行为 ES6 数组的“空位”（holes）和显式存入
undefined
是两回事。
entries()
对两者都产出索引，但值不同：
const a = [, , 3];
→
entries()
产出
[0, empty]
、
[1, empty]
、
[2, 3]
（注意：
empty
不是
undefined
，是真正缺失）
const b = [undefined, undefined, 3];
→ 产出
[0, undefined]
、
[1, undefined]
、
[2, 3]
在
for...of
中，
empty
位置解构出的
v
是
undefined
，但你无法通过
v === undefined
准确区分它是空位还是存的
undefined
。需要判断空位得用
arr.hasOwnProperty(i)
或
Object.hasOwn(arr, i)
。 真正要注意的，是别把
entries()
当成万能索引工具——它只适合标准数组；TypedArray、类数组对象、NodeList 等需先转成真数组或用其他方式获取索引。

相关文章