Movatterモバイル変換


[0]ホーム

URL:


  1. Tecnología web para desarrolladores
  2. JavaScript
  3. Referencia de JavaScript
  4. Objetos globales
  5. Map
  6. Map.groupBy()

Esta página ha sido traducida del inglés por la comunidad.Aprende más y únete a la comunidad de MDN Web Docs.

View in EnglishAlways switch to English

Map.groupBy()

Baseline 2024
Newly available

Since March 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Nota:En algunas versiones de algunos navegadores, este método fue implementado como el métodoArray.prototype.groupToMap(). Debido a problemas de compatibilidad web, ahora es implementado como un método estático. Revise latabla de compatibilidad con navegadores para más detalles.

El método estáticoMap.groupBy() agrupa los elementos de un iterable, utilizando los valores regresados por la función provista. El objetoMap regresado utiliza los valores únicos de la función de prueba como llaves, los cuales pueden utilizarse para obtener el arreglo de elementos en cada grupo.

El método es útil principalmente cuando se quiere agrupar elementos que están asociados con un objeto, y particularmente cuando el objeto puede cambiar con el tiempo. Si el objeto es invariante, podrías en su lugar representarlo utilizando una cadena de caracteresstring, y agrupando los elementos conObject.groupBy().

Pruébalo

const inventory = [  { name: "asparagus", type: "vegetables", quantity: 9 },  { name: "bananas", type: "fruit", quantity: 5 },  { name: "goat", type: "meat", quantity: 23 },  { name: "cherries", type: "fruit", quantity: 12 },  { name: "fish", type: "meat", quantity: 22 },];const restock = { restock: true };const sufficient = { restock: false };const result = Map.groupBy(inventory, ({ quantity }) =>  quantity < 6 ? restock : sufficient,);console.log(result.get(restock));// [{ name: "bananas", type: "fruit", quantity: 5 }]

Sintaxis

js
Map.groupBy(items, callbackFn)

Parámetros

items

Uniterable (así como unArray) cuyos elementos serán agrupados.

callbackFn

Una función que se ejecuta por cada elemento en el iterable. Debe regresar un valor (object o unprimitive) indicando el grupo del elemento actual. La función es llamada con los siguientes argumentos:

element

El elemento actual que está siendo procesado.

index

El índice del elemento actual que esta siendo procesado.

Valor regresado

Un objetoMap con llaves para cada grupo, cada llave asignada a un arreglo que contiene los elementos del grupo asociado.

Descripción

Map.groupBy() llama a la función de devolución de llamadacallbackFn pasada como parámetro, una vez por cada elemento en el iterable. La función de devolución de llamada debe regresar un valor indicando el grupo del elemento asociado. Los valores regresados por lacallbackFn son utilizados como llaves para elMap regresado porMap.groupBy(). Cada llave tiene asociado un arreglo que contiene todos los elementos para los cuales la función de devolución de llamada regresó el mismo valor.

Los elementos en el objetoMap regresado por la función y en el iterable original, son los mismos (sincopias profundas). Al cambiar la estructura interna de los elementos, esta se vera reflejada en ambos, el iterable original y elMap regresado por la función.

Este método es util cuando necesitas agrupar información que está relacionada a un objeto en particular y que potencialmente puede cambiar con el tiempo. Esto es debido a que, incluseo si el objeto es modificado, continuará funcionando como llave para el objetoMap regresado por la función. Si en su lugar creas una representaciónstring para el objeto y la utilizas como la llave para agrupar enObject.groupBy(), debes mantener el mapeo entre el objeto original y su representacion de acuerdo a como el objeto cambia.

Nota:Para accesar los grupos en el objetoMap regresado por la función, debes utilizar el mismo objeto que fue usado como llave en elMap (a pesar de que puedes modificar sus propiedades). No puedes usar otro objeto que de casulaidad tiene el mismo nombre y las mismas propiedades.

Map.groupBy no lee el valor dethis. Puede ser llamado en cualquier objeto y regresará una nueva instancia deMap.

Ejemplos

Utilizando Map.groupBy()

Primero definimos un arreglo que contenga objetos que representen un inventario de diferentes alimentos. Cada alimento tiene untype y unquantity.

js
const inventory = [  { name: "asparagus", type: "vegetables", quantity: 9 },  { name: "bananas", type: "fruit", quantity: 5 },  { name: "goat", type: "meat", quantity: 23 },  { name: "cherries", type: "fruit", quantity: 12 },  { name: "fish", type: "meat", quantity: 22 },];

El código de abajo utilizaMap.groupBy() con una función flecha que regresa las llaves de objeto llamadasrestock osufficient, dependiendo de si la propiedad del elemento esquantity < 6. El objetoresult que regresa, es unMap así que necesitamos llamarget() con la llave para obtener el arreglo.

js
const restock = { restock: true };const sufficient = { restock: false };const result = Map.groupBy(inventory, ({ quantity }) =>  quantity < 6 ? restock : sufficient,);console.log(result.get(restock));// [{ name: "bananas", type: "fruit", quantity: 5 }]

Note que el argumento{ quantity } de la función, es un ejemplo básico de lasintaxis de destructuración de objetos pasados como parámetros de función. Esto desempaca la propiedadquantity del objeto pasado como parámetro, y lo asigna a la variable llamadaquantity en el cuerpo de la función. Esta es una forma muy concisa de accesar los valores relevantes de elementos, dentro de una función.

La llave de unMap puede ser modificada y aún usarse. Sin embargo no puedes recrear la llave y aún usarla. Por esa razón es importante que cualquiera que necesite usar elmap mantenga una referencia de sus llaves.

js
// La llave puede ser modificada y aún usarserestock["fast"] = true;console.log(result.get(restock));// [{ name: "bananas", type: "fruit", quantity: 5 }]// Una nueva llave no puede ser usada, incluso si tiene la misma estructura!const restock2 = { restock: true };console.log(result.get(restock2)); // undefined

Especificaciones

Specification
ECMAScript® 2026 Language Specification
# sec-map.groupby

Compatibilidad con navegadores

Véase también

Help improve MDN

Learn how to contribute

This page was last modified on byMDN contributors.


[8]ページ先頭

©2009-2026 Movatter.jp