L'extrait de code JavaScript pour les problèmes courants

Dernière mise à jour le 27 juillet 2021

Chaque langage de programmation a ses défauts et ses bizarreries. Le langage JavaScript et même l'extrait de code JavaScript utilisé ne font pas exception. Le langage de script s'est comporté étrangement ces dernières années, mais c'est l'un des langages les plus utilisés de nos jours. En grande partie, c'est parce qu'il s'agit du principal langage interactif des navigateurs Internet.

Il y a des moments, en tant que programmeurs et codeurs, où nous avons des problèmes répétitifs et simples pour lesquels nous avons besoin de simples extraits de code. Dans ce blog, je vais présenter quelques problèmes courants qui peuvent être facilement résolus à l'aide de scripts ES6 dans le cadre de certains extraits de code JavaScript.

Astuce pour l'extrait de code JavaScript : utilisez 'let' au lieu de 'var'

let est comme var mais let a une portée. let n'est accessible qu'au niveau de la portée du bloc auquel il est déclaré et auquel une valeur est attribuée. var est accessible à n'importe quel niveau concernant la portée du bloc auquel il est défini. Dans l'exemple suivant, la variable 'num1' est définie dans une instruction If et n'est donc pas accessible en dehors de la fonction.

 si vrai) {
  soit num1 = 40 ;
}

soit num2 = 20 ;

console.log(num2, num1);
console.log(num1);

Production:
20
indéfini

 soit a = 25 ;
soit b = 50 ;

si vrai) {
  soit a = 100 ;
  varc = 5 ;
  console.log(a/c);
  console.log(b/c);
}

console.log(c);
console.log(a);

Production:
20
dix
5
25

Utiliser 'const' lorsqu'une valeur de variable ne change pas

const attribue une valeur constante à une variable qui ne peut pas être modifiée. Chaque fois qu'une variable const est définie, JavaScript référence l'adresse de la valeur à la variable.

La fonction flèche de l'extrait de code JavaScript, une nouvelle syntaxe pour les fonctions

Les fonctions des extraits de code JavaScript dans ES6 ont été remplacées par une expression plus simple, '() => {}'.

 // Ancienne syntaxe
function monBonjour() {
  console.log("Bonjour le monde..!");
}

// Nouvelle syntaxe
var monBonjour = () => {
  console.log("Bonjour le monde..!");
}

La nouvelle syntaxe peut être un peu déroutante au départ. Il y a deux parties de syntaxe.

 var monBonjour = ()

La première partie de l'extrait de code JavaScript déclare une variable et lui attribue la fonction (). Il dit simplement que la variable est une fonction.

 => { // faire quelque chose } 

La deuxième partie déclare la partie corps de la fonction. La partie flèche avec les accolades définit la partie corps.

D'autres exemples mais avec des paramètres.

 soit avecParamètres = (a, b) => {
  console.log(a+b);
}

avecParamètres(10, 20);

Production:
30

 soit sumOfNum = (a, b = 10) => {
  retourner a + b ;
}

console.log(sumOfNum(20);
console.log(sumOfNum(20,30);

Production:
30
50

Nouveau' pour… de…' Boucle

for…of est très similaire à for…in avec de légères modifications. for…of parcourt une liste d'éléments comme un tableau et renvoie les éléments (pas leur index) un par un. Notez que la variable 'num' affiche chaque élément du tableau, pas l'index.

 soit nombres = [5,6,7,8] ;

pour (laisser le nombre de nombres) {
  console.log(valeur);
}

Production:
5
6
sept
8

 let str = 'Arturo';

for (let char of str) {
  console.log(char);
}

Production:
UN
r
t
tu
r
o

Destruction d'une affectation de variable

Attribuer des variables à partir d'un tableau une par une prend du temps et est stupide. Utilisez simplement l'affectation de destructeur pour accomplir cela plus rapidement et plus facilement :

 let profile = ['John', 32, 'ingénieur'] ;

let [nom, âge, travail] = profil ;

console.log(nom);

Production:
John

Rechercher un objet spécifique dans un tableau d'objets

L'une des tâches les plus courantes que vous devez accomplir en JavaScript consiste à parcourir un tableau d'objets pour en trouver un spécifique. La méthode find est une solution simple ici. Vous branchez simplement les critères de sélection en utilisant une fonction anonyme comme argument, et vous êtes prêt :

 laisser le personnel = [
  { id : 0, nom : 'Nina' },
  { id : 1, nom : 'Kevin' },
  { id : 2, nom : 'John' }
]

let employé = staff.find(emp => emp.name === 'John');

console.log(client);

Production:
{ id : 2, nom : 'John' }

Bouclage sur les clés et les valeurs d'un objet

Notre structure de données peut être un objet complexe qui contient diverses paires clé/valeur. Itérer chaque paire peut être un peu étrange, mais c'est simple une fois que nous avons utilisé la fonction d'Object.

Une fois les clés de l'objet saisies, nous pouvons parcourir les clés et les valeurs en même temps. Dans la solution qui suit, nous accédons à chaque paire en utilisant les variables clé et valeur pendant la boucle.

 let myObject = { Peter : 15, John : 20, Anne : 35 } ;

Object.keys(myObject).forEach((clé, valeur) => {
  //...faire quelque chose
  console.log(clé, valeur);
});

Production:
Pierre 15
Jean 20
Anne 35

Filtrer un tableau d'objets en fonction d'une condition

Parfois, nous avons un large éventail de données que nous souhaitons filtrer les éléments en fonction d'une condition spécifique. Nous pouvons une fonction de filtre pour accomplir cela. La solution suivante comporte un tableau de chemins de fichiers. Certains fichiers sont dans le répertoire 'data1' tandis que d'autres dans le répertoire 'data2'. Supposons que nous voulions filtrer uniquement un répertoire spécifique :

 laisser emplacement = [
  "fichiers/données1/fichier",
  "fichiers/données1/fichier2",
  "fichiers/données2/fichier",
  "fichiers/données2/fichier2"
] ;

let filter = location.filter(path => path.includes('data2'));

console.log(filtre);

Production:
[ 'fichiers/rep2/fichier', 'fichiers/rep2/fichier2' ]

En spécifiant que la chaîne de chemin doit inclure la chaîne 'data2', nous filtrons tous les chemins qui ne contiennent pas 'data2'. N'oubliez pas que quelle que soit la fonction que vous transmettez au filtre, elle doit renvoyer true pour que l'élément soit inclus dans le résultat.

Attribuer des clés à un objet portant le même nom

Lorsque vous affectez des clés à un objet, si la clé porte le même nom que la variable contenant la valeur que vous souhaitez affecter, vous pouvez omettre complètement l'affectation de valeur. Cela vous évite d'avoir à vous répéter, ce que nous détestons tous faire. Jetez un oeil à cet exemple:

 let name = 'John';
soit âge = 32 ;
let job = 'ingénieur';

// au lieu de cela
let profile1 = { nom : nom, âge : âge, travail : travail } ;

// fais ça
let profile2 = { nom, âge, travail } ;

console.log(profil2);

Production:
{ nom : 'John', âge : 32, travail : 'ingénieur' }

Utilisation de l'opérateur de propagation ES6 '…'

L'opérateur de propagation vous permet littéralement de « répartir » un tableau. Cela peut être utilisé pour transformer un tableau en une liste d'arguments ou même combiner deux tableaux. Vous pouvez également l'utiliser pour former une liste d'arguments pour une fonction.

Dans le premier exemple, nous montrons comment l'opérateur de propagation fonctionne sur un tableau et transforme chaque élément en un élément individuel.

 soit nombres1 = [1,2,3,4,5] ;

console.log(...nombres1);

Production:
1 2 3 4 5

Le deuxième exemple combine le contenu de deux tableaux en créant un nouveau tableau temporaire contenant les deux contenus.

 soit nombres2 = [6,7,8,9,10] ;

soit combiné = [... nombres1, ... nombres2] ;

console.log(...combiné);

Production:
1 2 3 4 5 6 7 8 9 10

Le dernier exemple illustre comment l'opérateur de propagation peut transformer un tableau en une liste d'arguments d'une fonction. Le Math.max renvoie le nombre le plus élevé dans une liste d'arguments qui lui sont transmis. L'un de ces arguments était 10, qui est le plus élevé.

 soit nombres1 = [1,2,3,4,5] ;

soit nombres2 = [6,7,8,9,10] ;

soit combiné = [... nombres1, ... nombres2] ;

console.log(Math.max(...combiné));

Production:
dix

Nouvelles fonctions Getters et Setters

Les getters et les setters sont l'une des fonctionnalités utiles introduites dans ES6. C'est pratique si nous utilisons des classes en JavaScript.

 class NomPersonne {
  constructeur(nom) {
    this.name = nom;
  }
  obtenir Nom() {
    retourne ce.nom ;
  }
  set Nom(nom) {
    this.name = nom;
  }
}

let person = new PersonName("Jon Snow");
console.log(person.Name); // (A)

personne.Name = "Dany" ; // (B)
console.log(person.Name);

Production:
Jon Snow
Dany

Nous pouvons voir qu'il y a deux fonctions dans la classe PersonName avec les propriétés 'get' et 'set'. La propriété 'get' est utilisée pour obtenir la valeur de la variable, et la propriété 'set' est utilisée pour définir la valeur de la variable. Nous pouvons également voir que la fonction get Name (A) est appelée sans parenthèses et que la fonction set Name (B) est appelée sans parenthèses, et c'est comme si l'on affectait une valeur à la variable.