Développer des objets imbriqués JavaScript

JavaScriptJavaScriptBeginner
Pratiquer maintenant

This tutorial is from open-source community. Access the source code

💡 Ce tutoriel est traduit par l'IA à partir de la version anglaise. Pour voir la version originale, vous pouvez cliquer ici

Introduction

Dans ce laboratoire, nous allons explorer comment déplier un objet avec des chemins pour les clés en JavaScript. Nous utiliserons les méthodes imbriquées Array.prototype.reduce() et String.prototype.split() pour diviser chaque clé avec un délimiteur de point et ajouter des objets contre les clés. À la fin de ce laboratoire, vous aurez une compréhension solide de la manière d'efficiemment convertir un objet plat en un objet imbriqué.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/BasicConceptsGroup -.-> javascript/array_methods("Array Methods") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") javascript/AdvancedConceptsGroup -.-> javascript/destr_assign("Destructuring Assignment") subgraph Lab Skills javascript/variables -.-> lab-28678{{"Développer des objets imbriqués JavaScript"}} javascript/data_types -.-> lab-28678{{"Développer des objets imbriqués JavaScript"}} javascript/arith_ops -.-> lab-28678{{"Développer des objets imbriqués JavaScript"}} javascript/comp_ops -.-> lab-28678{{"Développer des objets imbriqués JavaScript"}} javascript/array_methods -.-> lab-28678{{"Développer des objets imbriqués JavaScript"}} javascript/higher_funcs -.-> lab-28678{{"Développer des objets imbriqués JavaScript"}} javascript/destr_assign -.-> lab-28678{{"Développer des objets imbriqués JavaScript"}} end

Comment déplier un objet en JavaScript

Pour déplier un objet avec des chemins pour les clés en JavaScript, suivez ces étapes :

  1. Ouvrez le Terminal/SSH et tapez node pour commencer à pratiquer la programmation.

  2. Utilisez Array.prototype.reduce() imbriquée pour convertir le chemin plat en un nœud feuille.

  3. Utilisez String.prototype.split() pour diviser chaque clé avec un délimiteur de point et Array.prototype.reduce() pour ajouter des objets contre les clés.

  4. Si l'accumulateur actuel contient déjà une valeur pour une clé particulière, renvoyez sa valeur comme le prochain accumulateur.

  5. Sinon, ajoutez la paire clé-valeur appropriée à l'objet accumulateur et renvoyez la valeur comme l'accumulateur.

Voici le code pour la fonction unflattenObject :

const unflattenObject = (obj) =>
  Object.keys(obj).reduce((res, k) => {
    k.split(".").reduce(
      (acc, e, i, keys) =>
        acc[e] ||
        (acc[e] = isNaN(Number(keys[i + 1]))
          ? keys.length - 1 === i
            ? obj[k]
            : {}
          : []),
      res
    );
    return res;
  }, {});

Vous pouvez utiliser la fonction unflattenObject pour déplier un objet en JavaScript :

unflattenObject({ "a.b.c": 1, d: 1 }); // { a: { b: { c: 1 } }, d: 1 }
unflattenObject({ "a.b": 1, "a.c": 2, d: 3 }); // { a: { b: 1, c: 2 }, d: 3 }
unflattenObject({ "a.b.0": 8, d: 3 }); // { a: { b: [ 8 ] }, d: 3 }

Sommaire

Félicitations ! Vous avez terminé le laboratoire sur le dépliage d'objets. Vous pouvez pratiquer d'autres laboratoires sur LabEx pour améliorer vos compétences.