Méthodes Map JavaScript

new Map() 方法

可以通过将数组传递给 new Map() 构造函数来创建 Map：

实例

// Création d'une Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

Essayez-le vous-même

Map.get()

Il est possible d'utiliser get() 方法获取 Map 中键的值：

实例

fruits.get("apples");

Essayez-le vous-même

Map.set()

Il est possible d'utiliser set() 方法向 Map 添加元素：

实例

// Création d'une Map
const fruits = new Map();
// 设置 Map 值
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);

Essayez-le vous-même

set() 方法也可以用于更改现有的 Map 值：

实例

fruits.set("apples", 500);

Essayez-le vous-même

Map.size

size 属性返回 Map 中元素的数量：

实例

fruits.size;

Essayez-le vous-même

Map.delete()

delete() 方法移除 Map 中的一个元素：

实例

fruits.delete("apples");

Essayez-le vous-même

Map.clear()

clear() 方法移除 Map 中的所有元素：

实例

fruits.clear();

Essayez-le vous-même

Map.has()

如果 Map 中存在某个键，has() 方法返回 true：

实例

fruits.has("apples");

Essayez-le vous-même

尝试以下代码：

fruits.delete("apples");
fruits.has("apples");

Essayez-le vous-même

Map.forEach()

forEach() 方法为 Map 中的每个键值对调用回调函数：

实例

// 列出所有条目
let text = "";
fruits.forEach(function(value, key) {
  text += key + ' = ' + value;
});

Essayez-le vous-même

Map.entries()

entries() 方法返回一个包含 Map 中 [key, value] 对的迭代器对象：

实例

// 列出所有条目
let text = "";
for (const x of fruits.entries()) {
  text += x;
}

Essayez-le vous-même

Map.keys()

keys() 方法返回一个包含 Map 中键的迭代器对象：

实例

// 列出所有键
let text = "";
for (const x of fruits.keys()) {
  text += x;
}

Essayez-le vous-même

Map.values()

values() La méthode retourne un objet itérateur contenant les valeurs de la Map :

实例

// Liste de toutes les valeurs
let text = "";
for (const x of fruits.values()) {
  text += x;
}

Essayez-le vous-même

Il est possible d'utiliser values() La méthode additionne les valeurs de la Map :

实例

// Somme de toutes les valeurs
let total = 0;
for (const x of fruits.values()) {
  total += x;
}

Essayez-le vous-même

Objets en tant que clés

Avis :L'utilisation d'objets en tant que clés est une caractéristique importante de Map.

实例

// Création d'objets
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// Création d'une Map
const fruits = new Map();
// Ajout d'un nouvel élément à la Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);

Essayez-le vous-même

Attention :La clé est un objet (apples), et non une chaîne ("apples"):

实例

fruits.get("apples"); // Retourne undefined

Essayez-le vous-même

JavaScript Map.groupBy()

ES2024 ajoute à JavaScript Map.groupBy() Méthode.

Map.groupBy() La méthode regroupe les éléments de l'objet en fonction de la valeur de chaîne renvoyée par la fonction de rappel.

Map.groupBy() La méthode ne modifie pas l'objet original.

实例

// Création d'un tableau
const fruits = [
  {name: "apples", quantity: 300},
  {name: "bananas", quantity: 500},
  {name: "oranges", quantity: 200},
  {name: "kiwi", quantity: 150}
];
// Fonction de rappel utilisée pour le groupage
function myCallback({ quantity }) {
  return quantity > 200 ? "ok" : "low";
}
// Grouper par quantité
const result = Map.groupBy(fruits, myCallback);

Essayez-le vous-même

Prise en charge du navigateur

Map.groupBy() C'est une fonctionnalité ES2024.

À partir de mars 2024, tous les nouveaux navigateurs prendront en charge cette fonctionnalité :

La différence entre Object.groupBy() et Map.groupBy()

Object.groupBy() et Map.groupBy() La différence réside en :

Object.groupBy() Grouper les éléments dans un objet JavaScript.

Map.groupBy() Grouper les éléments dans un objet Map.

Manuel complet de Map

Pour une référence complète, veuillez visiter notre :Manuel de JavaScript Map.

Ce manuel contient une description et des exemples de toutes les propriétés et méthodes de Map.