Maison > interface Web > Questions et réponses frontales > Que signifie la carte dans es6 ?

Que signifie la carte dans es6 ?

WBOY
Libérer: 2022-03-30 18:41:32
original
4281 Les gens l'ont consulté

Dans es6, map est une structure de données, qui est une collection de « clé-valeur ». La clé peut être n'importe quel type de données ; la map fournit une correspondance « valeur à valeur » et constitue une implémentation de structure de hachage plus complète. la syntaxe est "new Map([iterable])".

Que signifie la carte dans es6 ?

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

Que signifie Map dans ES6 ?

Qu'est-ce que Map ?

Avant, il n'y avait pas de collecte de données comme Map dans ES5, et elle n'était ajoutée que dans ES6.

Map est une collection de clé-valeur. La clé peut être n'importe quel type de données, similaire à un objet, mais la clé d'un objet ne peut être qu'une chaîne.

ES6 fournit une structure de données cartographiques. Il est similaire à un objet et constitue également une collection de paires clé-valeur, mais la portée de « clé » ne se limite pas aux chaînes. Différents types de valeurs (y compris les objets) peuvent être utilisés comme clés.

En d'autres termes, la structure Object fournit une correspondance « chaîne-valeur » et la structure Map fournit une correspondance « valeur-valeur », qui est une implémentation plus complète de la structure Hash.

Si vous avez besoin d'une structure de données "paire clé-valeur", Map est plus adaptée que Object.

Syntaxe

new Map([iterable])
Copier après la connexion

Iterable peut être un tableau ou un autre objet itérable, dont les éléments sont des paires clé-valeur (tableau de deux éléments, par exemple : [[ 1, 'one' ],[ 2, 'two' ] ] ).

Chaque paire clé-valeur sera ajoutée à une nouvelle carte.

null sera traité comme indéfini.

Comparaison d'un objet et d'une carte :

Les objets et les cartes sont similaires dans le sens où ils vous permettent tous deux d'accéder à une valeur par clé, de supprimer une clé et de détecter si une clé est liée à une valeur. Par conséquent (et il n’existe pas d’alternative intégrée), nous avons toujours traité les objets comme des cartes. Cependant, il existe des différences importantes entre les cartes et les objets. L'utilisation de Map sera un meilleur choix dans les situations suivantes : la clé d'un objet ne peut être qu'une chaîne ou des symboles, mais la clé d'une carte peut être n'importe quelle valeur. , y compris les fonctions, les objets et les types de base.

  • Les valeurs clés dans une carte sont ordonnées, mais les clés ajoutées à un objet ne le sont pas. Par conséquent, lors d'une itération, l'objet Map renvoie les valeurs clés dans l'ordre d'insertion.

  • Vous pouvez obtenir directement le nombre de paires clé-valeur d'une carte via l'attribut size, tandis que le nombre de paires clé-valeur d'un objet ne peut être calculé que manuellement.

  • Map peut être itéré directement, tandis que l'itération d'Object nécessite d'abord d'obtenir son tableau de clés, puis d'itérer.

  • L'objet a son propre prototype et les noms de clés sur la chaîne de prototypes peuvent entrer en conflit avec les noms de clés que vous avez définis sur l'objet. Bien que ES5 puisse utiliser map = Object.create(null) pour créer un objet sans prototype, cette utilisation est moins courante.

  • Map présentera certains avantages en termes de performances dans les scénarios impliquant des ajouts et des suppressions fréquents de paires clé-valeur.

  • L'exemple est le suivant :

  • // 字符串作为key,和JS对象类似
    var map = new Map()
    // set
    map.set('name', 'John')//两个参数,分为对应map中key,value,  推进去的时候会自动检查类型,Object,String,Array等l
    map.set('age', 29)
    // get
    map.get('name') // John
    map.get('age')  // 29
    这么对代码,看起来确实没有JS对象简洁
    但Map的强大之处在于它的key可以是任意类型
    // 对象作为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) // '宽高'
    Copier après la connexion
    Résultat :



    [Recommandations associées :

    tutoriel vidéo javascriptQue signifie la carte dans es6 ?,

    front-end web

    ]

    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!

Étiquettes associées:
es6
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal