Maison  >  Article  >  interface Web  >  Carte en JS

Carte en JS

WBOY
WBOYoriginal
2024-07-19 15:06:58811parcourir

Map in JS

Une carte en JavaScript est une collection de paires clé-valeur où les clés peuvent être de n'importe quel type. Il conserve l'ordre d'insertion, ce qui signifie que les éléments sont itérés dans l'ordre dans lequel ils ont été ajoutés.

Caractéristiques clés d'une carte ;

  1. Clés uniques : Chaque clé d'une carte est unique.
  2. Tout type de données pour les clés : Contrairement aux objets, les clés peuvent être de n'importe quel type de données, y compris des fonctions, des objets ou tout type primitif.
  3. Itérable : Vous pouvez parcourir les clés, les valeurs ou les entrées d'une Map.

Opérations de base

Créer une carte

let funnyMap = new Map();

Ajout d'éléments à une carte

funnyMap.set('a', 1); // string key
funnyMap.set(2, 'two'); // number key
funnyMap.set(true, 'yes'); // boolean key
funnyMap.set({name: 'obj'}, 'object'); // object key

// Funny example
funnyMap.set('knock-knock', 'who’s there?');

Obtenir des valeurs à partir d'une carte

console.log(funnyMap.get('a')); // 1
console.log(funnyMap.get(2)); // two
console.log(funnyMap.get(true)); // yes

// Funny example
console.log(funnyMap.get('knock-knock')); // who’s there?

Rechercher une clé

console.log(funnyMap.has('a')); // true
console.log(funnyMap.has(42)); // false

// Funny example
console.log(funnyMap.has('chicken')); // false (It crossed the road)

Supprimer un élément

funnyMap.delete('a');
console.log(funnyMap.has('a')); // false

// Funny example
funnyMap.delete('knock-knock');
console.log(funnyMap.get('knock-knock')); // undefined (No one answered)

Obtenir la taille de la carte

console.log(funnyMap.size); // 3 after deletion

// Funny example
console.log(`The map has ${funnyMap.size} jokes left.`);

Effacer la carte

funnyMap.clear();
console.log(funnyMap.size); // 0

// Funny example
console.log(`All jokes are cleared from the map.`);

Itérer sur une carte

Utiliser pour...de

funnyMap.set('banana', 'yellow');
funnyMap.set('apple', 'red');
funnyMap.set('grape', 'purple');

// Iterating over keys
for (let key of funnyMap.keys()) {
    console.log(`Key: ${key}`);
}

// Iterating over values
for (let value of funnyMap.values()) {
    console.log(`Value: ${value}`);
}

// Iterating over entries
for (let [key, value] of funnyMap.entries()) {
    console.log(`Key: ${key}, Value: ${value}`);
}

// Funny example
funnyMap.set('dad joke', 'What do you call fake spaghetti? An impasta!');
for (let [key, value] of funnyMap.entries()) {
    console.log(`Here’s a ${key}: ${value}`);
}

Utilisation de forEach

funnyMap.forEach((value, key) => {
    console.log(`Key: ${key}, Value: ${value}`);
});

// Funny example
funnyMap.set('bad pun', 'I’m reading a book on anti-gravity. It’s impossible to put down!');
funnyMap.forEach((value, key) => {
    console.log(`Here’s a ${key}: ${value}`);
});

Utilisations pratiques

Comptage de mots (version drôle)

Imaginez que vous vouliez compter combien de fois certains mots apparaissent dans une collection de blagues :

let jokeText = "Why did the scarecrow win an award? Because he was outstanding in his field!";

// Splitting text into words
let words = jokeText.split(/\W+/);

let wordCount = new Map();

words.forEach(word => {
    word = word.toLowerCase();
    if (wordCount.has(word)) {
        wordCount.set(word, wordCount.get(word) + 1);
    } else {
        wordCount.set(word, 1);
    }
});

wordCount.forEach((count, word) => {
    console.log(`Word: ${word}, Count: ${count}`);
});

// Funny example
console.log('Word counts in our joke:');
wordCount.forEach((count, word) => {
    console.log(`"${word}": ${count} times`);
});

Résumé

Une carte en JavaScript est une structure de données polyvalente qui peut contenir des paires clé-valeur de n'importe quel type de données, fournit des méthodes d'itération simples et maintient l'ordre des éléments. C'est utile pour les scénarios où vous avez besoin d'une gestion des clés plus flexible qu'un objet ordinaire, comme compter les mots dans des blagues ou stocker les réponses à diverses énigmes.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn