天下无坑

天下无坑


for系列循环方法

<p>在es5中for循环包含了基础for循环,for-in,for-each</p> <h4>基础for循环</h4> <pre><code class="language-javascript">var arr = [1,2,3]; for(var i = 0;i&lt;arr.length;i++){ console.log(i); console.log(arr[i]); }</code></pre> <p>用于数组遍历,书写比较麻烦</p> <h4>forEach</h4> <p><code>forEach 不能 break 和 return</code></p> <pre><code class="language-javascript">const arr = [1, 2, 3]; arr.forEach((data,index,array) =&gt; { console.log(data); });</code></pre> <h4>for-in</h4> <pre><code class="language-javascript">//遍历数组 var array = [1,2,3,4,5]; for(let index in array){ console.log(array[index]);//index为索引 } //遍历对象 var object = {a:1,b:2,c:3,d:4}; for(let k in object){ console.log(object[k]);//k键名 } </code></pre> <p>for-in 缺点更加明显,它不仅遍历数组中的元素,还会遍历自定义的属性,甚至原型链上的属性都被访问到。而且,遍历数组元素的顺序可能是随机的。 for in <strong>循环中支持break</strong>,<strong>continue</strong>,不支持<strong>return</strong> 效率极低,为其他循环的1/7,<strong>不建议用于数组array类型</strong></p> <h4>for-of</h4> <pre><code class="language-javascript">const arr = ['a','b','c']; for(let value of arr) { console.log(value);//Value为键值 } //结合entries(),同时得到索引值 const arr = ['a','b','c']; for (let [index, value] of arr.entries()) { console.log(index, value); }</code></pre> <p>总结一下,for-of 循环有以下几个特征:</p> <p>这是最简洁、最直接的遍历数组元素的语法。 这个方法避开了 for-in 循环的所有缺陷。 与 forEach 不同的是,它<strong>可以正确响应 break、continue 和 return 语句</strong>。 其不仅可以遍历数组,还可以遍历类数组对象和其他可迭代对象。</p>

页面列表

ITEM_HTML