在 JavaScript 中使用 for...of 语法获取循环计数器索引

发布于04月17日

注意:

question still applies to for…of loops.> Don't use for…in to iterate over an Array, use it to iterate over the properties of an object. That said, this

我知道JavaScript中的基本for…in语法如下所示:

for (var obj in myArray) {
    // ...
}

但是我怎么才能得到counter/index圈呢？

我知道我可能会这样做:

var i = 0;
for (var obj in myArray) {
    alert(i)
    i++
}

甚至是善良的老人:

for (var i = 0; i < myArray.length; i++) {
    var obj = myArray[i]
    alert(i)
}

但我宁愿使用更简单的for-in循环.我觉得它们看起来更好，更有意义.

有没有更简单或更优雅的方式？

在Python中，这很简单:

for i, obj in enumerate(myArray):
    print i

推荐答案

for…in迭代属性名，而不是值，这样做in an unspecified order次(是的，即使在ES6之后).你不应该用它来迭代array.对于他们来说，ES5的forEach方法将值和索引传递给给定的函数:

var myArray = [123, 15, 187, 32];

myArray.forEach(function (value, i) {
    console.log('%d: %s', i, value);
});

// Outputs:
// 0: 123
// 1: 15
// 2: 187
// 3: 32

或者ES6的Array.prototype.entries，它现在支持所有当前浏览器版本:

for (const [i, value] of myArray.entries()) {
    console.log('%d: %s', i, value);
}

但是，对于一般的迭代程序(您将使用for…of循环而不是for…in循环)，没有内置的东西:

function* enumerate(iterable) {
    let i = 0;

    for (const x of iterable) {
        yield [i, x];
        i++;
    }
}

for (const [i, obj] of enumerate(myArray)) {
    console.log(i, obj);
}

demo

如果您实际上指的是for…in-枚举属性-您将需要一个额外的计数器.Object.keys(obj).forEach可以工作，但它只包括own个属性；for…in包括原型链上任何位置的可枚举属性.