Maison > Article > interface Web > Comment aplatir un objet JavaScript en un objet simple profondeur ?

Comment aplatir un objet JavaScript en un objet simple profondeur ?

PHPzavant: 2023-08-24 10:29:071346parcourir

如何将 JavaScript 对象压平为单深度对象？

En JavaScript, les objets peuvent être créés à l'aide d'accolades {}. C'est ce qu'on appelle un objet littéral. Les littéraux d'objet peuvent contenir des propriétés et des méthodes.

Qu'est-ce que l'aplatissement ?

L'aplatissement est le processus de réduction d'un objet à un objet d'une seule profondeur. En d’autres termes, toutes les propriétés et méthodes de l’objet sont contenues dans un seul objet de profondeur.

Comment aplatir un objet ?

Il existe plusieurs façons d’aplatir des objets.

Utiliser pour...en boucle

La boucle for...in peut être utilisée pour parcourir les propriétés d'un objet. Pour chaque propriété, nous pouvons l'ajouter à un nouvel objet.

Vous trouverez ci-dessous un extrait de code qui utilise une boucle for...in pour aplatir un objet.

<!doctype html>
<html>
<head>
   <title>Example - flatten an object</title>
</head>
<body>
   <div id="result1">Original Object: </div>
   <div id="result2">Flatten Object: </div>
   <script>
      var obj = {
         "a": 1,
         "b": 2,
         "c": {
            "d": 3,
            "e": 4
         }
      };
      var newObj = {};
      for (var key in obj) {
         if (typeof obj[key] === "object") {
            for (var subKey in obj[key]) {
               newObj[subKey] = obj[key][subKey];
            }
         } else {
            newObj[key] = obj[key];
         }
      }
      document.getElementById("result1").innerHTML += JSON.stringify(obj)
      document.getElementById("result2").innerHTML += JSON.stringify(newObj)
      console.log(newObj);   </script>
</body>
</html>

Dans le code ci-dessus, nous avons déclaré un objet littéral nommé obj. Ensuite, nous déclarons un objet littéral vide nommé newObj. Nous utilisons une boucle for...in pour parcourir les propriétés d'obj. Pour chaque attribut, nous vérifions si la valeur de l'attribut est un objet. Si la valeur de la propriété est un objet, nous utilisons à nouveau une boucle for...in pour parcourir les propriétés enfants de la valeur de la propriété.

Pour chaque sous-propriété, nous l'ajoutons à l'objet newObj avec le nom de la sous-propriété comme clé. Si la valeur de la propriété n'est pas un objet, nous ajoutons la propriété à l'objet newObj en utilisant le nom de la propriété comme clé. Enfin, nous enregistrons newObj sur la console.

Avantages de l'aplatissement

L'aplatissement d'objets présente de multiples avantages. Certains d'entre eux sont-

Accès facile aux propriétés

Lorsqu'un objet est aplati, toutes les propriétés et méthodes sont contenues dans un objet. Cela facilite l’accès aux propriétés et aux méthodes.

Données faciles à manipuler

Lorsqu'un objet est aplati, les données sont contenues dans un seul objet. Cela facilite la manipulation des données.

Facile à sérialiser

Lorsqu'un objet est aplati, il peut être facilement sérialisé. La sérialisation est le processus de conversion d'objets dans un format pouvant être stocké ou transmis.

Inconvénients de l'aplatissement

L'aplatissement d'objets présente certains inconvénients. Certains d'entre eux sont-

Redondance des données

Lorsqu'un objet est aplati, une redondance des données peut se produire. La redondance des données signifie que les mêmes données sont stockées à plusieurs endroits.

Difficile à entretenir

Lorsqu’un objet est aplati, il peut être difficile à entretenir. En effet, toutes les propriétés et méthodes sont contenues dans un objet.

Conclusion

En résumé, l'aplatissement est le processus de réduction d'un objet à un objet d'une seule profondeur. Il existe plusieurs façons d'aplatir un objet. Certains des avantages de l'aplatissement des objets sont la facilité d'accès aux propriétés, la facilité de manipulation des données et la facilité de sérialisation. Les objets plats présentent des inconvénients tels que la redondance des données et des difficultés de maintenance.

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 for 循环对象 for...in

Déclaration：

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

Article précédent：Comment ES6 (ES2015) évolue-t-il et apporte-t-il de nouvelles fonctionnalités au JavaScript moderne ?Article suivant：Comment ES6 (ES2015) évolue-t-il et apporte-t-il de nouvelles fonctionnalités au JavaScript moderne ?

Articles Liés

Voir plus