Underscore.js es una biblioteca de JavaScript que proporciona muchas funciones útiles como el mapa, el filtro, las invocaciones, etc., incluso sin usar ningún objeto integrado.
El _.filter() se usa para verificar qué elementos en la array pasada satisfacen la condición. Formará una nueva array de todos aquellos elementos que satisfagan la condición pasada de la array. Se usa principalmente cuando se necesita encontrar ciertos elementos de una array grande.
Sintaxis:
_.filter( list, predicate, [context] )
Parámetros: esta función acepta tres parámetros, como se mencionó anteriormente y se describe a continuación:
- lista: este parámetro se utiliza para contener la lista de elementos.
- predicado: este parámetro se utiliza para mantener la condición de verdad.
- contexto: el contenido de texto que debe mostrarse. Es un parámetro opcional.
Valor devuelto: Devuelve una array formada por elementos que cumplen la condición.
Pasar una lista de números a la función _.filter(): La función _.filter() toma el elemento de la lista uno por uno y verifica las operaciones especificadas en el código. Como aquí la operación es encontrar los elementos de la lista si son pares o no. Solo los elementos impares se agregarán a la array resultante.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js" >
</script>
</head>
<body>
<script type="text/javascript">
var oddNo = _.filter([1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
function(num){
return num % 2 != 0;
});
console.log(oddNo);
</script>
</body>
</html>
Producción:
Pasar una lista de palabras a la función _.filter(): La función _.filter() toma la palabra del elemento de la lista una por una y verifica las operaciones especificadas en el código. Al igual que aquí, la operación es encontrar los elementos de la lista que tienen una longitud de 9. Solo se agregarán a la array resultante aquellas palabras cuya longitud sea igual a 9.
Ejemplo:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src= "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js" > </script> </head> <body> <script type="text/javascript"> var words = ['javascript', 'java', 'unix', 'hypertext', 'underscore', 'CSS']; const result = words.filter(word => word.length == 9); console.log(result); </script> </body> </html>
Producción:
Pasar una función separada a _.filter(): Pase una función definida por el usuario a la función _.filter(). Primero, declare la función como aquí, el nombre de la función es ‘más grande()’ que devuelve el elemento si es mayor o igual a 100. Esta función puede hacer cualquier comparación según lo declarado por el usuario. Luego, en el _.filter pase esta función. Al final console.log) la array resultante.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js" >
</script>
</head>
<body>
<script type="text/javascript">
function largest(v) {
return v >= 100;
}
var res = [1, 4, 12, 15, 8, 330, 54].filter(largest);
console.log(res);
</script>
</body>
</html>
Producción:
Uso de otras funciones con la función _.filter(): Utilice las funciones toLowerCase() e indexOf() en la función _.filter(). Primero encuentre el índice de cada elemento y luego verifique si es mayor que -1. Dado que console.log() se usa al final, la salida solo se verá para el último elemento de la array pasada.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js" >
</script>
</head>
<body>
<script type="text/javascript">
const lang = ['hypertext', 'markup', 'language', 'cascading',
'style', 'sheet', 'javascript'];
const func = (query) =>
{
return lang.filter((el) =>
el.toLowerCase().indexOf(query.toLowerCase()) > -1
);
}
console.log(func('pt'));
</script>
</body>
</html>
Producción:
Nota: estos comandos no funcionarán en la consola de Google o en Firefox, ya que estos archivos adicionales deben agregarse y no se agregaron. Por lo tanto, agregue los enlaces dados a su archivo HTML y luego ejecútelos.
<script type="text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"> </script>