在for-of循环中访问ES6数组元素索引


Answers:


347

用途Array.prototype.keys

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

如果您要访问这两个键和值,可以使用Array.prototype.entries()解构

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


64
万一有人怀疑,我用进行了测试for-of.entries()它的速度是的两倍.forEach()jsperf.com/for-of-vs-foreach-with-index

1
@ K48很高兴知道,如果您想在es中拥有最快的速度,请使用“反向for循环”:令人难以置信的
web.com/blog/…– nimo23

3
不幸的是,我需要从嵌套循环内部屈服。不能使用forEach,因为该函数会为yield关键字创建范围问题。但是我需要为我的用例访问索引,所以... ;;我想这是基本的旧循环。
凯尔·贝克

2
@KyleBaker和for-of循环有.entires()什么问题?
米哈尔Perłakowski

1
相反,您可以缓存长度jsperf.com/reverse-loop-vs-cache。当您能够处理流而无需在RAM中创建大数组时,对于迭代处理很有用。循环速度不会成为瓶颈,因为在这种情况下,您将具有I / O延迟。
x'ES

289

Array#entries 如果同时需要返回索引和值:

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

}

3
使用TypeScript:“ TS2495:IterableIterator类型不是数组类型或字符串类型”。似乎这样的问题将得到解决:github.com/Microsoft/TypeScript/pull/12346
Johannes

2
另外不支持Internet Explorer。
Sammi

1
不太好。引发错误,例如,使用document.styleSheets[0].cssRules.entries()甚至document.styleSheets.entries()其他许多DOM可迭代结构,甚至可能引发错误。还是要用_.forEach()来自lodash
史蒂芬Pribilinskiy

2
@Steven:如果不需要索引,就可以做for (var value of document.styleSheets) {}。如果确实需要的指数,你可以先在值通过转换成数组Array.fromfor (let [index, value] of Array.from(document.styleSheets)) {}
Felix Kling

1
真好!Array.from是FTW
Steven Pribilinskiy

28

在这个华丽的新本地函数世界中,有时我们会忘记基础知识。

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

干净,高效,您仍然可以break循环。奖金!您也可以从头开始,然后向后退i--

补充说明:如果您在循环中经常使用该值,则不妨const value = arr[i];在循环的顶部进行操作,以获取易于阅读的参考。


1
是的 好人,清晰简单。哦,那样,您就有了一种非常简单的方法来访问数组的键/索引。
合并

2
顺便说一句,条件应该看起来像这样-> for(let i = 0; i <arr.length; i ++)不带(-1),否则它将不会遍历数组的所有元素。
合并

1
@组合好抓住!我已更新我的答案以反映您的笔记。
克里斯(Chris)

4
你仍然可以breakfor-offor (let [index, value] of array.entries())是更容易阅读。向后倒退就像添加一样容易.reverse()
Nigel B. Peck '18

2
我认为这是一个完全可以接受的答案。永远不会是公认的答案,但它已经帮助数十个人或更多搜索此问题的人。这就是SO的目的。
Danoram

3

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

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

    element.innerHTML = '#' + index

}

是的,这是可行的,而@Steven Pribilinskiy上面提到的其他方法,其他DOM方法都会返回没有方法的对象entries
matanster

3

在一个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);
}


3

如果需要索引,也可以自己处理索引,如果需要,则索引将不起作用。

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

  i++;
}

0

对于那些使用的对象来说,它们不是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))

0

es6 for...in

for(const index in [15, 64, 78]) {                        
    console.log(index);
}

5
问题是问一个for...of循环而不是for...in
亚伯拉罕·埃尔南德斯

3
for...in是原始ECMAScript规范(即“ es1”)的一部分。另外,请注意,这for...in是为了遍历对象属性。尽管它可以遍历数组,但可能未按预期顺序进行。查看MDN文档
-Boaz

0

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

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


-6
var fruits = ["apple","pear","peach"];
for (fruit of fruits) {
    console.log(fruits.indexOf(fruit));
    //it shows the index of every fruit from fruits
}

for循环遍历数组,而indexof属性采用与数组匹配的索引值。PD此方法在数字上存在一些缺陷,因此请使用水果


2
这需要O(n ^ 2)时间。
哈里

3
在性能不重要的情况下,当有重复的水果时,这仍然不能给出所有正确的指标。例如,对于["apple", "apple", "pear"]给定的索引是0, 0, 2而不是0, 1, 2
trichoplax
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.