Filtro Javascript

| | | | | | | | | | | | | | | | | | | | | | | | |

El método de filtro JavaScript () crea una matriz de elementos a partir de una matriz existente. El método filter () acepta una funciòn de devoluciòn de llamada como argumento. Esta funciòn eval√∫a si se debe agregar un elemento a la nueva lista de la existente.

Si es nuevo en JavaScript , es posible que no haya oìdo hablar de las funciones de filter () y reduce () Javascript. Estas funciones pueden resultar √∫tiles cuando trabaja con una lista de objetos, también conocida como matriz.

Si alguna vez ha querido obtener solo ciertos valores de una matriz, puede utilizar la funciòn & nbsp; filter () & nbsp; de JavaScript. En este tutorial, discutiremos, con referencia a ejemplos, còmo usar la funciòn filter ().

Array Refresher

Una matriz de JavaScript almacena cero o más elementos. Los elementos pueden ser n√∫meros, otras matrices, cadenas o utilizar otro tipo de datos. Utilizan ìndices numerados a partir de " 0 " para acceder a elementos especìficos.

Las matrices le permiten almacenar varios valores en la misma variable. Esto puede ayudarlo a escribir mejor y más limpio porque no necesita escribir m√∫ltiples variables para almacenar sus valores.

Aquì hay un ejemplo de una matriz en JavaScript:

Matriz de filtros de JavaScript

El método filter () de matriz de JavaScript crea una nueva matriz basada en el contenido de una matriz existente. El método filter () eval√∫a una funciòn de devoluciòn de llamada en cada elemento de una matriz existente. Cualquier elemento que cumpla con la condiciòn en la funciòn de devoluciòn de llamada se agrega a una nueva lista.

Usando el método de filtro, podemos recuperar valores que cumplen con ciertos criterios y agregarlos a una nueva matriz.

Sintaxis de JavaScript de matriz de filtro

El método de filtro utiliza la siguiente sintaxis:

Este còdigo define una matriz llamada " newArr " basado en el contenido de la matriz " oldArr & rdquo ;. Nuestra funciòn de devoluciòn de llamada devuelve un valor a la nueva matriz si se cumple una condiciòn. Las condiciones de ejemplo incluyen:

Puede usar operadores de comparaciòn de JavaScript para construir sus condiciones. O puede usar una declaraciòn if. Usando un if La declaraciòn le permite controlar cuál de los m√∫ltiples valores se agrega a una nueva lista.

Filtrar JavaScript mi xamples

Filtrar una lista de n√∫meros

Comencemos con un ejemplo simple. Tenemos una lista de compras en una cafeterìa. Queremos crear una nueva lista que muestre compras superiores a $ 10.

Nuestra lista de compras se ve asì:

Podemos usar el método filter () para recuperar las compras que valen más de $ 10:

Nuestro programa verifica si una compra valiò más de $ 10. Se agrega una compra a nuestra lista de big_purchases si vale más de $ 10. De lo contrario, la compra no se realiza.

El valor de la variable JavaScript de big_purchases es:

El método filter () devuelve todos los elementos que pasan la prueba que hemos definido . Esta prueba es " item" 10 & rdquo ;. Si quisiéramos acceder a todas las compras, podrìamos consultar nuestras "compras" originales. lista. Nuestro método filter () devuelve una matriz de valores superiores a $ 10.

Filtrar una matriz de objetos

Tenemos una matriz que contiene los nombres de todos en una escuela:

¿Qué pasa si solo queremos recuperar a los estudiantes que están en primer grado? Filter () facilita la realizaciòn de esta operaciòn. Escribamos una funciòn que devuelva a todos los estudiantes de primer grado de la categorìa "estudiantes". matriz:

Filter () toma un parámetro. Esta es una funciòn que determina qué operaciòn ejecuta en sus datos.

La funciòn filter () pasa por todos los objetos de la matriz " estudiantes ". filter () devuelve los estudiantes cuya clase es igual a " Primero Grade. & Rdquo; El operador " === " significa igualdad.

La funciòn de filtro creará una nueva matriz con estos nuevos valores, accesible a través de la variable " firstGradeStudents ".

< iframe width = "100%" height = "400px" frameborder = "0" data-src = "https://repl.it/@careerkarma/A-Guide-to-Filter-and-Reduce-in-JavaScript?lite = true "class =" lazyload "src =" data: image / gif; base64, R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw == ">

Conclusion

Puede utilizar el método de matriz filter () para crear una nueva matriz a partir de contenido de una matriz existente. la pista está en el nombre con el método filter (). filter () filtra elementos de una matriz existente.

¬°Y eso es todo! Ahora puede usar reduce () en JavaScript con a√∫n más confianza. Para obtener más informaciòn sobre còmo codificar en JavaScript, lea nuestro artìculo sobre los mejores tutoriales para principiantes de JavaScript .