Maison > interface Web > js tutoriel > Aplatir un objet profondément imbriqué : un guide étape par étape

Aplatir un objet profondément imbriqué : un guide étape par étape

王林
Libérer: 2024-08-13 16:38:39
original
907 Les gens l'ont consulté

Flattening a Deeply Nested Object: A Step-by-Step Guide

Comprendre le problème
Nous rencontrons souvent des structures de données complexes dans les applications JavaScript. Ces structures peuvent être des objets profondément imbriqués, ce qui rend difficile leur manipulation ou leur traitement direct. Une opération courante consiste à aplatir ces objets, en les transformant en une structure plus simple où toutes les propriétés sont au niveau supérieur.

Dans ce blog, nous examinerons un extrait de code JavaScript qui aplatit efficacement un objet profondément imbriqué. Nous décomposerons le code ligne par ligne, expliquant sa logique et ses fonctionnalités.

La panne du code

let user = {
  name : 'Chiranjit',
  address : {
    personal : {
      city: 'Kolkata',
      state: 'West Bengal'
    },
    office : {
      city: 'Bengaluru',
      state: 'Karnataka',
      area: {
        landmark:'Waterside',
        post: 433101
      }
    }
  }
}
var finalObj = {} 

const flatObjFn = (obj, parent) => {
  for(let key in obj){
    if(typeof obj[key] === 'object'){
      flatObjFn(obj[key], parent+'_'+key)
    }else{
      finalObj[parent + '_' + key] = obj[key]
    }
  }
}

flatObjFn(user, 'user');
console.log(finalObj);
Copier après la connexion

Explication ligne par ligne

  1. Création de l'objet imbriqué :
    • Nous commençons par créer un objet profondément imbriqué nommé user. Il contient propriétés telles que le nom, l'adresse et d'autres objets imbriqués dans adresse.
  2. Initialisation de l'objet de sortie :

    • Un objet vide finalObj est créé pour stocker le résultat aplati.
  3. Définition de la fonction d'aplatissement :

    • Une fonction nommée flatObjFn est définie, acceptant deux paramètres : a) obj : l'objet à aplatir. b) parent : une chaîne pour préfixer les noms de propriétés pour plus de clarté.
  4. Itération à travers les propriétés de l'objet :

    • Une boucle for...in parcourt chaque propriété de l'objet d'entrée obj.
  5. Gestion des objets imbriqués :

    • Si la valeur d'une propriété est un objet, la fonction flatObjFn est appelé de manière récursive cet objet. Le paramètre parent est concaténé avec le nom de la propriété actuelle pour créer un nouveau préfixe pour les propriétés imbriquées.
  6. Gestion des valeurs primitives :

    • Si la valeur d'une propriété n'est pas un objet (c'est-à-dire une valeur primitive comme une chaîne ou un nombre), il est ajouté au finalObj avec une clé formé en concaténant le parent et le nom de la propriété actuelle.
  7. Appel de la fonction d'aplatissement :

    • Le flatObjFn est appelé avec l'objet utilisateur comme entrée et 'utilisateur' comme le préfixe parent initial.
  8. Enregistrement de l'objet aplati :

    • L'objet final aplati est imprimé sur la console en utilisant console.log(finalObj).

Comment ça marche ?
La fonction flatObjFn parcourt l'objet de manière récursive, décomposant les structures imbriquées en un objet plat. Le paramètre parent garde une trace de la hiérarchie des objets, permettant à la fonction de créer des noms de propriétés significatifs dans l'objet de sortie.

Connectons-nous sur Twitter ou LinkedIn

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:dev.to
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