Instructions étiquetées JavaScript

Un tutoriel sur une fonctionnalité JavaScript très rarement utilisée: les instructions étiquetées

JavaScript a une fonctionnalité relativement inconnue qui vous permet d'étiqueter des instructions.

J'ai récemment vu cette fonctionnalité utilisée dans Svelte pour alimenter les déclarations réactives, qui sont recalculées chaque fois que les variables déclarées dans l'instruction changent:

$: console.log(variable)

Ils permettent également d'utiliser unbloc d'instructions, une autre fonctionnalité de JavaScript qui vous permet de définir un bloc chaque fois que vous pouvez définir une instruction:

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

Cela peut sembler étrange, mais c'est du JavaScript correct. Ce bloc d'instructions est affecté au$ étiqueter.

Le compilateur Svelte l'utilisera en interne pour alimenter les déclarations réactives.

Je n'ai encore jamais utilisé cette fonctionnalité ailleurs, mais le cas d'utilisation principal consiste à sortir d'une instruction qui n'est pas la boucle ou le commutateur englobant le plus proche.

Voici un exemple simple pour expliquer ce que je veux dire.

L'appel de pause dans l'un de ces points sort du commutateur, pour éviter d'exécuter les autres cas:

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
  }
}

Cela imprimera0 1 2à la console, comme prévu.

Mais que se passe-t-il si nous voulons sortir deforquand nous atteignonscase 1? Voici comment:

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
  }
}

Cela imprimera0 1à la console.

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de tutoriels js: