Les essentiels de JavaScript : partie 5

Précédemment dans JavaScript Essentials : Partie 4, nous avons discuté des instructions if et else, des boucles for et while. Dans cette partie, nous examinerons :

• Fonctions
• Rappels, promesses, asynchrones et attente
• Prochaine grande nouveauté

Commentaires

Les commentaires sont super et nous allons maintenant en parler. Il est si tard que vous devriez savoir ce qu'est un commentaire. Quoi qu'il en soit, un commentaire dans notre programme n'est pas exécuté. Un commentaire est destiné à documenter notre code. Il existe trois façons d'ajouter des commentaires en Javascript. Nous avons le inline, le multiline et le JsDoc.

En ligne

// this is a number
const numberOfBirds = 3;

// the above comment is useless since the initial value assigned to the variable
// is physically a number and the variable name also has a number in it
// so use comments wisely by using proper naming

Multiligne

/* 
Everything in here is or will be ignored.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


*/

const emptyString = "";

JsDoc

/**
 * This is a multiline comment
 *
 * But used for documentation
 */

Les commentaires peuvent être placés n'importe où ; cependant, soyez prudent lorsque vous les placez après (ou à la fin) d'une ligne de code ou en dessous ou au-dessus de celle-ci.

Point-virgule

En javascript, le point-virgule ;, n'est pas obligatoire cependant, cela aide parfois. Il existe des outils qui vous y aident. Un point-virgule indique la fin d'une instruction. Bien.

Échancrure

Les indentations sont utilisées pour organiser le code pour plus de clarté et de facilité de lecture. La touche de tabulation (sur le clavier) est utilisée pour l'indentation. Les indentations sont parfois des « tabulations » ou des « espaces ». L'espace est généralement 2 ou 4. Si vous utilisez vscode, vous n'avez pas à vous inquiéter.

Exemples

Il y avait quelques exercices de JavaScript Essentials : Partie 4 qui incluaient, sans s'y limiter, le "fizzbuzz", la validation du mot de passe et de l'e-mail, etc. Si vous aviez suivi mon pseudocode, vous rencontreriez des problèmes. Je fournirai un extrait qui prend en compte la commande.

fizzbuzz pour un seul numéro

const givenNumber = 3;

if (givenNumber % 3 === 0 && givenNumber % 5 === 0) {
  console.log("fizzbuzz");
} else if (givenNumber % 3 === 0) {
  console.log("fizz");
} else if (givenNumber % 5 === 0) {
  console.log("buzz");
}

fizzbuzz pour un tableau

const numbers = [3, 6, 10, 15];

for (const givenNumber of numbers) {
  if (givenNumber % 3 === 0 && givenNumber % 5 === 0) {
    console.log("fizzbuzz");
  } else if (givenNumber % 3 === 0) {
    console.log("fizz");
  } else if (givenNumber % 5 === 0) {
    console.log("buzz");
  }
}

validation du mot de passe

const veryWeakPassword = "PrQ1V_";
// const veryWeakPassword = "rtfy67Fg";
// const veryWeakPassword = "OlJgRc__1qwPVa";
console.log(`Password validation for "${veryWeakPassword}"`);

// - be six characters
if (veryWeakPassword.length !== 6) {
  console.log(
    `- Password must have 6 characters => "${veryWeakPassword}" has '${veryWeakPassword.length}' characters`
  );
}
// - start with uppercase p, 'P'
else if (!veryWeakPassword.startsWith("P")) {
  console.log(
    `- Password must start with 'P' => it is ${veryWeakPassword.startsWith(
      "P"
    )} that "${veryWeakPassword}" starts with 'P'`
  );
}
// - end with underscore
else if (!veryWeakPassword.endsWith("_")) {
  console.log(
    `- Password must end with '_' => it is ${veryWeakPassword.endsWith(
      "_"
    )} that "${veryWeakPassword}" ends with '_'`
  );
}
// - have uppercase q, 'Q'
else if (!veryWeakPassword.includes("Q")) {
  console.log(
    `- Password must have uppercase q, 'Q' => it is ${veryWeakPassword.includes(
      "Q"
    )} that "${veryWeakPassword}" has 'Q'`
  );
}
// - have lowercase r, 'r'
else if (!veryWeakPassword.includes("r")) {
  console.log(
    `- Password must have lowercase r, 'r' => it is ${veryWeakPassword.includes(
      "r"
    )} that "${veryWeakPassword}" has 'r'`
  );
}
// - have its fifth character as uppercase v, 'V'
// fifth character with have index = fifth position - 1 = 4
// const fifthCharacter = veryWeakPassword[4]
else if (veryWeakPassword.charAt(4) !== "V") {
  console.log(
    `- Password must have its fifth character as uppercase v, 'V' => "${veryWeakPassword}" has its 5th character as '${veryWeakPassword.charAt(
      4
    )}'`
  );
} else {
  console.log(`${veryWeakPassword} is a valid password`);
}

Certaines autres solutions utiliseraient des if et else imbriqués.

// password validation
const veryWeakPassword = "PrQ1V_";
// const veryWeakPassword = "rtfy67Fg";
// const veryWeakPassword = "OlJgRc__1qwPVa";
console.log(`Password validation for "${veryWeakPassword}"`);

// - be six characters
if (veryWeakPassword.length === 6) {
  if (veryWeakPassword.startsWith("P")) {
    if (veryWeakPassword.endsWith("_")) {
      if (veryWeakPassword.includes("Q")) {
        if (veryWeakPassword.includes("r")) {
          if (veryWeakPassword.charAt(4) === "V") {
            console.log(`${veryWeakPassword} is a valid password`);
          } else {
            console.log(
              `- Password must have its fifth character as uppercase v, 'V' => "${veryWeakPassword}" has its 5th character as '${veryWeakPassword.charAt(
                4
              )}'`
            );
          }
        } else {
          console.log(
            `- Password must have lowercase r, 'r' => it is ${veryWeakPassword.includes(
              "r"
            )} that "${veryWeakPassword}" has 'r'`
          );
        }
      } else {
        console.log(
          `- Password must have uppercase q, 'Q' => it is ${veryWeakPassword.includes(
            "Q"
          )} that "${veryWeakPassword}" has 'Q'`
        );
      }
    } else {
      console.log(
        `- Password must end with '_' => it is ${veryWeakPassword.endsWith(
          "_"
        )} that "${veryWeakPassword}" ends with '_'`
      );
    }
  } else {
    console.log(
      `- Password must start with 'P' => it is ${veryWeakPassword.startsWith(
        "P"
      )} that "${veryWeakPassword}" starts with 'P'`
    );
  }
} else {
  console.log(
    `- Password must have 6 characters => "${veryWeakPassword}" has '${veryWeakPassword.length}' characters`
  );
}

Que pensez-vous des deux extraits ? Pratiquement, le deuxième extrait, même s'il fonctionne, n'est pas si génial.

Fonctions

Une fonction est un morceau de code qui peut être réutilisé. Habituellement, une fonction fait une chose spécifique. Une chose. Cela peut être n'importe quoi.

Regardons la forme générale (structure) d'une fonction en JavaScript.

// this is a number
const numberOfBirds = 3;

// the above comment is useless since the initial value assigned to the variable
// is physically a number and the variable name also has a number in it
// so use comments wisely by using proper naming

• function est un mot-clé requis lors de la création d’une fonction. Le mot-clé for est nécessaire lorsque vous souhaitez utiliser une boucle for.
• functionName est censé être le nom donné à la fonction. L'idée de nommer une variable s'applique à une fonction.
• /* paramètres */ fait référence aux données que vous souhaitez transmettre à la fonction.
• // faire quelque chose est l'action ou le calcul que nous souhaitons effectuer. Les fonctions renvoient généralement des données après un certain traitement. Il y a des moments où ce n'est pas le cas. Il met simplement à jour certaines données et c'est terminé.
• { // faire quelque chose } est le corps ou le bloc des fonctions

Nous pouvons avoir une fonction qui imprime "hello world"

/* 
Everything in here is or will be ignored.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


*/

const emptyString = "";

Nous nous sommes fait la faveur de nommer notre fonction avec un nom qui décrit ce que fait la fonction.

Maintenant, quand on a une fonction, il faut l'"appeler" pour qu'elle soit exécutée. Pour appeler une fonction, vous avez besoin du nom de la fonction suivi de ( et ). Si la fonction prend un paramètre, vous passerez l'argument dans le ( et ). Dans notre cas, pour la fonction "hello world", il faut faire printHelloWorld();.

/**
 * This is a multiline comment
 *
 * But used for documentation
 */

Allons dans une petite direction qui élargira notre arsenal et rendra la création de fonctions amusante. Considérez cette fonction qui ajoute deux nombres puis imprime un texte vous indiquant ce qui s'est passé.

const givenNumber = 3;

if (givenNumber % 3 === 0 && givenNumber % 5 === 0) {
  console.log("fizzbuzz");
} else if (givenNumber % 3 === 0) {
  console.log("fizz");
} else if (givenNumber % 5 === 0) {
  console.log("buzz");
}

Ça vous donne des idées ? Nous pouvons écrire notre "fizzbuzz" et nos validations en utilisant des fonctions. Nous pouvons être si avares et délicats que nous écrivions chaque exigence de validation comme une fonction. Cela arrive. N'en faites pas trop.

Maintenant, considérons la fonction d'ajout. Et si nous voulons additionner différents nombres, que faisons-nous ? Nous pouvons créer une autre fonction. Nous pouvons également modifier les valeurs directement. Droite? Ouais. Vous serez étonné par ce que nous pouvons accomplir avec les fonctions.

Tout d'abord, si nous voulons ajouter des numéros différents, nous pouvons modifier les numéros.

const numbers = [3, 6, 10, 15];

for (const givenNumber of numbers) {
  if (givenNumber % 3 === 0 && givenNumber % 5 === 0) {
    console.log("fizzbuzz");
  } else if (givenNumber % 3 === 0) {
    console.log("fizz");
  } else if (givenNumber % 5 === 0) {
    console.log("buzz");
  }
}

D'accord, modifions la fonction pour ajouter plutôt 6 et 100. Nous devons maintenant modifier la fonction. Il existe une solution à cela : introduire des paramètres (données via des variables). Ensuite, nous transmettrions ces données sous forme d'arguments.

Analysons notre fonction d'ajout. La fonction add opère sur x et y et sur les opérandes. Nous pouvons transmettre différentes valeurs à x et y en passant x et y comme paramètres.

const veryWeakPassword = "PrQ1V_";
// const veryWeakPassword = "rtfy67Fg";
// const veryWeakPassword = "OlJgRc__1qwPVa";
console.log(`Password validation for "${veryWeakPassword}"`);

// - be six characters
if (veryWeakPassword.length !== 6) {
  console.log(
    `- Password must have 6 characters => "${veryWeakPassword}" has '${veryWeakPassword.length}' characters`
  );
}
// - start with uppercase p, 'P'
else if (!veryWeakPassword.startsWith("P")) {
  console.log(
    `- Password must start with 'P' => it is ${veryWeakPassword.startsWith(
      "P"
    )} that "${veryWeakPassword}" starts with 'P'`
  );
}
// - end with underscore
else if (!veryWeakPassword.endsWith("_")) {
  console.log(
    `- Password must end with '_' => it is ${veryWeakPassword.endsWith(
      "_"
    )} that "${veryWeakPassword}" ends with '_'`
  );
}
// - have uppercase q, 'Q'
else if (!veryWeakPassword.includes("Q")) {
  console.log(
    `- Password must have uppercase q, 'Q' => it is ${veryWeakPassword.includes(
      "Q"
    )} that "${veryWeakPassword}" has 'Q'`
  );
}
// - have lowercase r, 'r'
else if (!veryWeakPassword.includes("r")) {
  console.log(
    `- Password must have lowercase r, 'r' => it is ${veryWeakPassword.includes(
      "r"
    )} that "${veryWeakPassword}" has 'r'`
  );
}
// - have its fifth character as uppercase v, 'V'
// fifth character with have index = fifth position - 1 = 4
// const fifthCharacter = veryWeakPassword[4]
else if (veryWeakPassword.charAt(4) !== "V") {
  console.log(
    `- Password must have its fifth character as uppercase v, 'V' => "${veryWeakPassword}" has its 5th character as '${veryWeakPassword.charAt(
      4
    )}'`
  );
} else {
  console.log(`${veryWeakPassword} is a valid password`);
}

Au lieu d'avoir les valeurs de x et y comme valeurs internes dans l'ajout, nous les transmettons. Désormais, la différence entre les paramètres et les arguments est que les paramètres sont transmis lors de la création (définition) de la fonction. Les arguments sont les valeurs transmises lors de l'appel de la fonction. Ainsi, dans la fonction add(x, y), x et y sont des paramètres (on peut dire des espaces réservés, représentant les données à transmettre à la fonction). Dans add(3, 30);, 3 et 30 sont passés comme arguments (les valeurs réelles à traiter). Notez que l'ordre de l'argument et des paramètres doit correspondre, sinon nous serions sérieusement endettés.

Pensez-vous qu'il suffit d'affronter les gros canons ? Eh bien, je pense que vous pouvez. Il vous suffit d'être calme et de savoir ce que vous faites. Je vais fournir quelques extraits.

// this is a number
const numberOfBirds = 3;

// the above comment is useless since the initial value assigned to the variable
// is physically a number and the variable name also has a number in it
// so use comments wisely by using proper naming

Faites de même pour le "fizzbuzz". Enroulez une fonction autour de l'extrait. Vous n'êtes pas obligé de commenter les variables utilisées. Regardez quelles données doivent être transmises à la fonction (entrée).

On peut passer autant de paramètres à une fonction. Cependant, je vous encourage à fixer certaines limites. Certains professionnels disent qu’environ trois suffisent. Certains parlent de moins de cinq. Il faut être intelligent à ce sujet. Pour l'instant, disons que chaque fois que le nombre de paramètres dépasse trois, nous utiliserions un tableau ou un objet. Ouais. On peut passer un tableau ou un objet en argument.

/* 
Everything in here is or will be ignored.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


*/

const emptyString = "";

Écrivez une fonction qui calcule la moyenne d'un tableau de nombres en complétant cette fonction.

/**
 * This is a multiline comment
 *
 * But used for documentation
 */

À ce stade, il devrait être clair que les fonctions peuvent prendre des arguments. En pratique, nos fonctions renverront une valeur ou quelque chose une fois le calcul effectué. La valeur calculée est renvoyée par la fonction. Une fonction qui renvoie une valeur est de la forme :

const givenNumber = 3;

if (givenNumber % 3 === 0 && givenNumber % 5 === 0) {
  console.log("fizzbuzz");
} else if (givenNumber % 3 === 0) {
  console.log("fizz");
} else if (givenNumber % 5 === 0) {
  console.log("buzz");
}

• // return someValue est la seule nouveauté ici. return est un mot-clé.
• someValue est la valeur renvoyée par la fonction. Et cela pourrait être n'importe quoi, une fonction vide. Ne vous inquiétez pas. Nous allons modifier certaines de ces fonctions que nous avons écrites auparavant pour que les choses soient plus simples.

Vous vous souvenez de la fonction d'ajout ? Au lieu d'enregistrer la valeur dans la fonction, nous la renverrons et attribuerons cette valeur à une variable, puis réutiliserons la valeur plus tard.

const numbers = [3, 6, 10, 15];

for (const givenNumber of numbers) {
  if (givenNumber % 3 === 0 && givenNumber % 5 === 0) {
    console.log("fizzbuzz");
  } else if (givenNumber % 3 === 0) {
    console.log("fizz");
  } else if (givenNumber % 5 === 0) {
    console.log("buzz");
  }
}

C'est aussi simple que possible. Faites de même pour la fonction calculateInterest.

Une fonction peut renvoyer tout ce qui peut être retourné.

Fonctions fléchées

Une fonction flèche est une autre façon d’écrire une fonction. Habituellement, j'utilise des fonctions fléchées lorsque j'ai une fonction simple qui fait une "chose" très infime ou dans des méthodes de tableau ou de chaîne pour la boucle. Vous pouvez l'utiliser à la place des déclarations de fonctions (fonctions nommées). Nous disons fonction pour indiquer que nous voulons créer une fonction. Les fonctions fléchées ont les mêmes fonctionnalités que la fonction déclarative.

Les fonctions fléchées sont appelées ainsi à cause de =>, l'opérateur grosse flèche. C'est de la forme, peut-être avez-vous déjà vu :

const veryWeakPassword = "PrQ1V_";
// const veryWeakPassword = "rtfy67Fg";
// const veryWeakPassword = "OlJgRc__1qwPVa";
console.log(`Password validation for "${veryWeakPassword}"`);

// - be six characters
if (veryWeakPassword.length !== 6) {
  console.log(
    `- Password must have 6 characters => "${veryWeakPassword}" has '${veryWeakPassword.length}' characters`
  );
}
// - start with uppercase p, 'P'
else if (!veryWeakPassword.startsWith("P")) {
  console.log(
    `- Password must start with 'P' => it is ${veryWeakPassword.startsWith(
      "P"
    )} that "${veryWeakPassword}" starts with 'P'`
  );
}
// - end with underscore
else if (!veryWeakPassword.endsWith("_")) {
  console.log(
    `- Password must end with '_' => it is ${veryWeakPassword.endsWith(
      "_"
    )} that "${veryWeakPassword}" ends with '_'`
  );
}
// - have uppercase q, 'Q'
else if (!veryWeakPassword.includes("Q")) {
  console.log(
    `- Password must have uppercase q, 'Q' => it is ${veryWeakPassword.includes(
      "Q"
    )} that "${veryWeakPassword}" has 'Q'`
  );
}
// - have lowercase r, 'r'
else if (!veryWeakPassword.includes("r")) {
  console.log(
    `- Password must have lowercase r, 'r' => it is ${veryWeakPassword.includes(
      "r"
    )} that "${veryWeakPassword}" has 'r'`
  );
}
// - have its fifth character as uppercase v, 'V'
// fifth character with have index = fifth position - 1 = 4
// const fifthCharacter = veryWeakPassword[4]
else if (veryWeakPassword.charAt(4) !== "V") {
  console.log(
    `- Password must have its fifth character as uppercase v, 'V' => "${veryWeakPassword}" has its 5th character as '${veryWeakPassword.charAt(
      4
    )}'`
  );
} else {
  console.log(`${veryWeakPassword} is a valid password`);
}

ou

// password validation
const veryWeakPassword = "PrQ1V_";
// const veryWeakPassword = "rtfy67Fg";
// const veryWeakPassword = "OlJgRc__1qwPVa";
console.log(`Password validation for "${veryWeakPassword}"`);

// - be six characters
if (veryWeakPassword.length === 6) {
  if (veryWeakPassword.startsWith("P")) {
    if (veryWeakPassword.endsWith("_")) {
      if (veryWeakPassword.includes("Q")) {
        if (veryWeakPassword.includes("r")) {
          if (veryWeakPassword.charAt(4) === "V") {
            console.log(`${veryWeakPassword} is a valid password`);
          } else {
            console.log(
              `- Password must have its fifth character as uppercase v, 'V' => "${veryWeakPassword}" has its 5th character as '${veryWeakPassword.charAt(
                4
              )}'`
            );
          }
        } else {
          console.log(
            `- Password must have lowercase r, 'r' => it is ${veryWeakPassword.includes(
              "r"
            )} that "${veryWeakPassword}" has 'r'`
          );
        }
      } else {
        console.log(
          `- Password must have uppercase q, 'Q' => it is ${veryWeakPassword.includes(
            "Q"
          )} that "${veryWeakPassword}" has 'Q'`
        );
      }
    } else {
      console.log(
        `- Password must end with '_' => it is ${veryWeakPassword.endsWith(
          "_"
        )} that "${veryWeakPassword}" ends with '_'`
      );
    }
  } else {
    console.log(
      `- Password must start with 'P' => it is ${veryWeakPassword.startsWith(
        "P"
      )} that "${veryWeakPassword}" starts with 'P'`
    );
  }
} else {
  console.log(
    `- Password must have 6 characters => "${veryWeakPassword}" has '${veryWeakPassword.length}' characters`
  );
}

Réécrivons la fonction d'ajout en utilisant la fonction flèche.

function functionName(/* parameters */) {
  // do something
}

=>, indique un retour de la valeur de l'express x y. Le mot-clé return est donc utilisé implicitement. Encore une fois, nous pouvons renvoyer explicitement une valeur de la fonction en utilisant le mot-clé return cependant, nous devons ajouter le bloc de fonctions.

// this is a number
const numberOfBirds = 3;

// the above comment is useless since the initial value assigned to the variable
// is physically a number and the variable name also has a number in it
// so use comments wisely by using proper naming

La différence entre les deux est que dans le second, nous avons ajouté un bloc, { et } et un mot-clé return qui renvoie une valeur de la fonction. Encore une fois, vous pouvez choisir de renvoyer une valeur ou non.

Passer des fonctions en arguments

Nous pouvons passer des fonctions comme arguments à d'autres fonctions. Essentiellement, nous traitons les fonctions comme des valeurs. Considérons cet exemple trivial.

/* 
Everything in here is or will be ignored.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


*/

const emptyString = "";

Un autre endroit où nous pouvons faire cela est avec les méthodes de tableau ou les méthodes de chaîne. Considérez cette fonction

/**
 * This is a multiline comment
 *
 * But used for documentation
 */

Nous pouvons voir que nous pouvons extraire la fonction de rappel, (total, élément) => élément total, 0. En fait, c'est l'élément total que l'on peut remplacer.

const givenNumber = 3;

if (givenNumber % 3 === 0 && givenNumber % 5 === 0) {
  console.log("fizzbuzz");
} else if (givenNumber % 3 === 0) {
  console.log("fizz");
} else if (givenNumber % 5 === 0) {
  console.log("buzz");
}

Vous savez, nous passons une autre fonction qui prend 2 arguments numériques et renvoie un nombre. Nous n'avons même pas besoin de créer une fonction.

Nous avons déjà fait quelques calculs mais cette fois, nous utiliserons des fonctions pour faire abstraction des opérateurs.

const numbers = [3, 6, 10, 15];

for (const givenNumber of numbers) {
  if (givenNumber % 3 === 0 && givenNumber % 5 === 0) {
    console.log("fizzbuzz");
  } else if (givenNumber % 3 === 0) {
    console.log("fizz");
  } else if (givenNumber % 5 === 0) {
    console.log("buzz");
  }
}

Le dernier paramètre est appelé paramètre par défaut et généralement, il est placé comme
le dernier argument. C'est quelque chose que vous devez faire si vous voulez
utiliser les valeurs par défaut. Cet extrait n'est pas si différent du précédent
un sauf l'introduction du paramètre par défaut qui signifie pour le troisième
argument, nous pouvons choisir de lui transmettre une valeur ou non.

const veryWeakPassword = "PrQ1V_";
// const veryWeakPassword = "rtfy67Fg";
// const veryWeakPassword = "OlJgRc__1qwPVa";
console.log(`Password validation for "${veryWeakPassword}"`);

// - be six characters
if (veryWeakPassword.length !== 6) {
  console.log(
    `- Password must have 6 characters => "${veryWeakPassword}" has '${veryWeakPassword.length}' characters`
  );
}
// - start with uppercase p, 'P'
else if (!veryWeakPassword.startsWith("P")) {
  console.log(
    `- Password must start with 'P' => it is ${veryWeakPassword.startsWith(
      "P"
    )} that "${veryWeakPassword}" starts with 'P'`
  );
}
// - end with underscore
else if (!veryWeakPassword.endsWith("_")) {
  console.log(
    `- Password must end with '_' => it is ${veryWeakPassword.endsWith(
      "_"
    )} that "${veryWeakPassword}" ends with '_'`
  );
}
// - have uppercase q, 'Q'
else if (!veryWeakPassword.includes("Q")) {
  console.log(
    `- Password must have uppercase q, 'Q' => it is ${veryWeakPassword.includes(
      "Q"
    )} that "${veryWeakPassword}" has 'Q'`
  );
}
// - have lowercase r, 'r'
else if (!veryWeakPassword.includes("r")) {
  console.log(
    `- Password must have lowercase r, 'r' => it is ${veryWeakPassword.includes(
      "r"
    )} that "${veryWeakPassword}" has 'r'`
  );
}
// - have its fifth character as uppercase v, 'V'
// fifth character with have index = fifth position - 1 = 4
// const fifthCharacter = veryWeakPassword[4]
else if (veryWeakPassword.charAt(4) !== "V") {
  console.log(
    `- Password must have its fifth character as uppercase v, 'V' => "${veryWeakPassword}" has its 5th character as '${veryWeakPassword.charAt(
      4
    )}'`
  );
} else {
  console.log(`${veryWeakPassword} is a valid password`);
}

In const total = performActionOnArray(numArray, add); on aurait pu passer une fonction directement

// password validation
const veryWeakPassword = "PrQ1V_";
// const veryWeakPassword = "rtfy67Fg";
// const veryWeakPassword = "OlJgRc__1qwPVa";
console.log(`Password validation for "${veryWeakPassword}"`);

// - be six characters
if (veryWeakPassword.length === 6) {
  if (veryWeakPassword.startsWith("P")) {
    if (veryWeakPassword.endsWith("_")) {
      if (veryWeakPassword.includes("Q")) {
        if (veryWeakPassword.includes("r")) {
          if (veryWeakPassword.charAt(4) === "V") {
            console.log(`${veryWeakPassword} is a valid password`);
          } else {
            console.log(
              `- Password must have its fifth character as uppercase v, 'V' => "${veryWeakPassword}" has its 5th character as '${veryWeakPassword.charAt(
                4
              )}'`
            );
          }
        } else {
          console.log(
            `- Password must have lowercase r, 'r' => it is ${veryWeakPassword.includes(
              "r"
            )} that "${veryWeakPassword}" has 'r'`
          );
        }
      } else {
        console.log(
          `- Password must have uppercase q, 'Q' => it is ${veryWeakPassword.includes(
            "Q"
          )} that "${veryWeakPassword}" has 'Q'`
        );
      }
    } else {
      console.log(
        `- Password must end with '_' => it is ${veryWeakPassword.endsWith(
          "_"
        )} that "${veryWeakPassword}" ends with '_'`
      );
    }
  } else {
    console.log(
      `- Password must start with 'P' => it is ${veryWeakPassword.startsWith(
        "P"
      )} that "${veryWeakPassword}" starts with 'P'`
    );
  }
} else {
  console.log(
    `- Password must have 6 characters => "${veryWeakPassword}" has '${veryWeakPassword.length}' characters`
  );
}

Promesse

Avant toute chose, définissons quelques termes. Les promesses sont importantes dans notre niche.

Opération synchrone : Ce sont des opérations qui sont exécutées séquentiellement, de haut en bas, les unes après les autres. Pour certaines opérations A1 et A2, A1 doit être terminée avant que A2 soit exécutée. De cette façon, A2 ne sera exécuté qu'après A1. À la fois, une opération est exécutée. Cet inconvénient s'appelle le blocage.

function functionName(/* parameters */) {
  // do something
}

La sortie de ce qui précède est dans un ordre linéaire comme écrit ci-dessus.

// function to print "hello world"
function printHelloWorld() {
  console.log("Hello world");
}

En bref, tout le code que nous avons écrit jusqu'à présent est exécuté dans un ordre synchrone et nous pouvons dire quand une ligne sera exécutée.

Opérations asynchrones : Ce sont des opérations qui ne sont pas exécutées de manière séquentielle. Ces opérations s'exécutent simultanément. Il peut s'agir de plusieurs opérations exécutées en même temps, pratiquement, petit à petit. Puisque le succès ou l'exécution d'une opération est indépendant de l'ordre et n'empêche pas l'exécution des autres lignes, nous appelons ce comportement non bloquant. On ne peut pas dire quand une ligne asynchrone sera exécutée.

printHelloWorld();

// the output of this function will be on the console/terminal

Et voici le résultat.

function add() {
  const x = 3;
  const y = 20;

  const sum = x + y;

  console.log(`${x} + ${y} = ${sum}`);
}

add(); // 3 + 20 = 23

Pouvez-vous identifier l'opération asynchrone en fonction de la sortie ?

C'est la fonction setTimeout. Disons qu'il fonctionne en arrière-plan. Il n'est pas bloquant, donc le dernier console.log a été exécuté.

Quelques opérations asynchrones

• Demandes réseau (Ex : appels API)
• Requêtes de base de données
• Opérations d'E/S sur les fichiers
• API Web Javascript (setTimeout, setInterval, fetch, etc.)

Une promesse fournit un moyen de gérer ou de gérer des opérations asynchrones. C'est un moyen de connaître l'état dans lequel se trouve une opération asynchrone, quand elle est exécutée et si elle est "réalisée" ou si elle a échoué.

Créons une promesse

Une promesse a la forme :

// this is a number
const numberOfBirds = 3;

// the above comment is useless since the initial value assigned to the variable
// is physically a number and the variable name also has a number in it
// so use comments wisely by using proper naming

nouveau et Promesse sont des mots-clés. résoudre et rejeter sont des fonctions de rappel. Nous pouvons les remplacer par d'autres noms. Par conversion, nous utilisons résoudre et rejeter.

Gérer une promesse

Promise a ensuite une méthode qui fournit la valeur résolue, une méthode catch qui fournit l'erreur rejetée et il y a enfin une méthode de nettoyage après tout le processus. Enfin, c'est facultatif. Voici un exemple simple avec lequel vous pouvez jouer.

/* 
Everything in here is or will be ignored.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


*/

const emptyString = "";

Regardez le résultat et voyez comment le code est exécuté. console.log("Au revoir"); ne fut pas le dernier à être exécuté. Nous avons créé notre opération asynchrone à l'aide d'une promesse et l'avons gérée en utilisant then et catch. Si nous envisageons d'exécuter ces opérations dans l'ordre, alors nous pouvons ou devons mettre la logique restante à l'intérieur du bloc then.

/**
 * This is a multiline comment
 *
 * But used for documentation
 */

Que s'est-il passé ?

Le problème avec cette approche de gestion des promesses, c'est qu'on a tendance à emboîter ou à enchaîner cette opération, puis le bloc grossit et ce n'est pas si convivial que ça. Alors regardons async et attendons.

asynchrone et attendre

Dans le flux normal de données, nous ne voulons pas que l'opération asynchrone s'exécute en arrière-plan. Nous voulons l'écouter et utiliser son résultat pour faire autre chose (comme nous l'avons fait à l'époque et attraper).

Créons une opération asynchrone et gérons-la en utilisant async et wait.

Nous savons comment créer des fonctions nommées et des fonctions fléchées.

const givenNumber = 3;

if (givenNumber % 3 === 0 && givenNumber % 5 === 0) {
  console.log("fizzbuzz");
} else if (givenNumber % 3 === 0) {
  console.log("fizz");
} else if (givenNumber % 5 === 0) {
  console.log("buzz");
}

Pour rendre une fonction asynchrone, nous utilisons le mot-clé async.

const numbers = [3, 6, 10, 15];

for (const givenNumber of numbers) {
  if (givenNumber % 3 === 0 && givenNumber % 5 === 0) {
    console.log("fizzbuzz");
  } else if (givenNumber % 3 === 0) {
    console.log("fizz");
  } else if (givenNumber % 5 === 0) {
    console.log("buzz");
  }
}

Maintenant, quelle que soit l'opération qui entre dans le bloc de la fonction et disons dans la fonction asynchrone que nous voulons créer, nous devrons gérer une autre opération asynchrone, nous pourrons alors utiliser l'attente.

const veryWeakPassword = "PrQ1V_";
// const veryWeakPassword = "rtfy67Fg";
// const veryWeakPassword = "OlJgRc__1qwPVa";
console.log(`Password validation for "${veryWeakPassword}"`);

// - be six characters
if (veryWeakPassword.length !== 6) {
  console.log(
    `- Password must have 6 characters => "${veryWeakPassword}" has '${veryWeakPassword.length}' characters`
  );
}
// - start with uppercase p, 'P'
else if (!veryWeakPassword.startsWith("P")) {
  console.log(
    `- Password must start with 'P' => it is ${veryWeakPassword.startsWith(
      "P"
    )} that "${veryWeakPassword}" starts with 'P'`
  );
}
// - end with underscore
else if (!veryWeakPassword.endsWith("_")) {
  console.log(
    `- Password must end with '_' => it is ${veryWeakPassword.endsWith(
      "_"
    )} that "${veryWeakPassword}" ends with '_'`
  );
}
// - have uppercase q, 'Q'
else if (!veryWeakPassword.includes("Q")) {
  console.log(
    `- Password must have uppercase q, 'Q' => it is ${veryWeakPassword.includes(
      "Q"
    )} that "${veryWeakPassword}" has 'Q'`
  );
}
// - have lowercase r, 'r'
else if (!veryWeakPassword.includes("r")) {
  console.log(
    `- Password must have lowercase r, 'r' => it is ${veryWeakPassword.includes(
      "r"
    )} that "${veryWeakPassword}" has 'r'`
  );
}
// - have its fifth character as uppercase v, 'V'
// fifth character with have index = fifth position - 1 = 4
// const fifthCharacter = veryWeakPassword[4]
else if (veryWeakPassword.charAt(4) !== "V") {
  console.log(
    `- Password must have its fifth character as uppercase v, 'V' => "${veryWeakPassword}" has its 5th character as '${veryWeakPassword.charAt(
      4
    )}'`
  );
} else {
  console.log(`${veryWeakPassword} is a valid password`);
}

L'attente indique à Javascript "d'attendre" et de recevoir la valeur résolue ou remplie de la promesse.

// password validation
const veryWeakPassword = "PrQ1V_";
// const veryWeakPassword = "rtfy67Fg";
// const veryWeakPassword = "OlJgRc__1qwPVa";
console.log(`Password validation for "${veryWeakPassword}"`);

// - be six characters
if (veryWeakPassword.length === 6) {
  if (veryWeakPassword.startsWith("P")) {
    if (veryWeakPassword.endsWith("_")) {
      if (veryWeakPassword.includes("Q")) {
        if (veryWeakPassword.includes("r")) {
          if (veryWeakPassword.charAt(4) === "V") {
            console.log(`${veryWeakPassword} is a valid password`);
          } else {
            console.log(
              `- Password must have its fifth character as uppercase v, 'V' => "${veryWeakPassword}" has its 5th character as '${veryWeakPassword.charAt(
                4
              )}'`
            );
          }
        } else {
          console.log(
            `- Password must have lowercase r, 'r' => it is ${veryWeakPassword.includes(
              "r"
            )} that "${veryWeakPassword}" has 'r'`
          );
        }
      } else {
        console.log(
          `- Password must have uppercase q, 'Q' => it is ${veryWeakPassword.includes(
            "Q"
          )} that "${veryWeakPassword}" has 'Q'`
        );
      }
    } else {
      console.log(
        `- Password must end with '_' => it is ${veryWeakPassword.endsWith(
          "_"
        )} that "${veryWeakPassword}" ends with '_'`
      );
    }
  } else {
    console.log(
      `- Password must start with 'P' => it is ${veryWeakPassword.startsWith(
        "P"
      )} that "${veryWeakPassword}" starts with 'P'`
    );
  }
} else {
  console.log(
    `- Password must have 6 characters => "${veryWeakPassword}" has '${veryWeakPassword.length}' characters`
  );
}

Lorsque nous exécutons l'extrait ci-dessus, nous obtenons une erreur similaire à : Attention : Pour charger un module ES, définissez "type": "module" dans le package.json ou utilisez l'extension .mjs..

Nous pouvons résoudre ce problème facilement. Exécutez la commande npm init -y. Allez dans le fichier package.json et ajoutez la ligne "type": "module". Le package.json devrait ressembler à

// this is a number
const numberOfBirds = 3;

// the above comment is useless since the initial value assigned to the variable
// is physically a number and the variable name also has a number in it
// so use comments wisely by using proper naming

Maintenant, réexécutez l'extrait et vous devriez obtenir un résultat similaire à

/* 
Everything in here is or will be ignored.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


*/

const emptyString = "";

Maintenant, disons que nous voulons gérer l'erreur de rejet de promesse, si ce n'est pas le cas, nous devons utiliser la clause try and catch autour de l'appel asynchrone.

/**
 * This is a multiline comment
 *
 * But used for documentation
 */

Il n'y aura aucun rejet de promesse car nous avons défini const result = true. Réglez-le sur faux. Et notre résultat devrait être similaire à

const givenNumber = 3;

if (givenNumber % 3 === 0 && givenNumber % 5 === 0) {
  console.log("fizzbuzz");
} else if (givenNumber % 3 === 0) {
  console.log("fizz");
} else if (givenNumber % 5 === 0) {
  console.log("buzz");
}

Donc, le but de parler de promesses, d'async et d'attente est de vous faire savoir que nous ferons souvent cela. Reportez-vous aux exemples d'opérations asynchrones répertoriées ci-dessus.

async et wait, try and catch et enfin sont des mots-clés.

Conclusion

À ce stade où nous avons discuté des fonctions et des promesses et de la manière de les gérer, je pense que nous sommes équipés à environ 50 % des « connaissances » nécessaires pour manipuler les données (flux). Il ne reste plus qu'à s'habituer à écrire du code javascript et à devenir un programmeur javascript compétent. Mettez la main à la pâte avec JavaScript. C'est la seule façon de coder une API backend et de ne pas vous sentir retenu parce que vous avez l'idée mais que vous ne savez pas quoi faire.

Ensuite, vous devez écrire du code et résoudre certains problèmes, puis commencer à créer des API. C'est ce que nous ferons ensuite, cependant, je vous encourage à consulter les ressources ci-dessous.

Ressource

Ce sont des documents qui seront utiles pour comprendre les promesses, l'async et l'attente et la boucle d'événements.

• Qu'est-ce que c'est que la boucle d'événements de toute façon ? | Philippe Roberts | JSConf UE
• Node.js animé : Boucle d'événement
• JavaScript visualisé - Boucle d'événements, API Web, file d'attente de (micro)tâches
• Promesses JavaScript en 10 minutes
• Comment fonctionnent les promesses JavaScript – Tutoriel pour les débutants

Voici quelques exercices que vous aimeriez essayer.

• exercice - javascript
• jschallenger - bases de javascript
• codecademy - 10 défis-code-javascript-pour-débutants
• TheOdinProject-javascript-exercises
• guerres de codes - javascript
• RepublicServicesRepository-javascript-exercises
• leonardomso - 33-js-concepts
• C'est une bonne lecture, getify - You-Dont-Know-JS
• Les Algorithmes - Javascript
• denysdovhan - wtfjs
• w3schools - exercice js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!