1

Introduction to Maps in JavaScript

 2 years ago
source link: https://www.digitalocean.com/community/tutorials/js-maps-introduction
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

// Tutorial //

Introduction to Maps in JavaScript

Published on July 6, 2017 · Updated on April 4, 2022
By Alligator.io
Developer and author at DigitalOcean.
Introduction to Maps in JavaScript

We introduced sets in JavaScript, so it’s only logical that we follow with a discussion on maps, which was also introduced with ES2015. Maps are a new object type that allow to store collections of key-value pairs.

Unlike with objects, map keys can be of any type, even objects or functions. It’s also easy to get the size of a map, while it’s not as straightforward for objects. On top of that, with maps we can iterate in the order in which the values were added, contrary to objects where there’s no guarantee about the order.

Here’s a simple example of a map demonstrating a few of the available methods and properties such as set, get, size, has, delete and clear:

let things = new Map();

const myFunc = () => '🍕';

things.set('🚗', 'Car');
things.set('🏠', 'House');
things.set('✈️', 'Airplane');
things.set(myFunc, '😄 Key is a function!');

things.size; // 4

things.has('🚗'); // true

things.has(myFunc) // true
things.has(() => '🍕'); // false, not the same reference
things.get(myFunc); // '😄 Key is a function!'

things.delete('✈️');
things.has('✈️'); // false

things.clear();
things.size; // 0

// setting key-value pairs is chainable
things.set('🔧', 'Wrench')
      .set('🎸', 'Guitar')
      .set('🕹', 'Joystick');

const myMap = new Map();

// Even another map can be a key
things.set(myMap, 'Oh gosh!');
things.size; // 4
things.get(myMap); // 'Oh gosh!'

Initializing Maps from Arrays

You can initialize a map from an array that contains arrays of two values:

const funArray = [
  ['🍾', 'Champagne'],
  ['🍭', 'Lollipop'],
  ['🎊', 'Confetti'],
];

let funMap = new Map(funArray);
funMap.get('🍾'); // Champagne

Iterating Over Maps

It’s easy to iterate over maps using for…of and array destructuring:

let activities = new Map();

activities.set(1, '🏂');
activities.set(2, '🏎');
activities.set(3, '🚣');
activities.set(4, '🤾');

for (let [nb, activity] of activities) {
  console.log(`Activity ${nb} is ${activity}`);
}

// Activity 1 is 🏂
// Activity 2 is 🏎
// Activity 3 is 🚣
// Activity 4 is 🤾

…And you can also use forEach to iterate over a map in the same manner. Note however how the first argument to the forEach callback function is the value and the second is the key. The following will have the same result as the for…of example:

activities.forEach((value, key) => {
  console.log(`Activity ${key} is ${value}`);
});

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK