Underscore.JS - Guía rápida

Underscore.JS es una popular biblioteca basada en javascript que proporciona más de 100 funciones para facilitar el desarrollo web. Proporciona funciones auxiliares como mapear, filtrar, invocar, así como vinculación de funciones, plantillas de JavaScript, verificaciones profundas de igualdad, creación de índices, etc. Underscore.JS se puede usar directamente dentro de un navegador y también con Node.js.

Trabajar con objetos usando JavaScript puede ser bastante desafiante, específicamente si tiene que manipularlos mucho. Subrayado viene con muchas funciones que facilitan su trabajo con objetos.

Underscore.JS es un proyecto de código abierto y puede contribuir fácilmente a la biblioteca y agregar funciones en forma de complementos y ponerlo a disposición en GitHub y en Node.js.

Caracteristicas

Comprendamos en detalle todas las funciones importantes disponibles con Underscore:

Colecciones

Underscore.JS proporciona varias funciones para colecciones como each, map, reduce, que se utilizan para aplicar una operación en cada elemento de una colección. Proporciona un método como groupBy, countBy, max, min que procesa colecciones y facilita muchas tareas.

Matrices

Underscore.JS proporciona varias funciones para matrices como iterar y procesar matrices como first, initial, lastIndexOf, intersection, difference, etc.

Funciones

Underscore.JS proporciona funciones como vincular, retrasar, antes, después, etc.

Objetos

Underscore.JS proporciona funciones para manipular objetos, mapear objetos y comparar objetos. Por ejemplo, claves, valores, extensiones, extensiones propias, isEqual, isEmpty, etc.

Utilidades

Underscore.JS proporciona varios métodos de utilidades como noConflict, random, iteratee, escape, etc.

Encadenamiento

Underscore.JS proporciona métodos de encadenamiento, así como cadena, valor.

En los capítulos siguientes, cubriremos funciones importantes de Underscore.JS

En este capítulo, aprenderá en detalle cómo configurar el entorno de trabajo de Underscore.JS en su computadora local. Antes de comenzar a trabajar en Underscore.JS, debe tener acceso a la biblioteca. Puede acceder a sus archivos en cualquiera de los siguientes métodos:

Método 1: uso del archivo Underscore.JS en el navegador

En este método, necesitaremos el archivo Underscore.JS de su sitio web oficial y lo usaremos directamente en el navegador.

Paso 1

Como primer paso, vaya al sitio web oficial de Underscore.JS https://underscorejs.org/.

Observe que hay una opción de descarga disponible que le brinda el último archivo UMD (producción) de subrayado-min.js disponible. Haga clic derecho en el enlace y elija guardar como. Tenga en cuenta que el archivo está disponible con y sin minificación.

Paso 2

Ahora, incluye underscore-min.js dentro de scriptetiqueta y comience a trabajar con Underscore.JS. Para esto, puede usar el código que se proporciona a continuación:

<script type = "text/JavaScript" src = "https://underscorejs.org/underscore-min.js"></script>

A continuación se muestra un ejemplo práctico y su salida para una mejor comprensión:

Ejemplo

<html>
   <head>
      <title>Underscore.JS - Working Example</title>
      <script type = "text/JavaScript" src = "https://underscorejs.org/underscore-min.js"></script>
      <style>
         div {
            border: solid 1px #ccc;
            padding:10px;
            font-family: "Segoe UI",Arial,sans-serif;
            width: 50%;
         }
      </style>
   </head>
   <body>
      <div style = "font-size:25px" id = "list">
	  </div>
      <script type = "text/JavaScript">
         var numbers = [1, 2, 3, 4];
         var listOfNumbers = '';
         _.each(numbers, function(x) { listOfNumbers += x + ' ' });
         document.getElementById("list").innerHTML = listOfNumbers;
      </script>
   </body>
</html>

Salida

Método 2: usar Node.js

Si opta por este método, asegúrese de tener Node.js y npminstalado en su sistema. Puede usar el siguiente comando para instalar Underscore.JS -

npm install underscore

Puede observar el siguiente resultado una vez que Underscore.JS se haya instalado correctamente:

+ [email protected]
added 1 package from 1 contributor and audited 1 package in 6.331s
found 0 vulnerabilities

Ahora, para probar si Underscore.JS funciona bien con Node.js, cree el archivo tester.js y agréguele el siguiente código:

var _ = require('underscore');
var numbers = [1, 2, 3, 4];
var listOfNumbers = '';
_.each(numbers, function(x) { listOfNumbers += x + ' ' });
console.log(listOfNumbers);

Guarde el programa anterior en tester.js. Los siguientes comandos se utilizan para compilar y ejecutar este programa.

Mando

\>node tester.js

Salida

1 2 3 4

Underscore.JS tiene muchos métodos fáciles de usar que ayudan a iterar las colecciones. Este capítulo los analiza en detalle.

Underscore.JS proporciona varios métodos para iterar las colecciones como se indica a continuación:

No Señor. Método y sintaxis
1 cada

_.each (lista, iterar, [contexto])
2 mapa

_.map (lista, iterar, [contexto])
3 reducir

_.reduce (lista, iterar, [nota], [contexto])
4 reduceRight

_.reduceRight (lista, iterar, [nota], [contexto])
5 encontrar

_.find (lista, predicado, [contexto])
6 filtrar

_.filter (lista, predicado, [contexto])
7 dónde

_.where (lista, propiedades)
8 encontrar donde

_.findWhere (lista, propiedades)
9 rechazar

_.reject (lista, predicado, [contexto])
10 cada

_.every (lista, [predicado], [contexto])
11 algunos

_.algunos (lista, [predicado], [contexto])

Underscore.JS tiene muchos métodos fáciles de usar que ayudan a procesar las colecciones. Este capítulo los analiza en detalle.

Underscore.JS proporciona varios métodos para procesar las colecciones que se enumeran a continuación:

No Señor. Método y sintaxis
1 contiene

_.contains (lista, valor, [fromIndex])
2 invocar

_.invoke (lista, nombreMétodo, * argumentos)
3 arrancar

_.pluck (lista, propertyName)
4 max

_.max (lista, [iteratee], [contexto])
5 min

_.min (lista, [iteratee], [contexto])
6 ordenar por

_.sortBy (lista, iterar, [contexto])
7 agrupar por

_.groupBy (lista, iterar, [contexto])
8 indexBy

_.indexBy (lista, iterar, [contexto])
9 countBy

_.countBy (lista, iteratee, [contexto])
10 barajar

_.shuffle (lista)
11 muestra

_.sample (lista, [n])
12 toArray

_.toArray (lista)
13 Talla

_.size (lista)
14 dividir

_.partition (lista, predicado)
15 compacto

_.compact (lista)

Underscore.JS tiene muchos métodos fáciles de usar que ayudan a iterar matrices. Este capítulo los analiza en detalle.

Underscore.JS proporciona varios métodos para iterar las matrices que se enumeran a continuación:

No Señor. Método y sintaxis
1 primero

_.first (matriz, [n])
2 inicial

_.inicial (matriz, [n])
3 último

_.last (matriz, [n])
4 descanso

_.rest (matriz, [índice])

5 índice de

_.indexOf (matriz, valor, [isSorted])
6 lastIndexOf

_.lastIndexOf (matriz, valor, [fromIndex])
7 sortedIndex

_.sortedIndex (matriz, valor, [iteratee], [contexto])
8 findIndex

_.findIndex (matriz, predicado, [contexto])
9 findLastIndex

_.findLastIndex (matriz, predicado, [contexto])

Underscore.JS tiene muchos métodos fáciles de usar que ayudan a procesar matrices. Este capítulo los analiza en detalle.

Underscore.JS proporciona varios métodos para procesar las matrices que se enumeran a continuación:

No Señor. Método y sintaxis
1 aplanar

_.flatten (matriz, [superficial])
2 sin

_.without (matriz, * valores)
3 Unión

_.union (* matrices)
4 intersección

_.intersection (* matrices)
5 diferencia

_.difference (matriz, * otros)
6 uniq

_.uniq (matriz, [isSorted], [iteratee])
7 Código Postal

_.zip (* matrices)
8 abrir la cremallera

_.unzip (matriz)
9 objeto

_.object (lista, [valores])
10 pedazo

_.chunk (matriz, longitud)
11 rango

_.range ([inicio], detener, [paso])

Underscore.JS tiene muchos métodos fáciles de usar que ayudan a manejar las funciones. Este capítulo los analiza en detalle.

Underscore.JS proporciona varios métodos para manejar las funciones que se enumeran a continuación:

No Señor. Método y sintaxis
1 enlazar

_.bind (función, objeto, * argumentos)
2 parcial

_.partial (función, * argumentos)
3 memorizar

_.memoize (función, [función hash])
4 retrasar

_.delay (función, esperar, * argumentos)
5 una vez

_.once (función)
6 antes de

_.before (cuenta, función)
7 envolver

_.wrap (función, envoltorio)
8 negar

_.negate (predicado)
9 componer

_.compose (* funciones)

Underscore.JS tiene muchos métodos fáciles de usar que ayudan a mapear objetos. Este capítulo los analiza en detalle.

Underscore.JS proporciona varios métodos para manejar el mapeo de objetos como se enumera a continuación:

No Señor. Método y sintaxis
1 llaves

_.keys (objeto)
2 allKeys

_.allKeys (objeto)
3 valores

_.values ​​(objeto)
4 mapObject

_.mapObject (objeto, iteratee, [contexto])
5 pares

_.pairs (objeto)
6 invertir

_.invert (objeto)
7 crear

_.create (prototipo, accesorios)
8 funciones

_.functions (objeto)
9 findKey

_.findKey (objeto, predicado, [contexto])

Underscore.JS tiene muchos métodos fáciles de usar que ayudan a actualizar objetos. Este capítulo los analiza en detalle.

Underscore.JS proporciona varios métodos para manejar las actualizaciones de objetos que se enumeran a continuación:

No Señor. Método y sintaxis
1 ampliar

_.extend (destino, * fuentes)
2 recoger

_.pick (objeto, * claves)
3 omitir

_.omit (objeto, * claves)
4 valores predeterminados

_.defaults (objeto, * valores predeterminados)
5 clon

_.clone (objeto)
6 grifo

_.tap (objeto, interceptor)
7 tiene

_.has (objeto, clave)
8 propiedad

_.property (ruta)
9 propiedad de

_.propertyOf (objeto)

Underscore.JS tiene muchos métodos fáciles de usar que ayudan a comparar objetos. Este capítulo los analiza en detalle.

Underscore.JS proporciona varios métodos para manejar la comparación de objetos como se indica a continuación:

No Señor. Método y sintaxis
1 comparador

_.matcher (atributos)
2 es igual

_.isEqual (objeto, otro)
3 isMatch

_.isMatch (objeto, propiedades)
4 esta vacio

_.isEmpty (objeto)
5 isArray

_.isArray (objeto)
6 isObject

_.isObject (valor)
7 isArguments

_.isArguments (objeto)
8 isFunction

_.isFunction (objeto)
9 isString

_.isString (objeto)
10 es número

_.isNumber (objeto)
11 isFinite

_.isFinite (objeto)
12 isBoolean

_.isBoolean (objeto)
13 isDate

_.isDate (objeto)
14 isRegExp

_.isRegExp (objeto)
15 isError

_.isError (objeto)
dieciséis isSymbol

_.isSymbol (objeto)
17 isMap

_.isMap (objeto)
18 isWeakMap

_.isWeakMap (objeto)
19 Está establecido

_.isSet (objeto)
20 isWeakSet

_.isWeakSet (objeto)
21 isNaN

_.isNaN (objeto)
22 es nulo

_.isNull (objeto)
23 es indefinido

_.isUndefined (valor)

Underscore.JS tiene muchos métodos de utilidad fáciles de usar. Este capítulo los analiza en detalle.

Underscore.JS proporciona varios métodos de utilidad que se enumeran a continuación:

No Señor. Método y sintaxis
1 identidad

_.identity (valor)
2 constante

_.valor constante)
3 noop

_.noop ()
4 veces

_.times (n, iteratee, [contexto])
5 aleatorio

_.random (min, max)
6 mezclando

_.mixin (objeto)
7 iterar

_.iteratee (valor, [contexto])
8 Identificación única

_.uniqueId ([prefijo])
9 escapar

_.escape (cadena)
10 huir

_.unescape (cadena)
11 resultado

_.result (objeto, propiedad, [defaultValue])
12 ahora

_.ahora()
13 modelo

_.template (templateString, [configuración])

Underscore.JS tiene métodos para crear una cadena de métodos y luego recuperar su resultado efectivo. Este capítulo los analiza en detalle.

Underscore.JS proporciona varios métodos de utilidad que se enumeran a continuación:

No Señor. Método y sintaxis
1 cadena

_.chain (objeto)
2 valor

_.chain (obj) .value ()