Underscore.js es una biblioteca de JavaScript que proporciona muchas funciones útiles que ayudan en la programación en gran medida, como el mapa, el filtro, la invocación, etc., incluso sin utilizar ningún objeto integrado.
La función _.groupBy() se usa para recopilar los elementos de la array pasada. Funciona haciendo coincidir el valor de cada elemento con el otro. Si coinciden, se colocan en una colección; de lo contrario, tendremos 2 colecciones/grupos. También podemos pasar una función basada en el resultado de quién recopilaremos los elementos. Puede agrupar tanto por número como por string.
Sintaxis:
_.groupBy( list, iteratee, context )
Parámetros: esta función acepta tres parámetros, como se mencionó anteriormente y se describe a continuación:
- Lista: este parámetro contiene la lista de elementos.
- Iteratee: este parámetro contiene la condición que se utiliza para enviar mensajes de texto a los elementos.
- Contexto: Es el texto que se utiliza para mostrar. Es un parámetro opcional.
Valores devueltos: Devuelve las colecciones como los diferentes arrays.
Usando Math.ceil() en la función _.groupBy(): La función _.groupBy() toma el elemento de la lista uno por uno y lo pasa a la función Math.ceil(). Luego, la salida de cada elemento de la función se combinará con la salida de otro elemento en Math.ceil(), luego se colocarán en 1 grupo; de lo contrario, estarán en 2 grupos separados. Después de que todos los elementos coincidan con todos los demás elementos, la función _.groupBy finaliza.
Ejemplo:
<html>
<head>
<script type="text/javascript" src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore.js">
</script>
</head>
<body>
<script type="text/javascript">
console.log(_.groupBy([2.7, 3.4, 6.6, 1.2, 2.0, 2.4], function(num) {
return Math.ceil(num);
}));
</script>
</body>
</html>
Producción:
Usar length() en la función _.groupBy(): pasar los elementos de la array a la función groupBy() y hacer coincidir los elementos en función de su longitud. Si la longitud de dos elementos es la misma, se agruparán en 1 grupo; de lo contrario, se formarán 2 grupos.
Ejemplo:
<html> <head> <script type="text/javascript" src= "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore.js"> </script> </head> <body> <script type="text/javascript"> console.log(_.groupBy(['HTML', 'CSS3', 'JS', 'PHP'], 'length')); </script> </body> </html>
Producción:
Usando una propiedad de la array pasada en la función _.groupBy(): Primero, declare la array (aquí la array es ‘arr’). Elija una condición en la que necesite verificar como aquí ‘prop3’. Luego, los elementos que tienen el mismo valor en ‘prop3’ se agruparán en 1 grupo. Console.log la respuesta final.
Ejemplo:
<html>
<head>
<script type="text/javascript" src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore.js">
</script>
</head>
<body>
<script type="text/javascript">
var arr = [
{prop1:"10", prop2:"07", prop3: "Geeks"},
{prop1:"12", prop2:"86", prop3: "for"},
{prop1:"11", prop2:"58", prop3: "Geeks"}
];
console.log(_.groupBy(arr, 'prop3'));
</script>
</body>
</html>
Producción:
Pasando ‘fecha’ como propiedad de la array a la función _.groupBy() juntos: primero defina una array con una propiedad como ‘fecha’ del formato ‘dd-mm-yy’. Luego pase la array y la propiedad ‘fecha’ a la función _.groupBy(). Los elementos que tengan la misma fecha se agruparán en 1 grupo. La numeración del grupo comenzará desde 0.
Ejemplo:
<html>
<head>
<script type="text/javascript" src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore.js">
</script>
</head>
<body>
<script type="text/javascript">
var orders = [
{ date:"30-60-90 Day", Name:"Kim", amount:415 },
{ date:"30-60-90 Day", Name:"Kelly", amount:175 },
{ date:"30 Day", Name:"Shelly", amount:400 },
{ date:"30 Day", Name:"Sarvesh", amount:180 }
];
console.log(_.groupBy(orders, "date"));
</script>
</body>
</html>
Producción: