JavaScript标记的语句

100 阅读1分钟

关于一个非常少用的JavaScript功能的教程:标签化语句

JavaScript有一个相对不为人知的功能,它允许你对语句进行标注。

我最近看到这个功能在Svelte中被用来支持反应式声明,只要声明中的变量发生变化,就会重新计算。

他们还允许使用语句块,这是JavaScript的另一个特性,只要你能定义一个语句,就可以定义一个块。

$: {
  console.log(variable)
  console.log('another thing')
  //...
}

这可能看起来很奇怪,但这是正确的JavaScript。这个语句块被分配到$ 标签上。

Svelte编译器在内部会使用这个来为反应式声明提供动力。

我从来没有在其他地方使用过这个功能,但主要的用例是突破一个不是最近的包围循环或开关的语句。

这里有一个简单的例子来解释我的意思。

在任何一个点上调用break都会脱离switch,以避免运行其他情况。

for (let y = 0; y < 3; y++) {
  switch (y) {
    case 0:
      console.log(0)
      break
    case 1:
      console.log(1)
      break
    case 2:
      console.log(2)
      break
  }
}

这将向控制台打印0 1 2 ,正如预期的那样。

但是,如果我们想在到达case 1 的时候跳出for 呢?这就是方法。

loop: for (let y = 0; y < 3; y++) {
  switch (y) {
    case 0:
      console.log(0)
      break
    case 1:
      console.log(1)
      break loop
    case 2:
      console.log(2)
      break
  }
}

这将把0 1 打印到控制台。