Mapear recursivamente las propiedades de un objeto

JavaScriptJavaScriptBeginner
Practicar Ahora

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

💡 Este tutorial está traducido por IA desde la versión en inglés. Para ver la versión original, puedes hacer clic aquí

Introducción

En este laboratorio, exploraremos cómo utilizar la función deepMapKeys en JavaScript para mapear recursivamente las propiedades de un objeto. Aprenderemos a crear un nuevo objeto con los mismos valores y propiedades mapeadas utilizando una función proporcionada para cada propiedad. A través de ejercicios prácticos y ejemplos, entenderemos cómo funciona esta función y cómo se puede utilizar en escenarios prácticos.


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") subgraph Lab Skills javascript/variables -.-> lab-28265{{"Mapear recursivamente las propiedades de un objeto"}} javascript/data_types -.-> lab-28265{{"Mapear recursivamente las propiedades de un objeto"}} javascript/arith_ops -.-> lab-28265{{"Mapear recursivamente las propiedades de un objeto"}} javascript/comp_ops -.-> lab-28265{{"Mapear recursivamente las propiedades de un objeto"}} javascript/array_methods -.-> lab-28265{{"Mapear recursivamente las propiedades de un objeto"}} javascript/higher_funcs -.-> lab-28265{{"Mapear recursivamente las propiedades de un objeto"}} end

Mapear recursivamente las propiedades de un objeto

Para mapear recursivamente las propiedades de un objeto, siga estos pasos:

  1. Abra la Terminal/SSH y escriba node para comenzar a practicar la codificación.
  2. Utilice la función deepMapKeys con el objeto proporcionado y una función que genere nuevas propiedades.
  3. La función crea un objeto con los mismos valores que el objeto proporcionado y propiedades generadas al ejecutar la función proporcionada para cada propiedad.
  4. Itere sobre las propiedades del objeto utilizando Object.keys().
  5. Cree un nuevo objeto con los mismos valores y propiedades mapeadas utilizando Array.prototype.reduce() y la función proporcionada.
  6. Si un valor es un objeto, llame recursivamente a deepMapKeys en él para mapear también sus propiedades.
const deepMapKeys = (obj, fn) =>
  Array.isArray(obj)
    ? obj.map((val) => deepMapKeys(val, fn))
    : typeof obj === "object"
      ? Object.keys(obj).reduce((acc, current) => {
          const key = fn(current);
          const val = obj[current];
          acc[key] =
            val !== null && typeof val === "object"
              ? deepMapKeys(val, fn)
              : val;
          return acc;
        }, {})
      : obj;

A continuación, se muestra un ejemplo de uso de deepMapKeys:

const obj = {
  foo: "1",
  nested: {
    child: {
      withArray: [
        {
          grandChild: ["hello"]
        }
      ]
    }
  }
};

const upperKeysObj = deepMapKeys(obj, (key) => key.toUpperCase());
/*
{
  "FOO":"1",
  "NESTED":{
    "CHILD":{
      "WITHARRAY":[
        {
          "GRANDCHILD":[ 'hello' ]
        }
      ]
    }
  }
}
*/

Resumen

¡Felicidades! Has completado el laboratorio de Mapeo Recursivo de Propiedades de Objeto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.