警告: 问题仍然适用于循环的for…不要使用for…in来迭代数组,而是使用它来迭代 对象的属性。也就是说,这个


我知道JavaScript语法中的基本for是这样的:

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

但是我如何得到循环计数器/索引?

我知道我可能会这样做:

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遍历属性名,而不是值,并且以未指定的顺序执行(是的,即使在ES6之后)。你不应该用它来遍历数组。对于它们,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。条目,现在支持跨当前浏览器版本:

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

如果您在枚举属性时确实是指…,那么您将需要一个额外的计数器。种(obj)。forEach可以工作,但它只包括自己的属性;in包含原型链上任意位置的可枚举属性。

其他回答

rushUp给出的答案是正确的,但这将更方便

for (let [index, val] of array.entries() || []) {
   // your code goes here    
}

这里有一个函数eachWithIndex,它适用于任何可迭代的对象。

你也可以写一个类似的函数eachWithKey来处理使用for…in的对象。

// example generator (returns an iterator that can only be iterated once)
function* eachFromTo(start, end) { for (let i = start; i <= end; i++) yield i }

// convers an iterable to an array (potential infinite loop)
function eachToArray(iterable) {
    const result = []
    for (const val of iterable) result.push(val)
    return result
}

// yields every value and index of an iterable (array, generator, ...)
function* eachWithIndex(iterable) {
    const shared = new Array(2)
    shared[1] = 0
    for (shared[0] of iterable) {
        yield shared
        shared[1]++
    }
}

console.log('iterate values and indexes from a generator')
for (const [val, i] of eachWithIndex(eachFromTo(10, 13))) console.log(val, i)

console.log('create an array')
const anArray = eachToArray(eachFromTo(10, 13))
console.log(anArray)

console.log('iterate values and indexes from an array')
for (const [val, i] of eachWithIndex(anArray)) console.log(val, i)

生成器的好处是它们很懒惰,可以将另一个生成器的结果作为参数。

for…in遍历属性名,而不是值,并且以未指定的顺序执行(是的,即使在ES6之后)。你不应该用它来遍历数组。对于它们,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。条目,现在支持跨当前浏览器版本:

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

如果您在枚举属性时确实是指…,那么您将需要一个额外的计数器。种(obj)。forEach可以工作,但它只包括自己的属性;in包含原型链上任意位置的可枚举属性。

// this loop is used in advanced javascript
//For Example I have an array:
let array = [1,2,3,4,5];
1) for(let key in array){
      console.log(key);//this shows index of array {Result: 0,1,2,3,4}
      console.log(array[key]);//this show values of array {Result: 1,2,3,4,5}
   }
//Hopefully, You will quickly understand;

For-in-loops遍历对象的属性。不要将它们用于数组,即使它们有时有效。

对象属性没有索引,它们都是相等的,不需要按确定的顺序遍历。如果想对属性进行计数,则必须设置额外的计数器(就像在第一个示例中所做的那样)。

循环数组:

var a = [];
for (var i=0; i<a.length; i++) {
    i // is the index
    a[i] // is the item
}

遍历对象:

var o = {};
for (var prop in o) {
    prop // is the property name
    o[prop] // is the property value - the item
}