348

我们可以使用 for-of 循​​环访问数组元素：

for (const j of [1, 2, 3, 4, 5]) {
  console.log(j);
}

如何修改此代码以访问当前索引？我想使用 for-of 语法来实现这一点，既不是 forEach 也不是 for-in。

4

11 回答 11

519

使用Array.prototype.keys：

for (const index of [1, 2, 3, 4, 5].keys()) {
  console.log(index);
}

如果要同时访问键和值，可以使用Array.prototype.entries()with destructuring：

for (const [index, value] of [1, 2, 3, 4, 5].entries()) {
  console.log(index, value);
}

于 2015-12-18T05:30:55.730 回答
357

Array#entries如果您需要两者，则返回索引和值：

for (let [index, value] of array.entries()) {

}
于 2015-12-18T06:33:21.370 回答
90

在这个华丽的新本机功能的世界中，我们有时会忘记基础知识。

for (let i = 0; i < arr.length; i++) {
    console.log('index:', i, 'element:', arr[i]);
}

干净，高效，而且你仍然可以break循环。奖金！您也可以从头开始并向后退i--！

附加说明：如果您在循环中大量使用该值，您可能希望const value = arr[i];在循环顶部进行操作，以获得简单易读的参考。

于 2018-09-26T00:24:23.070 回答
10

在一个for..of循环中，我们可以通过array.entries(). array.entries返回一个新的 Array 迭代器对象。迭代器对象知道如何从可迭代对象中访问项目，同时跟踪其在该序列中的当前位置。

当在next()迭代器上调用该方法时会生成键值对。在这些键值对中，数组索引是键，数组项是值。

let arr = ['a', 'b', 'c'];
let iterator = arr.entries();
console.log(iterator.next().value); // [0, 'a']
console.log(iterator.next().value); // [1, 'b']

for..of循环基本上是一个结构，它消耗一个可迭代对象并循环遍历所有元素（使用引擎盖下的迭代器）。我们可以将其与array.entries()以下方式结合：

array = ['a', 'b', 'c'];

for (let indexValue of array.entries()) {
  console.log(indexValue);
}


// we can use array destructuring to conveniently
// store the index and value in variables
for (let [index, value] of array.entries()) {
   console.log(index, value);
}

于 2018-09-27T22:28:27.747 回答
7

如果您需要索引，您也可以自己处理索引，如果您需要密钥，它将不起作用。

let i = 0;
for (const item of iterableItems) {
  // do something with index
  console.log(i);

  i++;
}
于 2020-01-27T14:18:39.007 回答
4

另一种方法可以Array.prototype.forEach()用作

Array.from({
  length: 5
}, () => Math.floor(Math.random() * 5)).forEach((val, index) => {
  console.log(val, index)
})

于 2020-01-27T10:56:12.650 回答
4

在 html/js 上下文中，在现代浏览器上，除了数组之外，我们还可以使用其他可迭代对象 [Iterable].entries()：

for(let [index, element] of document.querySelectorAll('div').entries()) {

    element.innerHTML = '#' + index

}
于 2017-12-12T21:15:56.083 回答
2

只需在循环之前创建一个变量并分配一个整数值。

let index = 0;

然后在循环范围内使用加法赋值运算符

index += 1;

就是这样，检查下面的代码片段示例。

let index = 0;
for (const j of [1, 2, 3, 4, 5]) {
  index += 1;
  console.log('index ',index);
}

于 2021-04-01T10:20:45.697 回答
1

对于那些使用不是Array数组甚至不是数组的对象的人，您可以轻松构建自己的可迭代对象，以便您仍然可以将其for of用于localStorage真正只有length:

function indexerator(length) {
    var output = new Object();
    var index = 0;
    output[Symbol.iterator] = function() {
        return {next:function() {
            return (index < length) ? {value:index++} : {done:true};
        }};
    };
    return output;
}

然后给它一个数字：

for (let index of indexerator(localStorage.length))
    console.log(localStorage.key(index))
于 2018-07-12T09:47:43.680 回答
0

es6for...in 

for(const index in [15, 64, 78]) {                        
    console.log(index);
}
于 2019-04-27T15:25:06.500 回答
0

你也可以使用 JavaScript 来解决你的问题

iterate(item, index) {
    console.log(`${item} has index ${index}`);
    //Do what you want...
}

readJsonList() {    
    jsonList.forEach(this.iterate);
    //it could be any array list.
}

于 2020-10-20T23:23:32.473 回答