¿Cómo funciona la función de filtro en Underscore JS?

 

En subrayado, la función de filtro proporciona la capacidad de filtrar algunos valores en función de una función de prueba que usted le pasa. La función Tester se declara más formalmente como predicado. El concepto es similar a muchas de las funciones de subrayado que hemos cubierto hasta ahora. La firma oficial de filter es _.filter (lista, predicado, [contexto]) y devuelve una matriz con todos los elementos de la colección de listas que satisfacen la condición de prueba encontrada en la función de predicado.

---

Matriz de enteros

En este primer ejemplo, tenemos una colección de valores enteros que contienen varios números entre 10 y 100. También tenemos las funciones de predicado evenTester, oddTester, mayorThan75 y lessThan50 definidas. Como muchas otras funciones de subrayado, llamamos a la función principal, en este caso filter, y pasamos la lista de valores como primer parámetro y la función de predicado como segundo parámetro. De hecho, puede crear una biblioteca completa de estas diferentes funciones de prueba de predicados y usarlas como mejor le parezca. Cuando hace clic para ejecutar el código de ejemplo aquí, podemos ver que hemos filtrado todos los valores que no coinciden con la función Probador proporcionada. El resultado es una lista de números pares, impares, números mayores que 75 y menores que 55.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

var values = [10, 21, 32, 43, 54, 65, 76, 87, 98, 100],           evenTester = function (value) {             return value % 2 === 0;         },           oddTester = function (value) {             return value % 2 !== 0;         },           greaterThan75 = function (value) {             return value > 75;         },           lessThan50 = function (value) {             return value < 50;         };   log('Even numbers: ' + _.filter(values, evenTester), '#filterexampleoneunderscore');   log('Odd numbers: ' + _.filter(values, oddTester), '#filterexampleoneunderscore');   log('Numbers Greater Than 75: ' + _.filter(values, greaterThan75), '#filterexampleoneunderscore');   log('Numbers Less Than 50: ' + _.filter(values, lessThan50), '#filterexampleoneunderscore');

Hacer clic Claro

---

Matriz de objetos

Este segundo ejemplo probará la función de filtro usando una matriz de objetos. Nuevamente, hemos configurado una serie de valores y esta vez tenemos bicicleta, modelo y precio. Después de esto, hemos configurado nuestras funciones de prueba o predicado para que hagan el trabajo por nosotros. La principal diferencia con el ejemplo de la matriz de enteros es que, dado que tenemos una matriz de objetos, necesitamos saber qué propiedad del objeto se utilizará en la función de prueba. Al observar la función evenTester, podemos ver que utilizamos value.price en lugar de solo el valor que entra en la función. Casi todo lo demás funciona de manera similar. Las funciones de prueba son un poco diferentes, solo que estamos usando diferentes criterios para probar.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

var values = [                 {bicycle: 'BH', model: 'Evo Jumper 27.5', price: 4399},                 {bicycle: 'Haibike', model: 'Sduro FullFatSix', price: 4059},                 {bicycle: 'ProdecoTech', model: 'Phantom', price: 2199},                 {bicycle: 'Specialized', model: 'Turbo', price: 5900}             ],               evenTester = function (value) {                 return value.price % 2 === 0;             },               oddTester = function (value) {                 return value.price % 2 !== 0;             },               greaterThan4000Tester = function (value) {                 return value.price > 4000;             },               lessThan4000Tester = function (value) {                 return value.price < 4000;             };       log('Even prices:', '#filterexampletwounderscore');     _.each(_.filter(values, evenTester),             function (value) {                 log(value.price, '#filterexampletwounderscore')             });       log('Odd prices:', '#filterexampletwounderscore');     _.each(_.filter(values, oddTester),             function (value) {                 log(value.price, '#filterexampletwounderscore')             });       log('Prices Greater Than 4000:', '#filterexampletwounderscore');     _.each(_.filter(values, greaterThan4000Tester),             function (value) {                 log(value.price, '#filterexampletwounderscore')             });       log('Prices Less Than 4000:', '#filterexampletwounderscore');     _.each(_.filter(values, lessThan4000Tester),             function (value) {                 log(value.price, '#filterexampletwounderscore')             }); }); var log = function (contents, selector) {     if (_.isArray(contents)) {         _.each(contents, function (e, i, l) {             $(selector).append(e + '<br>');         });     } else {         $(selector).append(contents + '<br>');     } };

Hacer clic Claro

---

¿Cómo funciona la función de filtro en el resumen JS de subrayado?

Este tutorial cubrió la función de filtro en la biblioteca Underscore JS. Aprendimos que la función de filtro nos da la capacidad de filtrar algunos valores basados ​​en una función de Probador o Predicado que le pasamos. Para examinar cómo funciona esto, configuramos dos ejemplos de trabajo con filter. El primero hizo uso de una matriz de enteros simple, mientras que el segundo se sumergió en el uso de filtro con una matriz de objetos. También puede estar interesado en aprender sobre las opciones del filtro jQuery.