Maison > interface Web > js tutoriel > le corps du texte

Comment convertir un objet normal en carte ES6 à l'aide de JavaScript ?

WBOY
Libérer: 2023-08-27 22:41:16
avant
1235 Les gens l'ont consulté

如何使用 JavaScript 将普通对象转换为 ES6 Map?

Il existe de nombreuses façons de convertir des objets ordinaires en cartes ES6 en JavaScript. Le moyen le plus simple et le plus efficace est d'utiliser la fonction Object.entries() et le constructeur Map(). En revanche, des alternatives plus flexibles incluent Object.keys() et Array.prototype.forEach() ainsi que les méthodes de fonction for...in loop et Map() .

Map

dans ES6 est une collection de paires clé-valeur. Ici, nous pouvons utiliser n'importe quel type d'objet comme clé, y compris les types de données primitifs comme les chaînes et les nombres. Les valeurs de la carte peuvent être des objets de n'importe quel type.

La principale différence entre Map et Object est que dans Map, les clés peuvent être de n'importe quel type de données alors que dans Object, elles sont toujours converties en chaîne.

Néanmoins, les cartes présentent certains avantages par rapport aux objets normaux, tels que l'itérabilité et l'ordre garanti des éléments. Cet article explique comment convertir des objets ordinaires en cartes ES6 à l'aide de JavaScript.

Méthode 1 : utilisez Object.entries() et Map()

La première méthode de conversion d'un mappage ES6 d'objet normal que nous allons apprendre aujourd'hui se compose de deux étapes -

  • Utilisez la méthode Object.entries() pour obtenir un tableau de paires clé-valeur à partir d'un objet

  • Ensuite, transmettez ce tableau au constructeur Map().

Exemple

Chaque tableau du tableau renvoyé par la méthode Object.entries() représente une paire clé-valeur dans l'objet. Voici un exemple de la façon de changer un objet normal en une carte ES6 à l'aide des constructeurs Object.entries() et Map() -

let plainObject = { "one": 1, "two": 2, "three": 3 };
let map = new Map(Object.entries(plainObject));
console.log(map); 
Copier après la connexion

Dans cet exemple, utilisez la fonction Object.entries() pour convertir un objet normal en un tableau de paires clé-valeur. Ce tableau est ensuite transmis à la fonction Map(), qui génère un nouvel objet Map à l'aide de ces paires clé-valeur.

La méthode Object.entries() ne nécessite qu'une seule ligne de code et est entièrement prise en charge par la plupart des navigateurs modernes. Cependant, cette approche est limitée aux objets dotés de propriétés énumérables et exclut les propriétés dotées de clés symboliques.

Méthode 2 : Utiliser la boucle for...in et le constructeur Map()

Voyons maintenant une autre façon de convertir un objet normal en carte ES6. La méthode comprend les étapes suivantes

  • Utilisez une boucle for...in pour parcourir les propriétés d'un objet

  • Ajoutez-les à un nouvel objet Map à l'aide de la méthode Map.set().

Exemple

Voici un exemple de la façon de convertir un objet normal en une carte ES6 à l'aide d'une boucle for...in et du constructeur Map() -

let plainObject = { "one": 1, "two": 2, "three": 3 };
let map = new Map();
for (let key in plainObject) {
   map.set(key, plainObject[key]);
}
console.log(map); 
Copier après la connexion

Dans cette méthode, nous bouclons et définissons les propriétés de la carte, ce qui peut rendre cette méthode moins efficace que la première méthode.

Cependant, cette méthode fonctionne également pour les objets avec des propriétés non énumérables et des propriétés avec des symboles comme clés.

Méthode 3 : utilisez Object.keys() et Array.prototype.forEach()

Dans cette méthode, nous suivons les étapes indiquées ci-dessous -

  • Nous utilisons d'abord Object.keys(obj) pour obtenir le tableau de clés d'objet.

  • Ensuite, nous utilisons la méthode Array.prototype.forEach() pour parcourir les clés

  • Ensuite, nous utilisons la méthode Map.set() pour ajouter les paires clé-valeur à la carte.

Exemple

let plainObject = { "one": 1, "two": 2, "three": 3 };
let map = new Map();
Object.keys(plainObject).forEach(key => {
   map.set(key, plainObject[key]);
});
console.log(map);
Copier après la connexion

Il est important de se rappeler que les méthodes de la boucle for...in, Object.keys() et Array.prototype.forEach() renverront toutes les objets de propriété dans un ordre différent de celui de la définition d'origine. Les propriétés seront renvoyées dans l'ordre d'énumération.

Cependant, la méthode de fonction Map() renverra les paires clé-valeur dans l'ordre dans lequel elles sont transmises.

Conclusion

En fonction des exigences spécifiques de votre projet, vous pouvez choisir la méthode qui correspond le mieux à vos besoins. Gardez à l’esprit que si l’ordre est important dans votre cas d’utilisation, la méthode constructeur Map() est le meilleur choix ; sinon, d’autres méthodes fonctionneront correctement ;

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!

source:tutorialspoint.com
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
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!