js循环的label语句浅析

---

前言

今天突然想到了多年前初学前端时的一个例子，今天查了下文档，发现是循环中特有的label语句。自从当时学完之后就没用过，今天查询文档加上自己验证，发现在有些场景还是比较有用的。下面就将下label语句的作用和适用场景

---

一、使用场景

一个 label 提供了一个让你在程序中其他位置引用它的标识符。例如，你可以用 label 标识一个循环， 然后使用 break 或者 continue 来指出程序是否该停止循环还是继续循环。

1. label语句只在以下循环种使用：

• for 语句
• do…while 语句
• while 语句
• for…in 语句
• for…of 语句

2. 需要配合break 或者 continue使用

二、使用方法

label :
   statement

就像下面这样使用：

loop1 :
for (var i = 0; i < 10; i++) {
     // do something
     break loop1;
 }
loop2 : for (var i = 0; i < 10; i++) {
     // do something
     continue loop2;
}

label换不换行都可以。

三、示例

loop1 : for (var i = 0; i < 10; i++) {
    if (i > 5) {
        break loop1;
    }
    console.log(i);
}
// 打印：0 1 2 3 4


loop2 : for (var i = 0; i < 10; i++) {
    if (i % 2 == 0) {
        continue loop2;
    }
    console.log(i);
}
// 打印：1 3 5 7 9


loop3 : for (var i in [1, 2, 3, 4, 5]) {
    if (i % 2 == 0) {
        continue loop3;
    }
    console.log(i);
}
// 打印：1 3

上面的例子是单独的循环，其实在多循环嵌套时，label语句的价值才更高，内部循环可以直接把所有循环停掉，只要在内部循环使用 break [最外层label]：

var aArray = [1, 3, 1, 9];

loop1 : for (var i = 0; i < aArray.length; i++) {
    loop2 : for (var j = 0; j < aArray.length; j++) {
	    if (aArray[i] == aArray[j]) {
	    	console.log('数组内有相同值');
		    break loop1;
	    }
	}
}

var aArray = [1, 3, 1, 9];
var bArray = [5, 3, 4, 9];

loop1 : for (var i = 0; i < aArray.length; i++) {
    loop2 : for (var j = bArray.length; j > 0; j--) {
	    if (aArray[i] == bArray[j]) {
            bArray.splice(j, 1);
		    break loop2;
	    }
	}
}
console.log('去掉相同值后：' + JSON.stringify(bArray));
// 打印 去掉相同值后：[5,4]

使用 continue 语句，则可达到与未添加 label 相同的效果，但在这种有多层循环的情况下，循环的跳出进入流程更为明晰一些：

var num = 0;
outPoint: for (var i = 0; i < 10; i++) {
  for (var j = 0; j < 10; j++) {
    if (i == 5 && j == 5) {
      continue outPoint;
    }
    num++;
  }
}
alert(num); // 95(不加continue应该是100)

参考文档

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Loops_and_iteration。