JS循环及跳出循环总结

Posted 2022-02-06 李公子lm

前言

今天来总结一下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来结束遍历。