Función de filtro de matriz de JavaScript
En esta publicación, comprenderemos el concepto de JavaScript filtrar() función. ¿Qué es un filtrar() función, y cómo podemos usarlo para ayudar a simplificar el código JavaScript y completar las tareas de manera eficiente y rápida.
Cuál es el filtrar función en JavaScript
JavaScript's filtrar() La función para la matriz se utiliza para filtrar los datos en función de la condición o prueba dada.
- El filtrar() la función toma el elemento de una matriz uno por uno y aplica la condición en cada elemento.
- El filtrar() La función mantiene los elementos que pasan la condición en una matriz diferente y devuelven la matriz resultante después de iterar a través de toda la matriz.
- Este filtrar() La función de la matriz no afecta la matriz original.
Exploremos más para comprender la sintaxis y su funcionalidad, junto con un par de ejemplos.
Sintaxis de la función de filtro en JavaScript
formación.filtro (function_name, thisValue);Matriz filtrar() La función toma una función como una función de devolución de llamada con tres argumentos. La sintaxis de la función de devolución de llamada y la secuencia de argumentos irán así:
función function_name (valor, índice, array)condición de retorno;
En la función de devolución de llamada de filtrar() método:
- El primer parámetro es la corriente valor del elemento de matriz durante la iteración.
- El segundo parámetro es el parámetro opcional que es la corriente índice del elemento de matriz durante la iteración.
- Por último, también podemos pasar el formación a sí misma a la función de devolución de llamada para tener algunas funcionalidades personalizadas dentro de la función de devolución de llamada.
También podemos pasar "este valor" a la función, donde la palabra clave "esto" se refiere al bloque/objeto principal.
Ahora usaremos un par de ejemplos para ver sus implementaciones de la vida real.
Nota: Usaremos la consola del navegador para demostrar ejemplos realizados en esta publicación. Para abrir la consola del navegador:
- Utilizar el F12 clave en Chrome y otros navegadores basados en cromo.
- Usar Ctrl + Shift + K teclas de atajo de teclado para Mozilla.
- Usar Opción + ⌘ + C teclas de acceso directo de teclado en Safari (si el menú de desarrollador no aparece, luego abra las preferencias presionando ⌘ +, y en Avanzado comprobación de pestañas "Mostrar el menú Desarrollar en la barra de menú").
Cómo usar la función Filter () en JavaScript
El mejor ejemplo para comprender el filtrar() la función es filtrar algunos números de una matriz de números basados en la condición dada.
Ejemplo 1:
Supongamos que tenemos una variedad de números y queremos obtener números mayores que algún número específico:
números var = [23,16,38,5,10,19]El primer método para obtener el rango de números deseado es recorrer toda la matriz y colocar una condición dentro del bucle para verificar si el número pasa la prueba dada (mayor que 18 o no). Si el número pasa la prueba, se agregará/se agregará a una nueva matriz. El código del bucle for para filtrar los números se da a continuación:
varfilteredarray = [];para (leti = 0; i18)
filtredarray.Push (números [i])
consola.log (FilteredArray);
En el código anterior, primero colocamos un bucle sobre la matriz de "números", luego colocamos una condición usando la instrucción if, y si el elemento de matriz pasa la condición, se agregará/empujará a la variable "filtredarray".
Aunque tenemos el rango deseado como salida. Pero, ¿por qué no usar una forma inteligente y fácil de obtener la matriz filtrada utilizando el filtrar() Método de la matriz, donde no tenemos que mutar las variables como "filtredarray."
Uso de la función Filter ()
El filtrar() La función para obtener los números superiores a 18 irá así:
varfilteredarray = números.filtro (getAdults);functetAdAdults (n)
regreso n> 18;
consola.log (FilteredArray);
En el código anterior, puede ver que primero hemos pasado la función "getAdults" a la filtrar() función, y en la definición de la función "getAdults", solo verificamos si el número es mayor que 18 o no y si esta condición devuelve verdadero, entonces devuelva ese elemento de matriz.
Una vez que la función "Filtrar" verifica todos los números en la matriz "Números", almacenará el resultado final en la variable "FilteredArray".
Por último, acabamos de consolar la variable "FiltarDarray" para verificar si nuestro filtrar() la función funcionó bien o no.
Puede verificar mirando en la captura de pantalla provista anteriormente que el filtrar() la función ha devuelto todos los números que son mayores de 18.
Otra forma más corta y más fácil de escribir filtrar() la función es hacer que la devolución de llamada funcione de filtrar() Función una función de flecha:
La sintaxis de escribir la función de devolución de llamada dentro del filtrar() Los paréntesis de la función serán así:
varfilteredarray = números.filtro ((n) =>regreso n> 18
);
consola.log (FilteredArray);
Muy bien, este fue el simple ejemplo en el que solo tenemos una variedad de números; ¿Qué pasa con la matriz de objetos?. Intentemos ese también.
Ejemplo 2:
Supongamos que tenemos una lista de estudiantes en una matriz, y queremos obtener la lista de estudiantes cuyas tarifas son superiores a $ 8000:
estudiantes var = [ID: 1,
Nombre: "John"
Edad: 12,
Tarifa: 8500
,
ID: 2,
Nombre: "Bob",
edad 15,
Tarifa: 4500
,
ID: 3,
Nombre: "Steve",
Edad: 10,
Tarifa: 7500
,
ID: 4,
Nombre: "Harry",
Edad: 13,
Tarifa: 10500
,
ID: 5,
Nombre: "Tom",
Edad: 14,
Tarifa: 9000
,
ID: 6,
Nombre: "Ron",
Edad: 11,
Tarifa: 6000
,
]
El filtrar() La función para obtener la lista filtrada de estudiantes irá así:
VarfilteredStudents = Estudiantes.filtro ((estudiante) =>returnstudent.Tarifa> 8000
);
consola.log (FilteredStudents);
Ahora, la única diferencia en este código es que un solo objeto se pasa como un valor para la función de devolución de llamada, y dentro de la definición de la función de devolución de llamada, ponemos una condición y devolvemos el objeto donde la tarifa del estudiante es mayor que $ 8000.
Al mirar la captura de pantalla adjunta anteriormente, puede ver que las tarifas de los estudiantes son superiores a $ 8000 y se muestran como una salida. Entonces, así es como podemos acceder a los objetos de una matriz en el filtrar() función.
Conclusión
En esta publicación, hemos aprendido qué filtrar() La función es y cómo podemos usarlo para ayudar a simplificar el código JavaScript.
Hemos aprendido que el filtrar() La función filtra los elementos de la matriz según la condición dada. El filtrar() La función toma el elemento de una matriz uno por uno, toma una función de devolución de llamada aplicada a cada elemento de la matriz y devuelve la nueva matriz filtrada.
Esta publicación se trata de JavaScript's filtrar() función y su uso. Contiene algunos ejemplos básicos que ayudan a comprender filtrar() Funciona fácilmente.