Les membres de la carte es6 sont-ils uniques ?

青灯夜游
Libérer: 2022-10-31 18:43:52
original
1694 Les gens l'ont consulté

Les membres de la carte es6 sont uniques. La nouvelle structure de données Map d'ES6 est similaire à un objet. La valeur clé n'est pas limitée aux chaînes et les valeurs des membres sont uniques. La structure Map fournit une correspondance « valeur-valeur » et constitue une implémentation plus complète de la structure de hachage. Les objets cartographiques stockent les paires clé-valeur et mémorisent l'ordre d'insertion d'origine des clés ; toute valeur (objet ou primitive) peut être utilisée comme clé ou valeur.

Les membres de la carte es6 sont-ils uniques ?

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

Map et Set sont tous deux de nouvelles structures de données dans ES6

  • Map est similaire à un objet, la valeur clé n'est pas limitée à une chaîne et la valeur membre est unique.

  • Set est similaire à un tableau, avec des valeurs de membre uniques.

Concept de base de la carte

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 « clé-valeur », Map est plus adaptée que Object.

Fonctionnalités de la carte

  • Les objets cartographiques enregistrent les paires clé-valeur et sont capables de mémoriser l'ordre d'insertion d'origine des clés.

  • Toute valeur (objet ou primitive) peut être utilisée comme clé ou valeur.

  • Map est une nouvelle structure de données introduite dans ES6, vous pouvez vous référer à ES6 Map and Set.

La différence entre les cartes et les objets

  • 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.

  • Les valeurs clés dans la Map sont ordonnées (principe FIFO), mais les clés ajoutées à l'objet ne le sont pas.

    Explication officielle concernant les objets non ordonnés : 1.Un objet est un membre du type Objet. C'est une collection non ordonnée de propriétés dont chacune contient une valeur primitive, objet ou fonction. Une fonction stockée dans une propriété d’un objet est appelé une méthode. 2. Le moteur d'analyse JavaScript de Chrome Opera suit la nouvelle spécification ECMA-262, cinquième édition. Par conséquent, lorsque vous utilisez une instruction for-in pour parcourir les propriétés d'un objet, l'ordre de parcours n'est pas l'ordre de construction des propriétés. Et JavaScript pour IE6 IE7 IE8 Firefox Safari Le moteur d'analyse suit l'ancienne spécification ECMA-262 de troisième édition, et l'ordre de parcours des attributs est déterminé par l'ordre dans lequel les attributs sont construits. Le nombre de paires clé-valeur de

  • Map peut être obtenu à partir de l'attribut size, tandis que le nombre de paires clé-valeur d'Object ne peut être calculé que manuellement.

  • 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.

Propriété Map

  • Map.prototype.size – Renvoie le nombre de paires clé/valeur dans l'objet Map. Map.prototype.size – 返回 Map 对象键/值对的数量。

Map 操作方法

  • Map.prototype.clear() – 移除 Map 对象的所有键/值对 。
  • Map.prototype.set() – 设置键值对,返回该 Map 对象。
  • Map.prototype.get() – 返回键对应的值,如果不存在,则返回 undefined。
  • Map.prototype.has() – 返回一个布尔值,用于判断 Map 中是否包含键对应的值。
  • Map.prototype.delete() – 删除 Map 中的元素,删除成功返回 true,失败返回 false。

Map 循环方法

Map 的遍历顺序就是插入顺序。

  • Map.prototype.keys():返回键名的遍历器。
  • Map.prototype.values():返回键值的遍历器。
  • Map.prototype.entries():返回所有成员的遍历器。
  • Map.prototype.forEach():遍历 Map 的所有成员。

其他方法

  • for of
Méthode d'opération Map

Map.prototype.clear() – Supprimez toutes les paires clé/valeur de l'objet Map.

Map.prototype.set() – Définissez des paires clé-valeur et renvoyez l'objet Map.

Map.prototype.get() – Renvoie la valeur correspondant à la clé Si elle n'existe pas, elle renvoie undefined.

Map.prototype.has() – Renvoie une valeur booléenne utilisée pour déterminer si la carte contient la valeur correspondant à la clé.

Map.prototype.delete() – Supprime les éléments de la carte. Il renvoie vrai si la suppression est réussie et faux si elle échoue.

Méthode de boucle de carte

L'ordre de parcours de la carte est l'ordre d'insertion.

Map.prototype.keys() : renvoie un traverseur de noms de clés. Map.prototype.values() : renvoie un traverseur de valeurs clés.

Map.prototype.entries() : renvoie un traverseur de tous les membres.

Map.prototype.forEach() : parcourez tous les membres de Map.

Autres méthodes

for of Puisqu'il existe un itérable, vous pouvez également utiliser cette méthode🎜🎜🎜🎜Commencer à créer 🎜🎜🎜 Utilisez le type de carte et le nouveau mot-clé pour créer une carte : 🎜🎜Pas seulement des tableaux, toute structure de données avec une interface Iterator et chaque membre est un tableau de deux éléments Ainsi, le tableau Set Map peut créer Map🎜🎜🎜créer une carte vide et ajouter 🎜🎜
let map1 = new Map();
map1.set('123',123)
Copier après la connexion
🎜🎜array pour créer Map🎜🎜
const m2 = new Map([['baz', 3]]);
Copier après la connexion
🎜🎜set créer Map🎜🎜
const set = new Set([
  ['foo', 1],
  ['bar', 2]
]);

const m3 = new Map(set);
Copier après la connexion
🎜🎜map créer une nouvelle carte🎜🎜🎜note m3 === m2 //false🎜
const m3 = new Map(m2);
Copier après la connexion
🎜🎜Exemple : Que peut-on faire🎜🎜🎜🎜La plus grande différence entre les objets : Plusieurs types de clés🎜🎜

字符串

var myMap = new Map(); 
var keyString = "a string"; 
myMap.set(keyString, "和键'a string'关联的值");
Copier après la connexion

对象

var myMap = new Map(); 
var keyObj = {}
myMap.set(keyObj, "和键 keyObj 关联的值");
Copier après la connexion

函数

var myMap = new Map(); 
var keyFunc = function () {} // 函数 
myMap.set(keyFunc, "和键 keyFunc 关联的值");
Copier après la connexion

NaN

var myMap = new Map(); 
myMap.set(NaN, "not a number");
Copier après la connexion

Map 遍历成员方法

keys() , values() , entries()Map 的遍历顺序就是插入顺序

const map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);

for (let key of map.keys()) {
  console.log(key);
}
// "F"
// "T"

for (let value of map.values()) {
  console.log(value);
}
// "no"
// "yes"

for (let item of map.entries()) {
  console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"

// 或者
for (let [key, value] of map.entries()) {
  console.log(key, value);
}
// "F" "no"
// "T" "yes"

// 等同于使用map.entries()
for (let [key, value] of map) {
  console.log(key, value);
}
Copier après la connexion

使用扩展运算符可以快速转数组

const map = new Map([  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);

[...map.keys()]
// [1, 2, 3]

[...map.values()]
// ['one', 'two', 'three']

[...map.entries()]
// [[1,'one'], [2, 'two'], [3, 'three']]

[...map]
// [[1,'one'], [2, 'two'], [3, 'three']]
Copier après la connexion

转为数组后,可以使用数组的map,filter方法

const map0 = new Map()
  .set(1, 'a')
  .set(2, 'b')
  .set(3, 'c');

const map1 = new Map(
  [...map0].filter(([k, v]) => k < 3)
);
// 产生 Map 结构 {1 => &#39;a&#39;, 2 => &#39;b&#39;}

const map2 = new Map(
  [...map0].map(([k, v]) => [k * 2, &#39;_&#39; + v])
    );
// 产生 Map 结构 {2 => &#39;_a&#39;, 4 => &#39;_b&#39;, 6 => &#39;_c&#39;}
Copier après la connexion

Map 增 删 查 清空

const m = new Map();
const o = {p: &#39;Hello World&#39;};

m.set(o, &#39;content&#39;)
m.get(o) // "content"

m.has(o) // true
m.delete(o) // true
m.has(o) // false
m.clear()
Copier après la connexion

与其他数据结构的互相转换

(1)Map 转为数组

前面已经提过,Map 转为数组最方便的方法,就是使用扩展运算符(...)。

const myMap = new Map()
  .set(true, 7)
  .set({foo: 3}, [&#39;abc&#39;]);
[...myMap]
// [ [ true, 7 ], [ { foo: 3 }, [ &#39;abc&#39; ] ] ]

var outArray = Array.from(myMap);
Copier après la connexion

(2)数组 转为 Map

将数组传入 Map 构造函数,就可以转为 Map。

new Map([
  [true, 7],
  [{foo: 3}, [&#39;abc&#39;]]
])
// Map {
//   true => 7,
//   Object {foo: 3} => [&#39;abc&#39;]
// }
Copier après la connexion

(3)Map 转为对象

如果所有 Map 的键都是字符串,它可以无损地转为对象。

function strMapToObj(strMap) {
  let obj = Object.create(null);
  for (let [k,v] of strMap) {
    obj[k] = v;
  }
  return obj;
}

const myMap = new Map()
  .set(&#39;yes&#39;, true)
  .set(&#39;no&#39;, false);
strMapToObj(myMap)
// { yes: true, no: false }
Copier après la connexion

如果有非字符串的键名,那么这个键名会被转成字符串,再作为对象的键名。

(4)对象转为 Map

对象转为 Map 可以通过Object.entries()

let obj = {"a":1, "b":2};
let map = new Map(Object.entries(obj));
Copier après la connexion

此外,也可以自己实现一个转换函数。

function objToStrMap(obj) {
  let strMap = new Map();
  for (let k of Object.keys(obj)) {
    strMap.set(k, obj[k]);
  }
  return strMap;
}

objToStrMap({yes: true, no: false})
// Map {"yes" => true, "no" => false}
Copier après la connexion

(5)Map 转为 JSON

Map 转为 JSON 要区分两种情况。一种情况是,Map 的键名都是字符串,这时可以选择转为对象 JSON。

function strMapToJson(strMap) {
  return JSON.stringify(strMapToObj(strMap));
}

let myMap = new Map().set(&#39;yes&#39;, true).set(&#39;no&#39;, false);
strMapToJson(myMap)
// &#39;{"yes":true,"no":false}&#39;
Copier après la connexion

另一种情况是,Map 的键名有非字符串,这时可以选择转为数组 JSON。

function mapToArrayJson(map) {
  return JSON.stringify([...map]);
}

let myMap = new Map().set(true, 7).set({foo: 3}, [&#39;abc&#39;]);
mapToArrayJson(myMap)
// &#39;[[true,7],[{"foo":3},["abc"]]]&#39;
Copier après la connexion

(6)JSON 转为 Map

JSON 转为 Map,正常情况下,所有键名都是字符串。

function jsonToStrMap(jsonStr) {
  return objToStrMap(JSON.parse(jsonStr));
}

jsonToStrMap(&#39;{"yes": true, "no": false}&#39;)
// Map {&#39;yes&#39; => true, &#39;no&#39; => false}
Copier après la connexion

但是,有一种特殊情况,整个 JSON 就是一个数组,且每个数组成员本身,又是一个有两个成员的数组。这时,它可以一一对应地转为 Map。这往往是 Map 转为数组 JSON 的逆操作。

function jsonToMap(jsonStr) {
  return new Map(JSON.parse(jsonStr));
}

jsonToMap(&#39;[[true,7],[{"foo":3},["abc"]]]&#39;)
// Map {true => 7, Object {foo: 3} => [&#39;abc&#39;]}
Copier après la connexion

其他

Map 的合并

var first = new Map([[1, &#39;one&#39;], [2, &#39;two&#39;], [3, &#39;three&#39;],]); 
var second = new Map([[1, &#39;uno&#39;], [2, &#39;dos&#39;]]); // 合并两个 Map 对象时,如果有重复的键值,则后面的会覆盖前面的,对应值即 uno,dos, three 
var merged = new Map([...first, ...second]);
Copier après la connexion

Map 的克隆

var myMap1 = new Map([["key1", "value1"], ["key2", "value2"]]); 
var myMap2 = new Map(myMap1); 
console.log(original === clone); // 打印 false。 Map 对象构造函数生成实例,迭代出新的对象。
Copier après la connexion

注意事项

注意,只有对同一个对象的引用,Map 结构才将其视为同一个键。这一点要非常小心。

const map = new Map();

map.set([&#39;a&#39;], 555);
map.get([&#39;a&#39;]) // undefined
Copier après la connexion

虽然NaN不严格相等于自身,但 Map 将其视为同一个键。

let map = new Map();
map.set(NaN, 123);
map.get(NaN) // 123
Copier après la connexion

【相关推荐:javascript视频教程编程视频

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:
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