Maison > Article > interface Web > Comment créer un nouvel objet à partir d'un objet spécifié où toutes les clés sont en minuscules en JavaScript ?

Comment créer un nouvel objet à partir d'un objet spécifié où toutes les clés sont en minuscules en JavaScript ?

WBOYavant: 2023-09-17 12:09:06484parcourir

如何从指定对象创建一个新对象，其中所有键在 JavaScript 中都是小写？

En JavaScript, il existe de nombreuses façons de créer de nouveaux objets à partir d'anciens objets. Créer un nouvel objet avec les mêmes clés qu'un objet existant mais avec toutes les clés en minuscules est un cas d'utilisation courant. Ceci est utile lorsque vous travaillez avec des données provenant de nombreuses sources avec une casse de clé irrégulière. Dans cet article de blog, nous examinerons diverses méthodes JavaScript pour créer de nouveaux objets à l'aide de touches minuscules.

Avant de faire cela, cependant, il est important de se rappeler que même si la création de nouveaux objets avec des touches minuscules peut être utile lorsque vous travaillez avec des données provenant de diverses sources, il est également important d'être conscient des conséquences possibles d'un changement de casse des touches.

Par exemple, cela pourrait casser du code qui attend actuellement qu'une clé se trouve dans une certaine situation, ou cela pourrait interférer avec une API ou une base de données externe qui s'attend à ce qu'une clé se trouve dans une certaine situation. Avant de modifier la casse clé d'un objet, exécutez toujours des tests approfondis sur votre code et tenez compte des exigences spécifiques de votre cas d'utilisation.

Object.assign()

De nouveaux objets peuvent être créés en joignant un ou plusieurs objets existants à l'aide de la méthode JavaScript intégrée Object.assign(). Il est également possible de modifier la coque des touches d'un objet en générant un nouvel objet avec les mêmes touches que l'objet d'origine mais avec toutes les touches en minuscules. Syntaxe de base pour créer un nouvel objet avec des clés minuscules à l'aide de Object.assign().

Exemple

<html>
<body>
   <div id="myDiv"></div>
   <script>
      var original = {name: "John", AGE: 25};
      var lowercase = Object.assign({}, original);
      document.getElementById("myDiv").innerHTML = JSON.stringify(lowercase);
   </script>
</body>
</html>

Dans cet exemple, la fonction Object.assign() génère un nouvel objet et lui donne les propriétés de l'objet d'origine. Les mêmes clés de l'ancien objet apparaîtront dans le nouvel objet, mais elles seront en minuscules.

Vous pouvez utiliser la fonction Object.keys() pour parcourir les clés de l'objet d'origine et les changer en minuscules avant de les transmettre à Object.assign() -

Exemple

<html>
<body>
   <div id="myDiv"></div>
   <script>
      var original = { name: "John", AGE: 25 };
      var lowercase = Object.assign(
         {},
         ...Object.keys(original).map((k) => ({
            [k.toLowerCase()]: original[k],
         }))
      );
      document.getElementById("myDiv").innerHTML = JSON.stringify(lowercase);
   </script>
</body>
</html>

Cette méthode utilise la méthode Object.keys() pour obtenir le tableau de clés de l'objet d'origine. La méthode Array.map() est utilisée pour parcourir les clés et créer un nouvel objet avec les mêmes clés mais en minuscules. Le nouvel objet est ensuite transmis à Object.assign() à l'aide de l'opérateur spread.

boucle for-in

Utiliser une boucle for-in pour parcourir les clés de l'objet d'origine et générer un nouvel objet avec les mêmes clés mais en minuscules est une autre façon de créer un nouvel objet avec des clés minuscules. La syntaxe de base pour créer un nouvel objet avec des touches minuscules à l'aide d'une boucle for-in est -

Exemple

<html>
<body>
   <div id="myDiv"></div>
   <script>
      var original = { name: "John", AGE: 25 };
      var lowercase = {};
      for (var key in original) {
         lowercase[key.toLowerCase()] = original[key];
      }
      document.getElementById("myDiv").innerHTML = JSON.stringify(lowercase);
   </script>
</body>
</html>

Dans cet exemple, la fonction toLowerCase() est utilisée pour changer chaque touche de majuscule en minuscule et attribuer la valeur associée au nouvel objet. Ensuite, la boucle for-in parcourt les clés de l'objet d'origine.

JSON.parse() et JSON.stringify()

L'utilisation des méthodes JSON.parse() et JSON.stringify() est une troisième façon de créer de nouveaux objets avec des clés minuscules. Lors de la construction de nouveaux objets avec des touches minuscules à l'aide de ces techniques, la syntaxe de base est -

Exemple

<html>
<body>
   <div id="myDiv"></div>
   <script>
      var original = { name: "John", AGE: 25 };
      var lowercase = JSON.parse(JSON.stringify(original).toLowerCase());
      document.getElementById("myDiv").innerHTML = JSON.stringify(lowercase);
   </script>
</body>
</html>

Dans cet exemple, l'objet d'origine est converti en chaîne JSON à l'aide de la méthode JSON.stringify(). Utilisez ensuite la méthode toLowerCase() pour convertir toutes les clés de la chaîne JSON en minuscules.

Enfin, utilisez la méthode JSON.parse() pour reconvertir la chaîne JSON en un objet JavaScript. En utilisant cette méthode, un nouvel objet est créé avec les mêmes clés que l'objet d'origine, mais avec toutes les clés en minuscules.

En fait, cette méthode nécessite de convertir l'objet en chaîne et inversement, ce qui la rend moins efficace que les deux premières méthodes. Il ne fonctionne également que sur des objets simples ; il peut ne pas fonctionner sur des objets dotés de propriétés ou de méthodes uniques.

Conclusion

Dans cet article, nous avons examiné diverses méthodes JavaScript pour construire de nouveaux objets avec des clés minuscules. Un moyen rapide et efficace de générer un nouvel objet avec les mêmes clés qu’un objet existant mais uniquement en minuscules consiste à utiliser la méthode Object.assign(). Une autre option pour parcourir les clés d'un objet et générer un nouvel objet avec les mêmes clés mais en minuscules est une boucle for-in. Les clés minuscules peuvent également être utilisées pour construire de nouveaux objets à l'aide des méthodes JSON.parse() et JSON.stringify(), bien que cette méthode soit moins efficace et puisse ne pas fonctionner avec tous les types d'objets.

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!

JavaScript json Array Object 运算符 for 字符串循环 map 对象数据库

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment obtenir la déclaration de style complète d'un caractère dans IText à l'aide de FabricJS ?Article suivant：Comment obtenir la déclaration de style complète d'un caractère dans IText à l'aide de FabricJS ?

Articles Liés

Voir plus