js中标签化语句的一些总结

今天在控制台打印对象遇到一个奇怪的事情,问题的起源是一个{a:1}的对象,我直接控制台输入{a:1}结果还是{a:1},但是如果我在前面加一个debugger后{a:1}的结果就变成了1.

为什么 { a : 1 } 结果会是 1 呢？

是因为在JS中，{}既可以代表代码块，又可以作为Object的语法标志。 JS是语句优先的，当一段代码既可以按照语句解析，又可以按照语法解析的时候，会优先按语句解析。

当把{}当做是代码块的时候，里面的 a : 1就会被解释成 标签名为a的代码块,这个代码块只有一个1,所以结果就是1了

那么什么是标签化语句呢?怎么使用它呢?

下面来看官方解释:

JS中的标签语句是一种特殊的语法结构，它允许开发者使用标签来标识一段代码，并使用break或continue语句来控制这段代码的执行流程。标签语句的基本语法是：label: statement，其中label是一个标识符，statement是要执行的语句或语句块。**标签语句的主要用途是在循环或条件语句中使用break或continue来跳转执行流程，而不是仅仅跳出一个循环。

下面我们通过代码的形式来看看它要如何使用:

for(let i=0; i<5; i++){
    for(let j=0; j<i; j++){
        console.log(i+"---------"+j)
    }
}

我们看看运行结果

1---------0
2---------0
2---------1
3---------0
3---------1
3---------2
4---------0
4---------1
4---------2
4---------3

下面我们有一个需求,需要在i为3,j为2的时候退出最外层的循环,我们这里想到了break,但是break仅能退出里层循环,所以我们需要在这里利用return来实现
看看代码

function test(){
    for(let i=0; i<5; i++){
        for(let j=0; j<i; j++){
            if(i == 3 && j ==2) {
                return;
            }
            console.log(i+"---------"+j)
        }
    }
}
test();

1---------0
2---------0
2---------1
3---------0
3---------1

没有问题,我们实现了需求,但是这里虽然我们实现了,但是套了一个函数,显得代码不够精简,所以我们利用开始提到的标签化语句来实现需求

来看代码:

block: {
    for(let i=0; i<5; i++){
        for(let j=0; j<i; j++){
            if(i == 3 && j ==2) {
                break block;
            }
            console.log(i+"---------"+j)
        }
    }
}

1---------0
2---------0
2---------1
3---------0
3---------1

结果也完全没有问题,所以我们可以得出，标签语句，就是把两个循环当作一个代码块，如果执行break,那么它将跳出整个代码块，而不用标签语句时，break只是跳出第一个循环。