js 终止循环 break continue try...catch (throw)

小阿三
475 阅读4分钟

前言

跳出循环分为两种，一种是跳出本次循环，另一种则是跳出整个循环，合理使用循环，终止循环对于程序的性能或多或少有点影响（处理数据量较大时比较明显）。

1. break/continue 适用于for， for...in..., for...of...等循环

break 跳出整个循环
continue 跳出当前循环

break

以for...of...为例

const arr = ['a', 'b', 'c', 'd']
for(const ele of arr) {
  if(ele === 'b') break
  console.log('[output]:', ele)
}

image.png

当第二次循环到‘b’的时候判断成立，break直接跳出整个循环

continue

以for...of...为例

const arr = ['a', 'b', 'c', 'd']
for(const ele of arr) {
  if(ele === 'b') continue
  console.log('[output]:', ele)
}

image.png

当第二次循环到‘b’的时候判断成立，continue直接跳出本次循环

2.try...catch 适用于forEach

try块中包含待测试的代码
throw来抛出一个自定义的异常，只能在try中使用（后面会有解释）
catch处理错误的代码块
try和catch语句是成对出现的

跳出本次循环

return 也可完成对本次循环的跳出，利用return终止当前函数体的执行

const arr = ['a', 'b', 'c', 'd']
arr.forEach((item, index) => {
    try{
        if(index === 2) {
            throw new Error('下标为2,跳出循环')
        }
        console.log('[output]:', item)
    } catch(e) {
        console.log('[forEach-error]', e.message)
    }
})

image.png

当循环到下标为2的时候判断成立，通过throw来抛出一个自定义的异常，直接跳出本次循环

跳出整体循环

在上述示例中，只需要稍加补充，便可完成对整体循环的终止：

const arr = ['a', 'b', 'c', 'd']
arr.forEach((item, index) => {
    try{
        if(index === 2) {
            throw new Error('下标为2,跳出循环')
        }
        console.log('[output]:', item)
    } catch(e) {
        console.log('[forEach-error]', e.message)
        throw e
    }
})

image.png

throw

看到这，可能会有点疑惑🤔️🤔🤔，为什么try中的throw没有引起浏览器的报错提示呢？这也就是为什么说throw只能在try块中使用的。 我们先看一下如果不在try块中使用，会是一种什么样的情况？

throw 'error'
console.log('无所吊谓')
image.png

throw单独使用直接抛出异常，JS脚本执行结束。既然这样为什么还要用throw呢？终止执行我return不香吗？更何况控制台爆红太折磨，像有蚂蚁在身上爬🤪🤪，实在是没意义。catch是干嘛的？我就是处理try中的异常的。就相当于异常直接被catch截胡，我不抛出就轮不到你来处理。

拓展：map能否终止循环？（很有意思的一个话题）

之前看到过有关于map能否终止循环的话题？借此机会在这里聊一聊自己的看法。 首先我的观点是肯定不能终止循环的(某种意义上来讲)。

map是干嘛的？

Array方法很多，而且各有千秋，例如forEach是为了处理但不返回值的，filter是过滤值的，而map就是为了返回值的。map作为数组的方法之一，重点在于对原数组已有元素进行加工，在不改变原数组的情况下返回一个新的数组。准确的说map本身就是迭代，并不是循环。

如果可以终止循环，如何终止循环，return？try...catch?

  1. 首先return可以排除，map的回调函数会把return的值作为当前处理元素的值，无论return true还是return false，都会被认为是数组当前项的值。如果直接return（即使没有return），也会把undefined作为当前项的值。

    当然口说无凭。上代码🤓

    const arr = ['a', 'b', 'c', 'd']
let newArr = arr.map((item, index) => {
  console.log('[ouput]:', item)
  if(index === 0) {
    return
  } else if(index === 1) {
    return true
  } else if(index === 2) {
    return false
  }
})
console.log(newArr)
    image.png

    return没戏了，那试一试try...catch？

    const arr = ['a', 'b', 'c', 'd']
let deelArr = arr.map((item, index) => {
  console.log('[ouput]:', item)
  if(index === 1) {
    try{
      throw new Error('我™️跳不出去？')
    } catch(e) {
      console.log('[error]:', e.message)
      throw e.message
    }
  } else {
    return item
  }
})
console.log(deelArr)
    image.png

    看到这可能有些老哥坐不住了，啊，这不终止了吗？
    我知道你很急，但是你先别急。确实是终止了，但是我想问的是，我的deelArr呢？之所以使用map我是冲着返回值的唉！不然我使用map的意义是什么呢？所以某种意义上来说，我认为map是不能终止循环的。
    有自己见解的铁子欢迎留言发表自己的观点。

avatar
文章
阅读
粉丝