Complete guide to using Map in JavaScript

introduction

In JavaScript,Mapis a data structure for storing key-value pairs, with flexible key types and rich methods. Compared with traditional objects,MapIt provides a more efficient key-value pair operation method, which is especially suitable for handling large amounts of data and scenarios where key-value pairs are required to be frequently operated. This article will introduce in detailMapcreation, common methods, iterative methods, and discuss its differences from objects and practical application scenarios.

1. Create a Map

usenew Map()To create an emptyMap。

const map = new Map();

It can also be initialized at creation timeMap, pass in an array containing key-value pairs:

const map = new Map([
  ["name", "Alice"],
  ["age", 25]
]);
(map); // Output Map(2) { 'name' => 'Alice', 'age' => 25 }

2. Comparison between Map and object

StudyingMapBefore the basic operations, let’s take a look atMapDifference from traditional objects.

By comparison, we can see thatMapThere are significant advantages in key type, insertion order, and key-value pair operation efficiency.

3. Common methods of Map

3.1 set(key, value)

Used toMapAdd a key-value pair. If the key already existssetThe value will be updated.

("name", "Bob");
("age", 30);
(map); // Output Map(2) { 'name' => 'Bob', 'age' => 30 }

3.2 get(key)

Get the value of the specified key. If the key does not exist, returnundefined。

(("name")); // Output 'Bob'(("gender")); // Output undefined

3.3 has(key)

examineMapWhether the specified key exists in  , returntrueorfalse。

(("name")); // Output true(("gender")); // Output false

3.4 delete(key)

Delete the specified key-value pair and returntrueIf it is successfully deleted, otherwise returnfalse。

("age");
(map); // Output Map(1) { 'name' => 'Bob' }

3.5 clear()

ClearMap, delete all key-value pairs.

();
(map); // Output Map(0) {}

3.6 size

returnMapThe number of key-value pairs.

("name", "Alice");
("age", 25);
(); // Output 2

4. Map iterative method

MapSupports multiple iteration methods, allowing you to easily traverse key-value pairs.

4.1 forEach(callback)

TraversalMapEach key-value pair incallbackThe function accepts three parameters: value, key, and Map itself.

((value, key) => {
  (`${key}: ${value}`);
});
// Output:// name: Alice
// age: 25

4.2 keys()

returnMapIterator for all keys in (Iterator), can be usedfor...ofCome and traverse.

for (let key of ()) {
  (key);
}
// Output:// name
// age

4.3 values()

returnMapIterator for all values ​​in  (Iterator）。

for (let value of ()) {
  (value);
}
// Output:// Alice
// 25

4.4 entries()

returnMapIterators for all key-value pairs in  , each key-value pair will be[key, value]Return in the form of  .

for (let entry of ()) {
  (entry);
}
// Output:// [ 'name', 'Alice' ]
// [ 'age', 25 ]

4.5 Use for...of to traverse Map

Can be used directlyfor...ofTraversalMap, will be called by defaultentries()method, therefore return[key, value]array.

for (let [key, value] of map) {
  (`${key}: ${value}`);
}
// Output:// name: Alice
// age: 25

5. Map application scenarios

MapIt is a structure suitable for storing key-value pairs, especially suitable for the following scenarios:

• Need to use non-string keys: The key of an object can only be a string or symbol, andMapYou can use any data type as keys, such as objects, functions, etc.

  const objKey = { id: 1 };
  const map = new Map();
  (objKey, "Object as key");
  ((objKey)); // Output 'Object as key'

• Need to operate frequently on key-value pairs：MapIt performs better than objects in search, insert and delete key-value pairs, and is suitable for use in scenarios where key-value pairs are frequently operated.

• Need to keep the insertion order：MapKey-value pairs will be stored in the order of insertion, so the order is fixed during traversal, while objects do not guarantee the insertion order.

• Avoid prototype chain contamination: The key of the object may be affectedInfluence, andMapThere is no problem with prototype chain pollution, and any key can be stored safely.

6. Use Map to count the number of letters

We can use an example to compareMapand not usedMapThe difference. Suppose we have a string that needs to count the number of times each letter appears.MapVery suitable for this kind of key-value pair storage scenario.

Method 1: No Map, use normal objects

function countLettersWithObject(str) {
  const letterCounts = {}; // Use object to store the number of letters
  for (let letter of str) {
    if (letterCounts[letter]) {
      letterCounts[letter]++;
    } else {
      letterCounts[letter] = 1;
    }
  }

  return letterCounts;
}

const result = countLettersWithObject("hello world");
(result); // Output: { h: 1, e: 1, l: 3, o: 2, w: 1, r: 1, d: 1 }

Method 2: Use Map

function countLettersWithMap(str) {
  const letterCounts = new Map(); // Use Map to store the number of letters
  for (let letter of str) {
    if ((letter)) {
      (letter, (letter) + 1);
    } else {
      (letter, 1);
    }
  }

  return letterCounts;
}

const resultMap = countLettersWithMap("hello world");
(resultMap); // Output: Map(7) { 'h' => 1, 'e' => 1, 'l' => 3, 'o' => 2, 'w' => 1, 'r' => 1, 'd' => 1 }

7. Introduction to WeakMap

WeakMapyesMapA special type of  , whose key must be an object and a weak reference (that is, it will not prevent the object from being garbage collected). If an object is no longer referenced elsewhere, then even if it isWeakMapThe keys of   will also be garbage collected, which can prevent memory leakage.

Features of WeakMap

• Only objects are accepted as keys and no primitive types are supported.
• Keys are weak references and do not prevent garbage collection.
• NosizeAttributes,clearMethods and traversal methods (forEach、keys、values、entries), so it cannot be traversedWeakMap。

Use scenarios

WeakMapUsually used for storage of private attributes or private data, and it is not expected that this data affects garbage collection. It is suitable for temporary mapping relationships between objects and is used without traversal of data.

const weakMap = new WeakMap();
let obj = { id: 1 };

(obj, "some value");
((obj)); // Output 'some value'
obj = null; // Delete other references to the object// After this, obj is garbage collected, and the key-value pairs in WeakMap will also be cleared

Summarize

MapIt is a powerful key-value pair data structure, with the advantages of flexible key type support, maintaining insertion order, and rich built-in methods. It is suitable for storing and operating a large number of key-value pairs. andWeakMapIt is a weak reference to object keysMap, helps manage memory in specific scenarios. I hope these contents can help you fully understand and apply them.Map！

This is all about this article about the usage of Map in JavaScript. For more related content on Map in JS, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!