本文比较并总结遍历数组的四种方式：

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">for (let index=0; index  {   console.log(elem, index); }); </pre>

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">for (const elem of someArray) {   console.log(elem); } </pre>

  for-of 通常是最佳选择。我们会明白原因。

  for 循环 [ES1]

  JavaScript 中的 for 循环很古老，它在 ECMAScript 1 中就已经存在了。for 循环记录 arr 每个元素的索引和值：

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">const arr = ['a', 'b', 'c']; arr.prop = 'property value'; for (let index=0; index  {   console.log(elem, index); }); // Output: // 'a', 0 // 'b', 1 // 'c', 2 </pre>

  这种方法确实很方便：它使我们无需执行大量操作就能够可访问数组元素和索引。如果用箭头函数（在ES6中引入）的话js有哪些循环，在语法上会更加优雅。

  .forEach() 的主要缺点是：

  中止 .forEach() 的解决方法

  如果想要中止 .forEach() 之类的循环，有一种解决方法：.some() 还会循环遍历所有数组元素，并在其回调返回真值时停止。

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">const arr = ['red', 'green', 'blue']; arr.some((elem, index) => {   if (index >= 2) {     return true; // 中止循环   }   console.log(elem);   //此回调隐式返回 undefined，这   //是一个伪值。 因此，循环继续。 }); // Output: // 'red' // 'green' </pre>

  可以说这是对 .some() 的滥用，与 for-of 和 break 比起来，要理解这段代码并不容易。

  for-of 循环 [ES6]

  for-of 循环在 ECMAScript 6 开始支持：

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">const arr = ['a', 'b', 'c']; arr.prop = 'property value'; for (const elem of arr) {   console.log(elem); } // Output: // 'a' // 'b' // 'c' </pre>

  for-of 在循环遍历数组时非常有效：

  甚至可以将 break 和 continue 用于外部作用域。

  for-of 和可迭代对象

  for-of 不仅可以遍历数组js有哪些循环，还可以遍历可迭代对象，例如遍历 Map：

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">const myMap = new Map()   .set(false, 'no')   .set(true, 'yes') ; for (const [key, value] of myMap) {   console.log(key, value); } // Output: // false, 'no' // true, 'yes' </pre>

  遍历 myMap 会生成 [键，值] 对，可以通过对其进行解构来直接访问每一对数据。

  for-of 和数组索引

  数组方法 .entries() 返回一个可迭代的 [index，value] 对。如果使用 for-of 并使用此方法进行解构，可以很方便地访问数组索引：

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">const arr = ['chocolate', 'vanilla', 'strawberry']; for (const [index, elem] of arr.entries()) {   console.log(index, elem); } // Output: // 0, 'chocolate' // 1, 'vanilla' // 2, 'strawberry' </pre>

  总结

  for-of 循环的的可用性比 for，for-in 和 .forEach() 更好。

  通常四种循环机制之间的性能差异应该是无关紧要。如果你要做一些运算量很大的事，还是切换到 WebAssembly 更好一些。

  强力推荐前端面试刷题神器

  精彩文章回顾,点击直达