for循环命名

一、需求背景

当我们使用双重循环查找某个目标，找到后想要在内循环跳出整个双重循环，我们可能想到用一个标志位，在外层循环判断到标志位为true时，跳出外层循环。
例如：

  const arr = [
    ['1', '2', '3'],
    ['4', '5', '6'],
    ['7', '8', '9']
  ]
  let flag = false
  for (let i = 0; i < arr.length; i++) {
    if (flag) break
    for (let j = 0; j < arr[0].length; j++) {
      if (arr[i][j] === '5') {
        flag = true
        break
      }
      console.log(i, j, arr[i][j])
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

可以看到，找到5之后就停止了循环
但是，接下来分享一个更加优雅的方式来实现，就是利用for循环命名

二、基本语法

name: for()：
name: for循环的名称
例如：

  fo:for (let i = 0; i < 4; i++) {
    console.log(i)
  }
1
2
3

for循环命名只有结合break和continue才有意义，并且只能在循环内部使用

三、具体使用

还是拿上面的案例举例：

  const arr = [
    ['1', '2', '3'],
    ['4', '5', '6'],
    ['7', '8', '9']
  ]
  fo:for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr[0].length; j++) {
      if (arr[i][j] === '5') {
        break fo
      }
      console.log(i, j, arr[i][j])
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13

达到了同样的效果

当然我们也可以结合continue实现
比如我们想取出每一行的第一个元素即可

  fo:for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr[0].length; j++) {
      console.log(i, j, arr[i][j])
      if (j === 0) {
        continue fo
      }
    }
  }
1
2
3
4
5
6
7
8

这样当 j === 1时就能跳出外循环的当前一轮循环，直接进入下一轮

双重循环可能用起来优势没有那么大，但是如果是多层的话用起来就会非常舒服了