"Si un ouvrier veut bien faire son travail, il doit d'abord affûter ses outils." - Confucius, "Les Entretiens de Confucius. Lu Linggong"
Page de garde > La programmation > Journée - Certification professionnelle des fondations avaScript par Mozilla

Journée - Certification professionnelle des fondations avaScript par Mozilla

Publié le 2024-09-02
Parcourir:546

Day - avaScript Foundations Professional Certification by Mozilla

Points forts du concept :

  1. Utilisation de for...of et for...in boucles
  2. Différences entre Set() et Array, Map() et Objects et Set() et Carte()

1. Utilisation des boucles for...of et for...in

Le bouclage est un concept fondamental en programmation, permettant d'exécuter plusieurs fois un bloc de code. En JavaScript, for...of et for...in sont deux boucles couramment utilisées, mais elles servent à des fins différentes. Comprendre les différences peut vous aider à écrire un code plus efficace et efficient.

1.1 pour...de boucle

La boucle for...of est utilisée pour parcourir des objets itérables, tels que des tableaux, des chaînes, des cartes et des ensembles. Il fournit un moyen simple d'accéder à chaque valeur de la séquence sans avoir à se soucier de l'index.

par exemple)

let teams = ['Red Sox', 'Dodgers', 'Padres']; 

for (let team of teams) {
   console.log(team);
}

// Output: 
// Read Sox
// Dodgers
// Padres

Dans cet exemple, for...of accède directement à chaque élément (équipe) du tableau teams et l'enregistre dans la console. Cette boucle est idéale lorsque vous n'avez besoin que des valeurs et non des indices.

1-2. pour...dans la boucle

La boucle for...in, quant à elle, est utilisée pour parcourir les propriétés (clés) d'un objet. Il est souvent utilisé avec des objets, mais il peut également être utilisé avec des tableaux pour accéder aux index.

par exemple)

let Mariners = {place: 'Seattle', league: 'American', color: 'navy blue'}; 

for (let key in Mariners) {
   console.log(`${key}: ${Mariners[key]}`); 
}

// Output: 
// place: Seattle
// league: American
// color: navy blue

Dans cet exemple, for...in parcourt les clés de l'objet Mariners, permettant d'accéder à la fois à la clé et à la valeur correspondante. Il est important de noter que for...in doit être utilisé avec prudence avec les tableaux, car il parcourt toutes les propriétés énumérables, pas seulement les indices numériques.

1-3. Différences clés

  • But:
    • for...of : parcourt les valeurs d'un objet itérable (tableaux, chaînes, ensembles, cartes).
    • for...in : parcourt les propriétés énumérables (clés) d'un objet.
  • Cas d'utilisation :
    • À utiliser pour...de lorsque vous devez accéder directement aux valeurs.
    • Utilisez pour...in lorsque vous devez accéder à des clés ou à des noms de propriétés.

2. Différences entre Set() et Array, Map() et Objects, et Set() et `Map()

JavaScript fournit une variété de structures de données, chacune avec ses forces et ses faiblesses. J'ai exploré les différences entre certains des plus couramment utilisés :

2-1. Set() vs tableau

  • Unicité:
    • Set() stocke des valeurs uniques, ce qui signifie qu'aucun doublon n'est autorisé.
    • Le tableau autorise les valeurs en double.
  • Commande:
    • Set() itère l'ordre d'insertion.
    • Le tableau conserve également l'ordre d'insertion, mais les doublons peuvent modifier la façon dont vous interagissez avec lui.

par exemple)

`

let mySet = new Set([1, 2, 3, 3, 4]);
laissez myArray = [1, 2, 3, 3, 4];

console.log(mySet) // Sortie : Set { 1, 2, 3, 4 }
console.log(myArray) // Sortie : [1, 2, 3, 3, 4]

`

Dans cet exemple, Set() supprime automatiquement les doublons 3, tandis que Array les conserve. Set() est utile lorsque vous avez besoin d’une collection d’éléments uniques.

2-2. Carte() vs objet

  • Types de clés :

    • Map() : les clés peuvent être de n’importe quel type, y compris les objets, les fonctions et les types primitifs.
    • Object : les clés sont généralement des chaînes ou des symboles.
  • Commande:

    • Map() conserve l'ordre d'insertion.
    • Object ne garantit pas l'ordre des clés.
  • Taille:

    • Map() possède une propriété size qui donne le nombre de paires clé-valeur.
    • Object nécessite de déterminer manuellement la taille en parcourant les clés.

par exemple)

`
laissez maMap = new Map();
maCarte.set('nom', 'Jean');
maMap.set(42, 'La réponse');
myMap.set({}, 'Objet vide');

laisser monObjet = {
nom : 'John',
42 : 'La réponse',
{} : 'Objet vide'
};

console.log(myMap.size); // Sortie : 3
console.log(Object.keys(myObject).length); // Sortie : 2 (en raison de la conversion de la chaîne de clé)
`
Dans cet exemple, Map() permet l'utilisation d'une variété de types de clés, tandis que les clés d'objet sont converties en chaînes. De plus, Map() fournit facilement la taille de la carte, alors que pour les objets, vous devez compter manuellement les clés.

2-3. Set() contre Map()

  • But:
    • Set() est une collection de valeurs uniques.
    • Map() est une collection de paires clé-valeur.
  • Cas d'utilisation :
    • Utilisez Set() lorsque vous devez stocker une liste d'éléments uniques.
    • Utilisez Map() lorsque vous devez associer des valeurs à des clés.

par exemple)

`
let mySet = new Set([1, 2,3]);
let myMap = new Map([['key1', 'value1'], ['key2', 'value2']]);

console.log(mySet.has(2)); // Sortie : vrai
console.log(myMap.get('key1')); // Sortie : 'valeur'1
`
Dans cet exemple, Set() est utilisé pour vérifier l'existence d'une valeur, tandis que Map() est utilisé pour récupérer une valeur associée à une clé.

Déclaration de sortie Cet article est reproduit sur : https://dev.to/ryoichihomma/day-4-javascript-foundations-professional-certification-by-mozilla-ddc?1 En cas de violation, veuillez contacter [email protected] pour supprimer il
Dernier tutoriel Plus>

Clause de non-responsabilité: Toutes les ressources fournies proviennent en partie d'Internet. En cas de violation de vos droits d'auteur ou d'autres droits et intérêts, veuillez expliquer les raisons détaillées et fournir une preuve du droit d'auteur ou des droits et intérêts, puis l'envoyer à l'adresse e-mail : [email protected]. Nous nous en occuperons pour vous dans les plus brefs délais.

Copyright© 2022 湘ICP备2022001581号-3