Collections ES6: Utilisation de la carte, set, faiblemap, faiblet

Cet article explore quatre nouvelles collections ES6 et les avantages qu'ils apportent.

La plupart des langages de programmation principaux ont plusieurs types de collections de données. Python a des listes, des tuples et des dictionnaires. Java a des listes, des collections, des cartes et des files d'attente. Ruby a du hachage et des tableaux. Jusqu'à présent, JavaScript n'a que des tableaux. Les objets et les tableaux sont des aides à droite de JavaScript. ES6 introduit quatre nouvelles structures de données qui amélioreront les capacités puissantes et expressives du langage: map, set, faiblet et faiblemap.

points clés

• ES6 introduit quatre nouvelles structures de données: map, set, faiblet et faiblemap. Ces collections permettent une programmation JavaScript plus expressive et puissante.
• MAP et défini dans ES6 sont des collections de paires de valeurs clés de tout type. Ils sont optimisés pour une récupération rapide et fournissent des méthodes pour ajouter, supprimer et faire bouger les valeurs. Cependant, ils ont des références solides aux objets, ce qui peut être coûteux si les objets sont grands et ne sont plus nécessaires.
• ES6 introduit également faiblemap et faiblet, qui sont similaires à MAP et à définir mais maintiennent des références faibles aux objets. Cela signifie que lorsque ces objets ne sont plus nécessaires, ils peuvent être collectés aux ordures, ce qui est très bénéfique pour la gestion de la mémoire.
• Bien que la nouvelle collection ES6 offre une plus grande flexibilité, dans de nombreux cas, les objets JavaScript peuvent toujours être utilisés comme collections. Lorsque vous décidez d'utiliser des objets ou des collections à clé, les développeurs doivent prendre en compte des facteurs tels que la nécessité de recherches de clés dynamiques, l'interchangeabilité des valeurs et la fréquence d'ajout ou de suppression des paires de valeurs clés.

à la recherche de hashmap javascript

hashmap, dictionnaire et hachage sont plusieurs façons dont divers langages de programmation stockent des paires de valeurs clés, et ces structures de données sont optimisées pour une récupération rapide.

Dans ES5, les objets JavaScript (juste n'importe quelle collection de propriétés avec des clés et des valeurs) peuvent simuler des hachages, mais il existe plusieurs inconvénients à l'utilisation d'objets comme hachages.

Désavantage # 1: La clé dans ES5 doit être une chaîne

Les clés de propriété d'objet JavaScript doivent être des chaînes, ce qui limite leur capacité à être une collection de paires de valeurs clés de différents types de données. Bien sûr, vous pouvez lancer d'autres types de données aux chaînes, mais cela ajoute du travail supplémentaire.

Désavantage # 2: les objets ne sont pas intrinsèquement itérables

Les objets ne sont pas conçus comme des collections, il n'y a donc pas de moyen efficace de déterminer le nombre d'attributs d'un objet. (Par exemple, object. keys est lent). Lorsque vous traversez les propriétés d'un objet, vous obtenez également ses propriétés prototypes. Vous pouvez ajouter des propriétés itératives à tous les objets, mais tous les objets ne sont pas destinés à être utilisés comme collections. Vous pouvez utiliser la méthode FOR… In Loop et HasownProperty (), mais ce n'est qu'une solution de contournement. Lorsque vous traversez les propriétés d'un objet, les propriétés ne sont pas nécessairement récupérées dans l'ordre elles ont été insérées.

Désavantage # 3: défis des conflits de méthode intégrés

Les objets ont des méthodes intégrées telles que le constructeur, le tostring et la valeur de. Si l'un d'eux est ajouté en tant que propriété, cela peut entraîner un conflit. Vous pouvez créer un objet nu (non hérité de object.prototype) en utilisant object.create (null), mais ce n'est toujours qu'une solution de contournement.

ES6 contient de nouveaux types de données de collecte, il n'a donc plus besoin d'utiliser des objets et de supporter leurs inconvénients.

Utilisation de la collection de cartes ES6

MAP est la première structure / ensemble de données que nous allons vérifier. Une carte est une collection de paires de valeurs clés de tout type. Il est facile de créer de nouvelles cartes, d'ajouter / supprimer des valeurs, de faire une boucle à travers les clés / valeurs et de déterminer efficacement leur taille. Voici les méthodes clés:

Créez une carte et utilisez des méthodes courantes

<code class="language-javascript">const map = new Map(); // 创建一个新的Map
map.set('hobby', 'cycling'); // 设置键值对

const foods = { dinner: 'Curry', lunch: 'Sandwich', breakfast: 'Eggs' }; // 新对象
const normalfoods = {}; // 新对象

map.set(normalfoods, foods); // 设置两个对象作为键值对

for (const [key, value] of map) {
  console.log(`${key} = ${value}`); // hobby = cycling  [object Object] = [object Object]
}

map.forEach((value, key) => {
  console.log(`${key} = ${value}`);
}, map); // hobby = cycling  [object Object] = [object Object]

map.clear(); // 清除键值对
console.log(map.size === 0); // True
</code>

Exécutez cet exemple sur jsbin

en utilisant set

SET est une liste ordonnée de valeurs, sans doublons. L'ensemble n'est pas indexé comme un tableau, mais accessible à l'aide de clés. Le jeu existe déjà dans Java, Ruby, Python et de nombreuses autres langues. Une différence entre les ensembles ES6 et les ensembles dans d'autres langues est que l'ordre est important dans ES6 (pas dans de nombreuses autres langues). Voici les méthodes d'ensemble de clés:

<code class="language-javascript">const planetsOrderFromSun = new Set();
planetsOrderFromSun.add('Mercury');
planetsOrderFromSun.add('Venus').add('Earth').add('Mars'); // 可链式方法
console.log(planetsOrderFromSun.has('Earth')); // True

planetsOrderFromSun.delete('Mars');
console.log(planetsOrderFromSun.has('Mars')); // False

for (const x of planetsOrderFromSun) {
  console.log(x); // 输入和输出顺序相同 - Mercury Venus Earth
}
console.log(planetsOrderFromSun.size); // 3

planetsOrderFromSun.add('Venus'); // 尝试添加重复项
console.log(planetsOrderFromSun.size); // 仍然是3，没有添加重复项

planetsOrderFromSun.clear();
console.log(planetsOrderFromSun.size); // 0
</code>

Exécutez cet exemple sur jsbin

collections faibles, mémoire et collecte des ordures

La collection JavaScript Garbage est une forme de gestion de la mémoire dans laquelle les objets qui ne sont plus référencés seront automatiquement supprimés et leurs ressources seront recyclées.

La carte et la définition des références aux objets sont obligés d'être tenus et la collecte des ordures n'est pas autorisée. Cela peut devenir coûteux si MAP / SET fait référence à de grands objets qui ne sont plus nécessaires (tels que les éléments DOM qui ont été supprimés du DOM).

Pour résoudre ce problème, ES6 a également introduit deux nouveaux ensembles faibles appelés faibles et faiblets. Ces collections ES6 sont "faibles" car elles permettent des objets qui n'ont plus besoin d'être effacés de la mémoire.

faiblemap

FaibleMap est la troisième nouvelle collection ES6 que nous avons introduite. FaibleMap est similaire à une carte normale, mais a moins de méthodes et il existe les différences ci-dessus dans la collecte des ordures.

<code class="language-javascript">const aboutAuthor = new WeakMap(); // 创建新的WeakMap
const currentAge = {}; // 键必须是对象
const currentCity = {}; // 键必须是对象

aboutAuthor.set(currentAge, 30); // 设置键值
aboutAuthor.set(currentCity, 'Denver'); // 键值可以是不同数据类型

console.log(aboutAuthor.has(currentCity)); // 测试WeakMap是否包含键

aboutAuthor.delete(currentAge); // 删除键
</code>

Cas d'utilisateurs

FaibleMap a plusieurs cas d'utilisation populaires. Ils peuvent être utilisés pour garder les données privées des objets privés ou pour suivre les nœuds / objets DOM.

cas d'utilisation des données privées

L'exemple suivant vient de l'expert JavaScript Nicholas C. Zakas:

<code class="language-javascript">var Person = (function() {
  var privateData = new WeakMap();

  function Person(name) {
    privateData.set(this, { name: name });
  }

  Person.prototype.getName = function() {
    return privateData.get(this).name;
  };

  return Person;
}());
</code>

L'utilisation de faiblemap ici simplifie le processus de maintien des données d'objet privées. Les objets de personne peuvent être référencés, mais PriatedAdAweakmap n'est pas autorisé à accéder en cas d'instance de personne spécifique.

Case d'utilisation du nœud DOM

Le projet Google Polymer utilise FaibleMap dans un extrait de code appelé positionwalker.

PositionWalker suit l'emplacement dans le sous-arbre Dom comme nœud actuel et le décalage dans ce nœud.

FaibleMap est utilisé pour suivre l'édition, la suppression et les changements des nœuds DOM:

<code class="language-javascript">const map = new Map(); // 创建一个新的Map
map.set('hobby', 'cycling'); // 设置键值对

const foods = { dinner: 'Curry', lunch: 'Sandwich', breakfast: 'Eggs' }; // 新对象
const normalfoods = {}; // 新对象

map.set(normalfoods, foods); // 设置两个对象作为键值对

for (const [key, value] of map) {
  console.log(`${key} = ${value}`); // hobby = cycling  [object Object] = [object Object]
}

map.forEach((value, key) => {
  console.log(`${key} = ${value}`);
}, map); // hobby = cycling  [object Object] = [object Object]

map.clear(); // 清除键值对
console.log(map.size === 0); // True
</code>

faibleset

FaibleSet est un ensemble d'ensembles dont les éléments peuvent être collectés à la poubelle lorsque les objets dont ils font référence n'ont plus besoin. LowerSet ne permet pas l'itération. Leurs cas d'utilisation sont assez limités (du moins pour le moment). La plupart des premiers adoptants ont déclaré que la faiblesse peut être utilisée pour marquer des objets sans les modifier. ES6-Feures.org a un exemple d'ajout et de suppression des éléments de faibleSet pour garder une trace de la question de savoir si l'objet a été tagué:

<code class="language-javascript">const planetsOrderFromSun = new Set();
planetsOrderFromSun.add('Mercury');
planetsOrderFromSun.add('Venus').add('Earth').add('Mars'); // 可链式方法
console.log(planetsOrderFromSun.has('Earth')); // True

planetsOrderFromSun.delete('Mars');
console.log(planetsOrderFromSun.has('Mars')); // False

for (const x of planetsOrderFromSun) {
  console.log(x); // 输入和输出顺序相同 - Mercury Venus Earth
}
console.log(planetsOrderFromSun.size); // 3

planetsOrderFromSun.add('Venus'); // 尝试添加重复项
console.log(planetsOrderFromSun.size); // 仍然是3，没有添加重复项

planetsOrderFromSun.clear();
console.log(planetsOrderFromSun.size); // 0
</code>

mapper toutes choses? Records et collection ES6

La carte et le jeu sont une belle nouvelle collection ES6 de paires de valeurs clés. Autrement dit, les objets JavaScript peuvent toujours être utilisés comme collections dans de nombreux cas. Il n'est pas nécessaire de passer à la nouvelle collection ES6 à moins que la situation ne l'exige.

MDN a une bonne liste de questions pour déterminer quand utiliser un objet ou une collection à clé:

Les touches
• sont-elles généralement connues tant qu'elles sont-elles courantes? Avez-vous besoin de les trouver dynamiquement?
• Toutes les valeurs ont le même type et peuvent être utilisées de manière interchangeable?
• avez-vous besoin d'une clé qui n'est pas une chaîne?
• Les paires de valeurs clés sont-elles ajoutées ou supprimées fréquemment?
• avez-vous un nombre (facile à changer) de paires de valeurs clés?
• La collection est-elle itérée?

Les nouvelles collections ES6 produisent un javascript plus facile

Les collections JavaScript étaient auparavant très limitées, mais cela a été corrigé avec ES6. Ces nouvelles collections ES6 amélioreront la puissance et la flexibilité du langage et simplifieront les tâches des développeurs JavaScript qui les adoptent.

---

Cet article fait partie d'une série de développement Web de Microsoft Technology Evangelist and Developinelligence sur l'apprentissage pratique JavaScript, les projets open source et les meilleures pratiques d'interopérabilité, y compris le navigateur Microsoft Edge et le nouveau moteur de rendu Edgehtml. DevelopIntelligence propose des cours de formation et de formation en JavaScript via A SPENDTO, son blog et son site Web de cours axés sur la fin.

Nous vous encourageons à tester une variété de navigateurs et d'appareils, y compris Microsoft Edge, le navigateur par défaut pour Windows 10, et vous pouvez utiliser les outils gratuits sur Dev.microsoftedge.com, y compris le suivi du problème Edgehtml où vous pouvez Signaler ou rechercher des problèmes Edgehtml, tels que le rendu du site Web ou les problèmes de conformité standard. Visitez également le blog Edge pour les dernières informations des développeurs et des experts de Microsoft.

FAQ sur les collections ES6 (FAQ): carte, set, faiblemap, faiblet

Quelle est la principale différence entre MAP et FaibleMap dans JavaScript ES6?

Dans JavaScript ES6, MAP et faiblemap sont utilisés pour stocker les paires de valeurs clés. Cependant, il existe des différences significatives entre eux. Tout d'abord, dans MAP, la clé peut être de n'importe quel type, tandis que dans faiblemap, la clé doit être un objet. Deuxièmement, MAP a une propriété de taille qui vous permet de vérifier le nombre de paires de valeurs clés, mais FaibleMap n'a pas cette propriété. Enfin, MAP contient de fortes références aux objets clés, ce qui signifie que tant que la carte existe, elles ne sont pas éligibles à la collecte des ordures. LowerMap, en revanche, contient des références faibles à des objets clés, ce qui signifie que s'il n'y a pas d'autres références à l'objet, il peut être collecté par ordures.

Comment itérer sur lame faible ou faible dans JavaScript ES6?

Contrairement à la carte et au set, FaibleMap et Waiwset n'ont aucun moyen d'itérer sur leurs éléments. En effet, ils sont conçus pour contenir des références faibles à leurs clés (faiblesmap) ou valeurs (faiblet), ce qui signifie que ceux-ci peuvent être collectés à tout moment. Par conséquent, il n'y a aucune garantie que l'élément existera toujours lorsqu'il essaie de l'itréter dessus. Si vous avez besoin d'itérer la collection, vous devez utiliser la carte ou définir à la place.

Puis-je utiliser le type de données d'origine comme clé dans FaibleMap ou faibleSet?

Non, vous ne pouvez pas utiliser le type de données d'origine comme clé dans faiblemap ou faibleset. Les clés de ces collections doivent être des objets. En effet, la boutique faible et la faiblesse détiennent des références faibles à leurs clés, ce qui signifie que s'il n'y a pas d'autres références à eux, les clés peuvent être collectées à la poubelle. Les types de données primitifs (tels que les nombres et les chaînes) ne sont pas des ordures collectées comme des objets, ils ne peuvent donc pas être utilisés comme clés dans ces collections.

Pourquoi devrais-je utiliser FaibleMap ou faibleSet au lieu de la carte ou de la définition?

faiblemap et faiblet ont des caractéristiques uniques, et dans certains cas, ils peuvent être plus appropriés que la carte ou le réglage. Parce qu'ils ont des références faibles à leurs clés (faiblemap) ou à leurs valeurs (faiblet), ils peuvent être collectés à des ordures lorsqu'ils ne sont plus utilisés. Ceci est utile si vous souhaitez associer d'autres données à un objet, mais que vous ne souhaitez pas empêcher l'objet de la collecte des ordures lorsqu'il n'est plus nécessaire. En outre, comme le faiblemap et le faibleSet n'ont pas de moyen d'itérer sur leurs éléments, ils peuvent fournir un certain niveau de confidentialité pour les données qu'ils stockent.

Que se passe-t-il lorsqu'une clé dans une carte faible ou une faiblesse est collectée à la poubelle?

Lorsque les clés de faiblemap ou de faibleSet sont collectées, les entrées correspondantes de la collection seront automatiquement supprimées. En effet, ces ensembles contiennent des références faibles à leurs clés, ce qui signifie que lorsqu'ils ne sont plus utilisés, les clés peuvent être collectées aux ordures. Cette fonctionnalité est utile pour gérer la mémoire dans les applications JavaScript car elle garantit que les données associées aux objets qui ne sont plus utilisées seront également effacées.

Puis-je utiliser FaibleMap ou Waiwset pour stocker des données temporaires?

Oui, les maphes faibles et les faibles sont idéaux pour stocker des données temporaires. Parce qu'ils ont des références faibles à leurs clés (faiblemap) ou à leurs valeurs (faiblet), ils peuvent être collectés à des ordures lorsqu'ils ne sont plus utilisés. Cela signifie que lorsque les clés sont collectées à la poubelle, les données stockées dans ces ensembles sont également effacées. Ceci est utile pour stocker ce qui n'est nécessaire que pendant une courte période, car vous n'avez pas à vous soucier de le nettoyer manuellement.

Comment vérifier si FaibleMap ou Waiwset contient une certaine clé ou valeur?

Vous pouvez utiliser la méthode HAS pour vérifier si le faiblemap ou la faiblesse contient une certaine clé. Cette méthode renvoie une valeur booléenne indiquant si la clé existe dans la collection. Cependant, n'oubliez pas que vous ne pouvez pas utiliser cette méthode pour vérifier une certaine valeur en faibleSet, car les valeurs de cet ensemble sont inaccessibles.

Puis-je supprimer une entrée d'un faiblemap ou d'un point faible?

Oui, vous pouvez utiliser la méthode de suppression pour supprimer l'entrée de FaibleMap. Cette méthode supprime l'entrée associée à la clé donnée et renvoie une valeur booléenne indiquant si la clé existe dans la collection. Cependant, vous ne pouvez pas supprimer les entrées de FaibleSet car cette collection n'a pas de méthode de suppression.

Puis-je effacer toutes les entrées dans faiblemap ou faiblet?

Non, vous ne pouvez pas effacer toutes les entrées dans FaibleMap ou LowerSet. Ces collections n'ont pas de méthode claire, qui est disponible en carte et en jeu. En effet, les maphes et les faibles sont conçus pour nettoyer automatiquement les clés lorsqu'ils sont collectés à la poubelle.

Puis-je obtenir la taille d'un faiblemap ou de faiblet?

Non, vous ne pouvez pas obtenir la taille du faiblemap ou de la faiblesse. Ces collections ne disposent pas d'une propriété de taille, qui est disponible en carte et en jeu. En effet, la taille du faiblemap ou de la faiblesse peut être modifiée à tout moment en raison de la collecte des ordures.

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!