Maison >interface Web >js tutoriel >Comment convertir un objet normal en carte ES6 à l'aide de JavaScript ?
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() .
Mapdans 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.
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().
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);
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.
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().
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);
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.
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.
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);
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.
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!