En este post quiero hablar de underscore.js una libreria javascript que nos ofrece muchas utilidades que nos harán las vida mas fácil al trabajar con tipos de datos object y array , la razón por la que hago este post es para ofrecer ejemplos un poco mas prácticos de lo que puede hacer underscore.js.
Hace un tiempo atrás yo no conocía esta librería y por razones de trabajo tuve a revisar su pagina oficial para saber de que se trataba , la primera vez que leí la documentación y ver algunos ejemplos de la pagina no me termino de convencer y no le preste mucha atención a la librería e incluso pensé que era una perdida de tiempo , pero después varios amigos del trabajo me explicaron el uso de underscore.js aplicados con ejemplos reales en proyectos y hasta ese momento me di cuenta del potencial de esta librería.
Si nadie me hubiera explicado el uso de underscore.js con usos prácticos nunca me hubiera interesado en la librería , creo que los ejemplos de la pagina oficial no lograron transmitirme el verdadero potencial de esta librería por esta razon escribo este post para tratar transmitir a otros lo que yo no entendi en su momento.
Para los siguientes ejemplos puedes usar el modo consola de google chrome para ejecutarlos o puedes crear un proyecto pequeño en tu maquina , todas las instrucciones de como usar la librería están en la pagina oficial de
underscore.js aqui solo veremos ejemplos practicos de algunos metodos.
Lo primero que necesitamos es un arreglo de objetos que nos simulen datos provenientes de una BD :
var json = [
{ "id": "18741DB9-B869-B378-8624-0B9F593F84BA", "name": "Ross", "email": "lobortis@arcuetpede.ca", "about": "nisl. Quisque fringilla euismod enim.", "title": "Mr." }, { "id": "E2D7A39E-4583-A27A-BC55-98489F062FB1", "name": "Bruno", "email": "egestas.nunc@eratvitaerisus.edu", "about": "Donec tincidunt. Donec vitae erat", "title": "Ms." }, { "id": "26CC1826-2BBA-5ABB-CB7E-D06AD96D1A23", "name": "Audra", "email": "tincidunt.vehicula.risus@tempus.com", "about": "Nullam suscipit, est ac facilisis", "title": "Mr." }, { "id": "4F0FCC7A-A715-4AC2-B64F-830AA3441995", "name": "Kelsey", "email": "sodales.at@quis.net", "about": "mi felis, adipiscing fringilla, porttitor", "title": "Mr." }, { "id": "8A3A6AF5-225D-D812-ABB0-3668D27F677F", "name": "Blaine", "email": "suscipit.est.ac@aclibero.ca", "about": "lorem eu metus. In lorem.", "title": "Mr." }, { "id": "8B7A6266-5CDD-AF5A-6C15-ECF6273A26FB", "name": "Brielle", "email": "Morbi.metus@nislQuisque.net", "about": "ullamcorper eu, euismod ac, fermentum", "title": "Dr." }, { "id": "3C1D2DF8-CB72-EF58-2B7D-DD266E54710A", "name": "Susan", "email": "rutrum@aliquet.org", "about": "mattis. Cras eget nisi dictum", "title": "Mrs." }, { "id": "1F391F0E-DE13-5089-7A92-8BA9B1264245", "name": "Brent", "email": "nibh.dolor@magna.edu", "about": "fringilla. Donec feugiat metus sit", "title": "" }, { "id": "340DCB7E-428E-EA04-E394-513893AE2E56", "name": "Cally", "email": "Cras.lorem@eunullaat.net", "about": "nunc. In at pede. Cras", "title": "" }, { "id": "C061F9A3-EC77-6B24-E0A4-218134EA240E", "name": "Edan", "email": "vel.mauris@sed.ca", "about": "sit amet orci. Ut sagittis", "title": "Ms." } ] ;
Con este ejemplo vamos comenzar nuestra practica. En la variable json estamos asignando un arreglo de objetos donde cada elemento del arreglo es un objecto con la siguiente estructura :
{
"id": "18741DB9-B869-B378-8624-0B9F593F84BA",
"name": "Ross",
"email": "lobortis@arcuetpede.ca",
"about": "nisl. Quisque fringilla euismod enim.",
"title": "Mr."
}
En total hay 10 elementos en nuestro arreglo , con la misma estructura pero con diferente datos a simple vista no puede parecer mucho pero ahora imagina este arreglo pero de 200 elementos que fueron devueltos de una consulta a alguna BD.
Ahora vamos a ver algunos métodos , no voy explicar las definiciones estas las puedes revisar en la pagina oficial solo comentare algunas ideas de como usarlos :
each : Puede usarse para realizar operaciones por cada elemento del arreglo ejemplo :
_.each( json , function(element){ console.log(element.title + element.name) });
El resultado de esto sera :
Mr.Ross
Ms.Bruno
Mr.Audra
Mr.Kelsey
Mr.Blaine
Dr.Brielle
Mrs.Susan
Brent
Cally
Ms.Edan
Has notado lo simple que fue iterar en cada elemento del arreglo y concatenar 2 propiedades de el mismo en una sola linea de codigo ? Si no usaramos underscore.js para hacer esto tendríamos que usar un ciclo FOR que nos tomaría fácilmente mas de 4 lineas de código.
map: Lo podemos usar para para extraer solo las propiedades que nos interesan de cada uno de los elementos del arreglo . ejemplo:
_.map(json, function(element){ return {"name": element.name ,"email" : element.email } });
El resultado sera un arreglo de 10 elementos donde la estructura de cada elemento es la siguiente :
{
email: "lobortis@arcuetpede.ca"
name: "Ross"
}
Aquí solo hemos extraído los datos que necesitábamos de todo el conjunto original.
find : Podemos usarlo para encontrar un elemento en especifico que necesitemos . ejemplo :
_.find(json, function(element){ return element.id == "8A3A6AF5-225D-D812-ABB0-3668D27F677F" });
El resultado sera :
{
id: "8A3A6AF5-225D-D812-ABB0-3668D27F677F",
name: "Blaine",
email: "suscipit.est.ac@aclibero.ca",
about: "lorem eu metus. In lorem.",
title: "Mr."
}
filter : Se usa para filtrar los resultados según una condición , por ejemplo si queremos saber cuales son los elementos del arreglo que tienen "Mr ." en la propiedad title. ejemplo:
_.filter(json, function(element){ return element.title == "Mr."; });
El resultado sera un arreglo de 4 elementos donde cada elemento tiene "Mr.s" en la propiedad title.
some : podemos usarlo para saber si existe algun valor en especifico esta presente en los elemento , ya que este metodo devuelve true si es encontrado. ejemplo :
_.some(json, function(element){ return element.name == "Brent" })
El resultado sera : true.
every : puede ser usado para saber si todos los elementos del arreglo son del tipo "Mr." ejemplo :
_.every(json,function (element) { return element.title == "Mr." });
El resultado sera : false por que en nuestro arreglo tenemos "Mr." y "Ms." presentes.
groupBy :
Usado para agrupar colecciones de objetos, ejemplo :
var data = ["a1", "a2", "a3", "a4", "a5", "a6", "a7", "a8", "a9", "a10", "a11", "a12", "a13"];
var n = 3;
var lists = _.groupBy(data, function(element , index) {
return Math.floor(index/n);
});
El resultado sera: Un arreglo donde cada elemento es una coleccion de 3 elementos.
sortBy : Usado para ordenar arreglos en order ascendente
_.sortBy([3, 2, 1, 4, 6, 5], function(num){
return num;
});
El resultado sera : [1, 2, 3, 4, 5, 6]
Si quieres hacerlo en order descendente solo tienes que usar metodo reverse del objecto array()
_.sortBy(that.currentSession.players, function(player){
return player.points;
}).reverse();
uniq : usado para remover objetos duplicados de un arreglo
var data = [{'name': 'Amir', 'surname': 'Rahnama'}, {'name': 'Amir', 'surname': 'Stevens'}];
_.uniq(data,false, function(element){ return element.name; });
Hasta aquí he cubierto el uso básico de Underscore.js , te recomiendo que leas la documentación para saber que otras cosas puedes hacer con el como usar los templates y encadenar métodos espero haber aclarado un poco el uso de esta libreria
Link : http://underscorejs.org/
