JS循环及跳出循环总结

前言

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