JavaScript中巧用for…of循环遍历数组并获取索引的两种实用方法

在JavaScript编程中，遍历数组时，开发者常常需要同时获取元素的值及其对应的索引。虽然传统的for循环可以直接通过索引来访问数组元素，但在ES6引入了迭代器之后，for...of循环以其简洁易读的语法受到了广大开发者的喜爱。然而，for...of循环本身并不直接提供当前索引信息。本文将通过CSDN博主的一篇分享，介绍两种借助现代JavaScript特性，在使用for...of循环遍历数组时获取索引的方法。

方法一：利用数组实例的entries()方法

在JavaScript标准中，数组对象有一个内置的entries()方法，它可以返回一个新的迭代器，该迭代器每次迭代都会产生一个包含两个元素的数组，即当前索引和对应值。示例代码如下：

let arr = ['a', 'b', 'c'];
​
for (let [index, item] of arr.entries()) {
  console.log(index, item);
}
​
// 输出结果：
// 0 "a"
// 1 "b"
// 2 "c"

通过这种方式，我们可以轻松地在for...of循环中同时获取数组元素的索引和值。

方法二：借助Map对象间接转换

由于for...of循环无法直接得到索引，我们可以先将数组转换为Map对象，然后再进行遍历。Map对象的迭代器会返回一对键值对，其中键恰好就是数组元素的索引。以下是如何通过Map实现这一目的：

let arr = ['a', 'b', 'c'];
​
for (let [index, item] of new Map(arr.map((item, index) => [index, item]))) {
  console.log(index, item);
}
​
// 输出结果依然为：
// 0 "a"
// 1 "b"
// 2 "c"

上述代码首先通过arr.map()方法创建了一个新的数组，其中每个元素都是一个包含索引和原始值的数组，然后将这个新数组传递给Map构造函数，构建出一个Map对象。最后，for...of循环遍历Map对象时，即可获得每个元素的索引与值。

总结起来，在处理JavaScript数组时，尽管for...of循环本身不直接暴露索引信息，但我们完全可以通过entries()方法或者Map映射巧妙地结合使用，从而实现在遍历时既能获取元素值又能获取其索引的目的。这两种方法既实用又符合现代JavaScript编程风格，值得在日常开发中借鉴。