La carte es6 est-elle un type de référence ?

map est un type de référence ; map (set) est un nouveau type de données de référence dans es6, qui représente la relation de mappage des données. Les données du type de données de collection de cartes sont stockées de manière « clé/valeur ». Vous pouvez utiliser les propriétés de l'objet comme clé et utiliser les propriétés pour référencer la valeur. La carte peut être créée en utilisant new, par exemple « const ». maCarte = new Map();" .

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3.

map est un type de référence.

es6 map

Avant ES6, l'implémentation de « clé » => « valeur » en JavaScript, qui est ce que nous appelons souvent les paires clé-valeur, était réalisée à l'aide d'Object. Cependant, cette méthode d'implémentation pose des problèmes dans des scénarios particuliers. ES6 a introduit un nouveau type de collection appelé Map, qui apporte au langage un véritable mécanisme de stockage de paires clé-valeur.

map (set) est un nouveau type de données de référence dans es6, qui représente la relation de mappage des données ; les données dans le type de données de collection de cartes sont stockées sous la forme de "clé/valeur", et vous pouvez utiliser les propriétés de l'objet comme clé. Utilisez Propriétés pour référencer des valeurs.

1-1 Créer une carte

Utiliser le mot-clé new pour instancier une cartenew关键字来实例一个map

let m = new Map();

console.log(m);
// Map(0) {}

创建时初始化:
传入一个二维数组参数(可迭代对象，内部以数组的方式传入键值)
每个子数组，第一个元素是map对应的key， 第二个元素是map对应的value

let m = new Map([[{}, 222], [{}, '123']]);

console.log(m);
// Map(2) { {} => 222, {} => '123' }

1-2 Map Api

1-2-1 添加映射元素

通过set()方法添加，传入两个参数，第一个传入映射的键，第二个传入映射的值。返回的是该映射集合（意味着可以链式添加）

let m = new Map();

m.set('prop', '值');

console.log(m);
// Map(1) { 'prop' => '值' }

链式添加键值

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

console.log(m);
// Map(3) { 'prop' => '值', 'prop2' => false, 'num' => { id: 13 } }

1-2-2 映射集合长度

使用size

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

console.log(m.size);

Initialiser lors de la création :

Passer un paramètre de tableau bidimensionnel (objet itérable , La valeur clé est transmise sous forme de tableau en interne) Pour chaque sous-tableau, le premier élément est la clé correspondant à la carte, et le deuxième élément est la valeur correspondant à la map

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

console.log(m.get('prop2'));
// false

1-2 Map Api

1-2-1 Ajouter des éléments de cartographie

Ajouter via la méthode set(), passez deux paramètres, le premier est la clé de la carte et le second est la valeur de la carte. Ce qui est renvoyé est l'ensemble de mappages (ce qui signifie qu'il peut être ajouté dans une chaîne)

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

m.delete('prop2');
// true

console.log(m.get('prop2'), m.size);
// undefined 2

Valeur de clé enchaînée

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

m.delete('prop2');
// true

console.log(m.has('prop2'), m.has('num'));
// false  true

1-2-2 longueur de l'ensemble de mappages

Utilisez L'attribut size peut obtenir le nombre d'éléments dans la collection actuelle

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

m.clear();
// true

console.log(m);
// Map(0) {}

1-2-3 Récupérer l'élément

Récupérer l'élément via la méthode get() et transmettre la clé

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

console.log(m.entries === m[Symbol.iterator]);// true

for(let k1 of m.entries()){
    console.log(k1);
    // [ 'prop', '值' ]
    // [ 'prop2', false ]
    // [ 'num', { id: 13 } ]
    // 遍历的属性即对应映射元素的键值对数组
}

for(let k2 of m.keys()){
    console.log(k2);
    // prop
    // prop2
    // num
    // 遍历的属性对应映射元素的键
}

for(let k3 of m.values()){
    console.log(k3);
    // 值
    // false
    // { id: 13 }
    // 遍历的属性对应映射元素的值
}

for(let k4 of m[Symbol.iterator]()){
    console.log(k4);
    // [ 'prop', '值' ]
    // [ 'prop2', false ]
    // [ 'num', { id: 13 } ]
    // 遍历的属性即对应映射元素的键值对数组
}

1-2-4 Supprimer un élément

Supprimer un élément de la collection mappée via la méthode delete() et renvoyer une valeur booléenne indiquant le succès ou l'échec de la suppression
rrreee

1- 2-5 Détecter si l'élément existe Utilisez la méthode has() pour détecter si l'élément cible existe et renvoyer la valeur booléenne du résultat de la détectionrrreee

• 1-2-6 Méthode d'effacement de l'élément

  Utilisez la méthode clear() pour effacer tous les éléments et renvoyez la valeur booléenne d'une effacement réussie Value
rrreee

• 1-3 Séquence et itération

• map peut itérer les éléments en fonction de l'ordre d'insertion

  Le L'instance de mappage fournira (itérateur). Elle peut générer un tableau sous la forme de [clé, valeur] dans l'ordre d'insertion Oui. Parcourez l'interface de l'itérateur de la méthode entrées() (ou de l'interface Symbol.iterator fournie).

  rrreee

• 1-4 Comparaison avec l'objet

Utilisation de la mémoireLes différences dans les navigateurs entraîneront une utilisation différente de la mémoire des deux méthodes de stockage. Cependant, étant donné la taille de la mémoire, la carte stocke environ 50. % de paires clé-valeur en plus que Object

🎜🎜Performances d'insertion🎜🎜Vitesse d'insertion Les performances de map et Object sont à peu près les mêmes, mais si le code implique un grand nombre d'insertions, il est recommandé d'utiliser map🎜🎜🎜🎜 La différence de vitesse de recherche🎜🎜 Petite, l'objet est meilleur lorsqu'il ne contient qu'un petit nombre de paires clé-valeur🎜🎜🎜🎜Performances de suppression🎜🎜Les performances delete() de l'objet sont médiocres, tandis que les performances delete() de la carte sont bonnes si. les données impliquent un grand nombre d'opérations de suppression, il est recommandé d'utiliser map🎜🎜🎜🎜🎜【Recommandations associées : 🎜Tutoriel vidéo javascript🎜, 🎜Vidéo de programmation🎜】🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!