Filtrar múltiples condiciones en JavaScript

Shraddha Paghdar 12 octubre 2023
  1. Filtrar múltiples condiciones en JavaScript
  2. Utilice el método tradicional
  3. Usa el Método Filtro
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.

  1. Un element es el elemento actual procesado en la matriz.
  2. El index es el índice del elemento actual que se procesa en la matriz.
  3. 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"
}]

Manifestación

Shraddha Paghdar avatar Shraddha Paghdar avatar

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

Artículo relacionado - JavaScript Filter