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|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|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|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|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>


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|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|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>


<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

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

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

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

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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