blocks|key|4446665|text|使用Array.prototype.keys|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4446666|​|4446667|for+(const+index+of+[1,+2,+3,+4,+5].keys())+{
++console.log(index);
}|code-block|syntax|javascript|4446668|4446669|如果要同时访问键和值，则可以结合使用Array.prototype.entries()和destructuring|4446670|4446671|for+(const+[index,+value]+of+[1,+2,+3,+4,+5].entries())+{
++console.log(index,+value);
}|4446672|4446673|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/keys|1|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/entries|2|https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment^0|2|K|2|K|0|0|0|0|0|I|P|I|P|1|18|D|2|0|0|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@$9|16|A|17|B|C]]|D|@$9|18|A|19|1|1A]]|E|$]]|$1|F|3|G|5|6|7|1B|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1C|8|@]|D|@]|E|$K|L]]|$1|M|3|G|5|6|7|1D|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|1E|8|@$9|1F|A|1G|B|C]]|D|@$9|1H|A|1I|1|1J]|$9|1K|A|1L|1|1M]]|E|$]]|$1|P|3|G|5|6|7|1N|8|@]|D|@]|E|$]]|$1|Q|3|R|5|J|7|1O|8|@]|D|@]|E|$K|L]]|$1|S|3|G|5|6|7|1P|8|@]|D|@]|E|$]]|$1|T|3|-4|5|6|7|1Q|8|@]|D|@]|E|$]]]|U|$V|$5|W|X|Y|E|$Z|10]]|11|$5|W|X|Y|E|$Z|12]]|13|$5|W|X|Y|E|$Z|14]]]]

<p>Use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/keys" rel="noreferrer"><code>Array.prototype.keys</code></a>:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>for (const index of [1, 2, 3, 4, 5].keys()) {
  console.log(index);
}</code></pre>
</div>
</div>
</p>

<p>If you want to access both the key and the value, you can use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/entries" rel="noreferrer"><code>Array.prototype.entries()</code></a> with <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment" rel="noreferrer">destructuring</a>:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>for (const [index, value] of [1, 2, 3, 4, 5].entries()) {
  console.log(index, value);
}</code></pre>
</div>
</div>
</p>


blocks|key|4446537|text|如果需要索引和值，Array#entries会返回这两个值：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4446538|for+(let+[index,+value]+of+array.entries())+{

}|code-block|syntax|javascript|4446539|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/entries^0|9|D|9|D|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@$9|V|A|W|1|X]]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/entries"><code>Array#entries</code></a> returns the index and the value, if you need both:</p>

<pre><code>for (let [index, value] of array.entries()) {

}
</code></pre>


blocks|key|4446608|text|在html/js上下文中，在现代浏览器中，对于数组以外的其他可迭代对象，我们也可以使用Iterable.entries()：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4446609|for(let+[index,+element]+of+document.querySelectorAll('div').entries())+{

++++element.innerHTML+=+'#'+%2B+index

}|code-block|syntax|javascript|4446610|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>in html/js context, on modern browsers, with other iterable objects than Arrays we could also use [Iterable].entries():</p>

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

    element.innerHTML = '#' + index

}
</code></pre>


blocks|key|4446801|text|对于那些使用不是Array对象甚至不是类似数组的对象的人来说，您可以轻松地构建自己的迭代器，这样您仍然可以将for+of用于localStorage等实际上只有length的对象|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4446802|function+indexerator(length)+{
++++var+output+=+new+Object();
++++var+index+=+0;
++++output[Symbol.iterator]+=+function()+{
++++++++return+{next:function()+{
++++++++++++return+(index+<+length)+?+{value:index%2B%2B}+:+{done:true};
++++++++}};
++++};
++++return+output;
}|code-block|syntax|javascript|4446803|然后给它输入一个数字：|4446804|for+(let+index+of+indexerator(localStorage.length))
++++console.log(localStorage.key(index))|4446805|entityMap^0|8|5|1I|6|1Q|C|28|6|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|P|$]]

<p>For those using objects that are not an <code>Array</code> or even array-like, you can build your own iterable easily so you can still use <code>for of</code> for things like <code>localStorage</code> which really only have a <code>length</code>:</p>



<pre class="lang-js prettyprint-override"><code>function indexerator(length) {
    var output = new Object();
    var index = 0;
    output[Symbol.iterator] = function() {
        return {next:function() {
            return (index &lt; length) ? {value:index++} : {done:true};
        }};
    };
    return output;
}
</code></pre>

<p>Then just feed it a number:</p>

<pre class="lang-js prettyprint-override"><code>for (let index of indexerator(localStorage.length))
    console.log(localStorage.key(index))
</code></pre>


blocks|key|4446842|text|在这个华而不实的新原生函数的世界里，我们有时会忘记基础知识。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4446843|for+(let+i+=+0;+i+<+arr.length;+i%2B%2B)+{
++++console.log('index:',+i,+'element:',+arr[i]);
}|code-block|syntax|javascript|4446844|干净，高效，你仍然可以break循环。奖金！您还可以使用i--从头开始并向后返回！|offset|length|style|CODE|4446845|附加说明:如果您在循环中经常使用该值，您可能希望在循环的顶部执行const+value+=+arr[i];，以获得简单、可读的参考。|4446846|entityMap^0|0|0|B|5|S|3|0|W|L|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]|$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@$I|Y|J|Z|K|L]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|P|$]]

<p>In this world of flashy new native functions, we sometimes forget the basics.</p>

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

<p>Clean, efficient, and you can still <code>break</code> the loop. Bonus! You can also start from the end and go backwards with <code>i--</code>!</p>

<p>Additional note: If you're using the value a lot within the loop, you may wish to do <code>const value = arr[i];</code> at the top of the loop for an easy, readable reference.</p>


blocks|key|4446720|text|es6+for...in|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4446721|for(const+index+in+[15,+64,+78])+{++++++++++++++++++++++++
++++console.log(index);
}|code-block|syntax|javascript|4446722|entityMap^0|4|8|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>es6 <code>for...in</code> </p>

<pre><code>for(const index in [15, 64, 78]) {                        
    console.log(index);
}
</code></pre>


blocks|key|4446873|text|另一种方法是使用Array.prototype.forEach()作为|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4446874|​|4446875|Array.from({
++length:+5
},+()+=>+Math.floor(Math.random()+*+5)).forEach((val,+index)+=>+{
++console.log(val,+index)
})|code-block|syntax|javascript|4446876|4446877|entityMap^0|8|P|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|T|8|@]|D|@]|E|$K|L]]|$1|M|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|O|$]]

<p>Another approach could be using <code>Array.prototype.forEach()</code> as</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>Array.from({
  length: 5
}, () =&gt; Math.floor(Math.random() * 5)).forEach((val, index) =&gt; {
  console.log(val, index)
})</code></pre>
</div>
</div>
</p>


blocks|key|4446910|text|你也可以使用JavaScript来解决你的问题|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4446911|​|4446912|iterate(item,+index)+{
++++console.log(`${item}+has+index+${index}`);
++++//Do+what+you+want...
}

readJsonList()+{++++
++++jsonList.forEach(this.iterate);
++++//it+could+be+any+array+list.
}+++|code-block|syntax|javascript|4446913|4446914|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>Also you can use JavaScript to solve your problem</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>iterate(item, index) {
    console.log(`${item} has index ${index}`);
    //Do what you want...
}

readJsonList() {    
    jsonList.forEach(this.iterate);
    //it could be any array list.
}   </code></pre>
</div>
</div>
</p>


blocks|key|4446855|text|只需在循环前创建一个变量并分配一个整数值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4446856|let+index+=+0;|offset|length|style|CODE|4446857|然后使用addition+assignment+operator进入循环作用域|4446858|index+%2B=+1;|4446859|就是这样，看看下面的代码片段示例。|4446860|​|4446861|let+index+=+0;
for+(const+j+of+[1,+2,+3,+4,+5])+{
++index+%2B=+1;
++console.log('index+',index);
}|code-block|syntax|javascript|4446862|4446863|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Addition_assignment^0|0|0|E|0|4|S|0|0|0|B|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|14|8|@$D|15|E|16|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|17|8|@]|9|@$D|18|E|19|1|1A]]|A|$]]|$1|J|3|K|5|6|7|1B|8|@$D|1C|E|1D|F|G]]|9|@]|A|$]]|$1|L|3|M|5|6|7|1E|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1F|8|@]|9|@]|A|$]]|$1|P|3|Q|5|R|7|1G|8|@]|9|@]|A|$S|T]]|$1|U|3|O|5|6|7|1H|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]]|W|$X|$5|Y|Z|10|A|$11|12]]]]

<p>Just create a variable before the loop and assign an integer value.</p>
<p><code>let index = 0;</code></p>
<p>and then use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Addition_assignment" rel="nofollow noreferrer">addition assignment operator</a> into the loop scope</p>
<p><code> index += 1;</code></p>
<p>That's It, check the below snippet example.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>let index = 0;
for (const j of [1, 2, 3, 4, 5]) {
  index += 1;
  console.log('index ',index);
}</code></pre>
</div>
</div>
</p>


<p>We can access array elements using a for-of loop:</p>

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

<p>How can I modify this code to access the current index too? I want to achieve this using for-of syntax, neither forEach nor for-in.</p>


Access to ES6 array element index inside for-of loop

我们可以使用for-of循环访问数组元素：for (const j of [1, 2, 3, 4, 5]) {  console.log(j);}我如何修改这段代码来访问当前的索引？我希望使用for-of语法来实现这一点，而不是使用forEach或for-in。

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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