Aplanamiento de objetos de JavaScript | Recursividad y manipulación de objetos

Introducción

En este laboratorio, exploraremos una función de JavaScript que aplana un objeto con las rutas para las claves. La función utiliza la recursividad y Object.keys() combinada con Array.prototype.reduce() para convertir cada nodo hoja en un nodo de ruta aplanada. Al final de este laboratorio, tendrás una mejor comprensión de cómo manipular objetos de JavaScript y aplanarlos para un procesamiento de datos más fácil.

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/cond_stmts("Conditional Statements") javascript/BasicConceptsGroup -.-> javascript/array_methods("Array Methods") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") javascript/AdvancedConceptsGroup -.-> javascript/destr_assign("Destructuring Assignment") javascript/AdvancedConceptsGroup -.-> javascript/template_lit("Template Literals") subgraph Lab Skills javascript/variables -.-> lab-28312{{"Aplanar objeto de JavaScript con recursividad"}} javascript/data_types -.-> lab-28312{{"Aplanar objeto de JavaScript con recursividad"}} javascript/arith_ops -.-> lab-28312{{"Aplanar objeto de JavaScript con recursividad"}} javascript/comp_ops -.-> lab-28312{{"Aplanar objeto de JavaScript con recursividad"}} javascript/cond_stmts -.-> lab-28312{{"Aplanar objeto de JavaScript con recursividad"}} javascript/array_methods -.-> lab-28312{{"Aplanar objeto de JavaScript con recursividad"}} javascript/higher_funcs -.-> lab-28312{{"Aplanar objeto de JavaScript con recursividad"}} javascript/destr_assign -.-> lab-28312{{"Aplanar objeto de JavaScript con recursividad"}} javascript/template_lit -.-> lab-28312{{"Aplanar objeto de JavaScript con recursividad"}} end

Aplanando un objeto

Para aplanar un objeto con rutas para las claves, siga estos pasos:

Abra la Terminal/SSH y escriba node para comenzar a practicar la codificación.
Utilice la recursividad para aplanar el objeto.
Utilice Object.keys() combinado con Array.prototype.reduce() para convertir cada nodo hoja en un nodo de ruta aplanada.
Si el valor de una clave es un objeto, llame a la función recursivamente con el prefix adecuado para crear la ruta utilizando Object.assign().
De lo contrario, agregue el par clave-valor prefiijado adecuado al objeto acumulador.
Omita el segundo argumento, prefix, a menos que desee que cada clave tenga un prefijo.

A continuación, se muestra una implementación de ejemplo:

const flattenObject = (obj, prefix = "") =>
  Object.keys(obj).reduce((acc, k) => {
    const pre = prefix.length ? `${prefix}.` : "";
    if (
      typeof obj[k] === "object" &&
      obj[k] !== null &&
      Object.keys(obj[k]).length > 0
    ) {
      Object.assign(acc, flattenObject(obj[k], pre + k));
    } else {
      acc[pre + k] = obj[k];
    }
    return acc;
  }, {});

Puede usar la función flattenObject de la siguiente manera:

flattenObject({ a: { b: { c: 1 } }, d: 1 }); // { 'a.b.c': 1, d: 1 }

Resumen

¡Felicitaciones! Has completado el laboratorio de Aplanar Objeto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.