Explication détaillée de Map/WeakMap dans les compétences ECMAScript6_javascript

L'objet JS lui-même est une structure clé-valeur. Pourquoi ES6 doit-il ajouter Map ? Quelle est la différence entre lui et les objets JS ordinaires ?

1.Carte

1. Constructeur de carte

Regardons d'abord l'utilisation simple de Map

// 字符串作为key， 和JS对象类似
var map = new Map()
// set
map.set('name', 'John')
map.set('age', 29)
// get
map.get('name') // John
map.get('age') // 29

Avec ce code, il semble qu'il ne soit pas aussi concis que les objets JS

Mais la puissance de Map est que sa clé peut être de n'importe quel type

// 对象作为key演示
var xy = {x: 10, y: 20}  // 坐标
var wh = {w: 100, h: 200} // 宽高
var map = new Map()
// set
map.set(xy, '坐标')
map.set(wh, '宽高')
// get
map.get(xy) // '坐标'
map.get(wh) // '宽高'

Ce qui précède montre une carte utilisant des objets comme clés. Ce qui suit est une illustration

Le constructeur Map prend également en charge le passage de tableaux

var map = new Map([["name", "John"], ["age", "29"]])
 
// 遍历key
for (var key of map.keys()) {
  console.log(key) // name, age
}

2. Itération

Utilisez for of pour parcourir Map comme Set, appelez map.keys() pour les clés, map.values() pour les valeurs et map.entries() pour les entités clé-valeur

var map = new Map()
// set
map.set('name', 'John')
map.set('age', 29)
// get
map.get('name') // 'John'
map.get('age') // 29
 
// 遍历key
for (var key of map.keys()) {
  console.log(key)
}
 
// 遍历value
for (var val of map.values()) {
  console.log(val)
}
 
// 遍历实体
for (var arr of map.entries()) {
  console.log('key: ' + arr[0] + ', value: ' + arr[1])
}
 
// 遍历实体的简写
for (var [key, val] of map.entries()) {
  console.log('key: ' + key + ', value: ' + val)
}
 

3. Méthodes et propriétés

2. Carte faible

Différences par rapport à la carte

N'accepte pas les valeurs de type de base comme noms de clé
Pas de clés, valeurs, entrées et taille
Il existe les méthodes suivantes

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.