Filtrar múltiples condiciones en JavaScript
La publicación de hoy nos enseña a filtrar una matriz con múltiples condiciones utilizando los métodos tradicionales y de filtro
en JavaScript.
Filtrar múltiples condiciones en JavaScript
Las matrices son un tipo de objeto de JavaScript con una clave numérica fija y valores dinámicos. JavaScript proporciona varios métodos integrados para acceder y manipular estos elementos de matriz.
El método filter()
genera una nueva matriz a partir de la matriz original con todos los elementos que pasan la condición/prueba implementada por la función proporcionada.
Sintaxis:
filter(callbackFn)
El método filter
acepta callbackFn
como parámetro. Esta función es un predicado para probar cada elemento de la matriz.
Devuelve una nueva matriz que obliga al elemento a permanecer true
o false
de lo contrario.
La función de devolución de llamada se llama con los tres argumentos.
- Un
element
es el elemento actual procesado en la matriz. - El
index
es el índice del elemento actual que se procesa en la matriz. - El
array
en el que se llamófilter()
.
Se devuelve una nueva matriz que contiene los elementos que pasan la prueba. Se devolverá una matriz vacía si ningún elemento pasa la prueba.
filter()
llama a una función callbackFn
provista una vez para cada elemento de una matriz y construye una nueva matriz de todos los valores para los cuales callbackFn
devuelve un valor que se impone como verdadero.
callbackFn
solo se llama para índices de matriz que tienen valores asignados. No se llama para índices que se han descartado o que nunca se han asignado.
Los elementos de la matriz que fallan en la prueba callbackFn
se omiten y no se incluyen en la nueva matriz. Encuentre más información en la documentación del filter()
.
Utilice el método tradicional
const filter = {
address: 'India',
name: 'Aleena'
};
const users = [
{name: 'John Doe', email: 'johndoe@mail.com', age: 25, address: 'USA'},
{name: 'Aleena', email: 'aleena@mail.com', age: 35, address: 'India'},
{name: 'Mark Smith', email: 'marksmith@mail.com', age: 28, address: 'England'}
];
const filteredUsers = users.filter((item) => {
for (var key in filter) {
if (item[key] === undefined || item[key] != filter[key]) return false;
}
return true;
});
console.log(filteredUsers);
Hemos descrito un objeto filtro
con las propiedades deseadas en el ejemplo anterior. Hemos definido la función de devolución de llamada en el método filter
para verificar si las propiedades deseadas están presentes en la matriz especificada.
Si las propiedades deseadas no están presentes, se devuelve false
; de lo contrario, se devuelve true
.
Este enfoque es útil cuando el objeto filtro
se genera dinámicamente. Si el objeto filtro
es estático, puede filtrar los objetos usando la condición &&
a continuación.
Intente ejecutar el fragmento de código anterior en cualquier navegador que admita JavaScript; mostrará el resultado a continuación.
Usa el Método Filtro
const filteredUsers = users.filter(
obj => obj.name == filter.name && obj.address == filter.address);
console.log(filteredUsers);
Producción :
[{
address: "India",
age: 35,
email: "aleena@mail.com",
name: "Aleena"
}]
Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.
LinkedIn