Home > Web Front-end > JS Tutorial > Map in JS

Map in JS

WBOY
Release: 2024-07-19 15:06:58
Original
878 people have browsed it

Map in JS

A Map in JavaScript is a collection of key-value pairs where keys can be of any type. It retains the order of insertion, meaning that the items are iterated in the order they were added.

Key Characteristics of a Map;

  1. Unique Keys: Each key in a Map is unique.
  2. Any Data Type for Keys: Unlike objects, keys can be of any data type, including functions, objects, or any primitive type.
  3. Iterable: You can iterate over the keys, values, or entries of a Map.

Basic Operations

Creating a Map

let funnyMap = new Map();
Copy after login

Adding Elements to a Map

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?');
Copy after login

Getting Values from a Map

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?
Copy after login

Checking for a Key

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

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

Removing an Element

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)
Copy after login

Getting the Size of the Map

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

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

Clearing the Map

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

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

Iterating Over a Map

Using for...of

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}`);
}
Copy after login

Using 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}`);
});
Copy after login

Practical Uses

Word Counting (Funny Version)

Imagine you want to count how many times certain words appear in a joke collection:

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`);
});
Copy after login

Summary

A Map in JavaScript is a versatile data structure that can hold key-value pairs of any data type, provides easy iteration methods, and maintains the order of elements. It's useful for scenarios where you need a more flexible key management than a regular object, such as counting words in jokes or storing responses to various riddles.

The above is the detailed content of Map in JS. For more information, please follow other related articles on the PHP Chinese website!

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template