JS循环及跳出循环总结

大家好，欢迎来到IT知识分享网。

前言

今天来总结一下JS中循环方法的使用，以及如何跳出循环/遍历。

正文

跳出循环有四种方式

break 用来跳出循环.
continue 跳过当次循环，继续下一次的循环
return 跳出循环，并返回调用函数，之后的代码不在执行。
thorw Error() 用来跳出循环,之后的代码不在执行,需要配合try catch使用

for循环

 TestFor () { 
   
      for (let i = 0; i < 5; i++) { 
   
        console.log(i)
        if (i === 3) { 
   
          break
        }
      }
      console.log('******')
      for (let i = 0; i < 5; i++) { 
   
        if (i === 3) { 
   
          continue
        }
        console.log(i)
      }
      console.log('******')
      for (let i = 0; i < 5; i++) { 
   
        console.log(i)
        if (i === 3) { 
   
          return
        }
      }
    },

结果如下

for in 循环

   TestForIn () { 
   
      let arr = [1, 2, 3, 4, 5]
      for (let i in arr) { 
   
        console.log(arr[i])
        if (arr[i] === 3) { 
   
          break
        }
      }
      console.log('******')
      for (let i in arr) { 
   
        if (arr[i] === 3) { 
   
          continue
        }
        console.log(arr[i])
      }
      console.log('******')
      for (let i in arr) { 
   
        console.log(arr[i])
        if (arr[i] === 3) { 
   
          return
        }
      }
    },

结果如下

for of 循环

 TestForOf () { 
   
      let arr = [1, 2, 3, 4, 5]
      for (let i of arr) { 
   
        if (i === 3) { 
   
          break
        }
        console.log(i)
      }
      console.log('******')
      for (let i of arr) { 
   
        if (i === 3) { 
   
          continue
        }
        console.log(i)
      }
      console.log('******')
      for (let i of arr) { 
   
        console.log(i)
        if (i === 3) { 
   
          return
        }
      }
    },

结果如下

while 循环

TestWhile () { 
   
  let i = 1
    while (i < 6) { 
   
      if (i === 3) { 
   
        break
      }
      console.log(i)
      i++
    }
    console.log('******')
    let j = 1
    while (j < 6) { 
   
      if (j === 3) { 
   
        j++
        continue
      }
      console.log(j)
      j++
    }
    console.log('******')
    while (i < 6) { 
   
      if (i === 3) { 
   
        return
      }
      console.log(i)
      i++
    }
  },

结果如下

do while 循环

  TestDoWhile () { 
   
      let i = 1
      do { 
   
        if (i === 3) { 
   
          break
        }
        console.log(i)
        i++
      }
      while (i < 6)
      console.log('*****')
      let j = 0
      do { 
   
        if (j === 3) { 
   
          j++
          continue
        }
        console.log(j)
        j++
      }
      while (j < 6)
      console.log('*****')
      let m = 1
      do { 
   
        if (m === 3) { 
   
          return
        }
        console.log(m)
        m++
      }
      while (m < 6)
    },

结果如下

foreach 遍历

  TestForEach () { 
   
      var arr = [1, 2, 3, 4, 5]
      arr.forEach(i => { 
   
        console.log(i)
      })
    }

结果如下。

在 forEach中，无法使用break，continue来跳出遍历。原因如下，

因为foreach是异步执行，可能在break之前代码就已经执行完了，那么如何在foreach中跳出遍历呢，看如下代码。

TestForEach () { 
   
      var arr = [1, 2, 3, 4, 5]
      try { 
   
        arr.forEach(i => { 
   
          if (i === 3) { 
   
            throw Error()
          }
          console.log(i)
        })
      } catch (error) { 
   
        console.log(error)
      }
    }

结果如下

在forEach中，无法用break等函数在遍历结束之前结束遍历，如果要提前终止，必须把forEach（）方法放在一个try块中，并能抛出一个异常。如果forEach（）调用的函数抛出foreach.break异常，循环会提前终止。
想跳出循环可以使用every 和 some方法

map 遍历

  TestMap () { 
   
      let arr = [1, 2, 3, 4, 5]
      arr.map(i => { 
   
        console.log(i)
      })
    }

结果如下

map和forEach一样无法通过break跳出循环。

every 遍历

 TestEvery () { 
   
	 let arr = [1, 2, 3, 4, 5]
	   arr.every(i => { 
   
	     console.log(i)
	     return true
	   })
	   console.log('*****')
	   arr.every(i => { 
   
	     console.log(i)
	     if (i === 3) { 
   
	       return false
	     } else { 
   
	       return true
	     }
	   })
	 },

结果如下

every可以通过return的返回bool值，控制是否继续遍历。

some 遍历

  TestSome () { 
   
      let arr = [1, 2, 3, 4, 5]
      arr.some(i => { 
   
        console.log(i)
      })
      console.log('*****')
      arr.some(i => { 
   
        console.log(i)
        if (i === 3) { 
   
          return true
        }
      })
    }

结果如下

some 可以通过控制return true来结束遍历。