"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Página delantera > Programación > #AprendidoHoy: Object.groupBy()

#AprendidoHoy: Object.groupBy()

Publicado el 2024-11-01
Navegar:860

#LearnedToday: Object.groupBy()

? ¡Por fin salió! ¡Ya no es necesario escribir código feo para agrupar una serie de objetos por un valor específico de un campo!

¡Desde finales de 2023, existe un método estático oficial para Object llamado groupBy() que lo hace por nosotros!
Acepta un Iterable, como un Array, y una función, que se ejecuta para cada elemento y debe devolver la "categoría" de ese elemento específico.
El método devuelve un nuevo Objeto donde cada clave es una categoría diferente que contiene una matriz de objetos que pertenecen a esa categoría específica.

NOTA: Los elementos del objeto devuelto y el iterable original son los mismos (¡no copias profundas!). El cambio de la estructura interna de los elementos se reflejará tanto en el objeto iterable original como en el objeto devuelto.

Ejemplo

Pongamos un ejemplo práctico para ver lo fácil que es agrupar todos los personajes de las Tortugas Ninja por edades.

La matriz inicial

const ninjaTurtlesCharacters = [
  { age: 16, name: 'Michelangelo' },
  { age: 16, name: 'Raffaello' },
  { age: 16, name: 'Donatello' },
  { age: 16, name: 'Leonardo' },
  { age: 91, name: 'Splinter' },
  { age: 25, name: 'Casey Jones' },
  { age: 25, name: 'April O\'Neil' }
];

La buena forma ANTIGUA (con reducción)

const ninjaTurtlesCharactersByAge = ninjaTurtlesCharacters.reduce(
  (groupedPeople, item) => ({
    ...groupedPeople,
    [item.age]: groupedPeople[item.age]
      ? [...groupedPeople[item.age], item]
      : [item],
  }),
  {}
);

La manera MODERNA

const ninjaTurtlesCharactersByAgeNew = Object.groupBy(
  ninjaTurtlesCharacters,
  ({ age }) => age
);

Consejo: utiliza Map.groupBy() si quieres devolver un mapa en lugar de un objeto

El resultado

{
  "16": [
    { age: 16, name: 'Michelangelo' },
    { age: 16, name: 'Raffaello' },
    { age: 16, name: 'Donatello' },
    { age: 16, name: 'Leonardo' }
  ],
  "25": [
    { age: 25, name: 'Casey Jones' },
    { age: 25, name: 'April O\'Neil' }
  ],
  "91": [
    { age: 91, name: 'Splinter' }
  ]
}

Manifestación

??‍? Como siempre, creé un proyecto Stackblitz simple para jugar con el código.

? Documentos: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy

ℹ Compatibilidad con navegador: https://caniuse.com/mdn-javascript_builtins_object_groupby

Declaración de liberación Este artículo se reproduce en: https://dev.to/danielzotti/learnedtoday-objectgroupby-4kl9?1 Si hay alguna infracción, comuníquese con [email protected] para eliminarlo.
Último tutorial Más>

Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

Copyright© 2022 湘ICP备2022001581号-3