Cómo filtrar varias condiciones en JavaScript

Usa el método filter() de JavaScript con un predicado que devuelva true solo cuando un elemento cumpla todas las condiciones requeridas. Si los criterios se reciben durante la ejecución, compara cada par de propiedad y valor; si ya los conoces, combina las comparaciones con &&. En ambos casos, filter() devuelve un array nuevo con los elementos que coinciden.

Filtrar varias condiciones en JavaScript

El método filter() ejecuta su función de callback para cada elemento asignado del array e incluye un elemento cuando el resultado de la función es verdadero según las reglas de JavaScript. No cambia el elemento a true o false ni modifica el array original. La función recibe el elemento actual, su índice y el array; la mayoría de los predicados solo necesitan el elemento. El array devuelto es nuevo, pero sus objetos coincidentes son las mismas referencias que los objetos del array original.

filter(callbackFn)

Aquí, callbackFn es un predicado: evalúa un elemento y devuelve un resultado verdadero o falso. Si ningún elemento coincide, el array devuelto queda vacío. Se omiten las posiciones vacías de un array disperso, porque el callback no se ejecuta para los índices sin un valor asignado. Consulta la documentación de MDN sobre filter() para conocer la firma completa y el comportamiento del callback.

Usar el método tradicional

Cuando las condiciones proceden de un formulario u otra fuente de datos, puedes guardarlas en un objeto y comprobar sus entradas. Este ejemplo exige que cada clave solicitada sea una propiedad propia del usuario y que su valor coincida exactamente. Los criterios seleccionan a Aleena porque coinciden tanto su nombre como su dirección.

const criteria = {
  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((user) => {
  return Object.entries(criteria).every(([key, value]) =>
    Object.prototype.hasOwnProperty.call(user, key) && user[key] === value
  );
});

console.log(filteredUsers);

[
  {
    name: 'Aleena',
    email: 'aleena@mail.com',
    age: 35,
    address: 'India'
  }
]

Object.entries(criteria) proporciona los pares de propiedad y valor, y every() exige que todos cumplan la condición. La igualdad estricta (===) requiere que coincidan tanto el valor como el tipo; si falta una propiedad, no puede coincidir con el valor solicitado. Si el objeto de criterios está vacío, every() devuelve true para cada usuario y el resultado incluye a todos. Este patrón se adapta a cualquier conjunto de claves sin tener que añadir una comparación específica para cada campo.

La comprobación de propiedad propia también evita que una propiedad heredada satisfaga una clave solicitada. Si los datos están anidados, compara explícitamente el valor anidado o proporciona un predicado para ese campo; este ejemplo compara directamente valores del nivel superior.

Usar el método filter()

Si las condiciones son fijas y se conocen de antemano, escríbelas directamente en el predicado y combínalas con el operador lógico AND (&&). El usuario solo se conserva si cada comparación es verdadera. Este ejemplo completo utiliza los mismos datos y selecciona al mismo usuario que la versión dinámica.

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(
  (user) => user.name === filter.name && user.address === filter.address
);

console.log(filteredUsers);

[
  {
    name: 'Aleena',
    email: 'aleena@mail.com',
    age: 35,
    address: 'India'
  }
]

Usa esta forma directa cuando los campos y las comparaciones formen parte de la lógica del programa. Elige la forma dinámica cuando pueda cambiar el conjunto de campos solicitados. También está disponible la demostración original en JSFiddle.

Limita el predicado a decidir qué elementos incluir: devuelve un valor verdadero para conservarlos y uno falso para omitirlos. Como && evalúa las condiciones en orden y se detiene al encontrar una falsa, las comparaciones posteriores solo se ejecutan si las anteriores se cumplen. Puedes colocar antes una comprobación barata que descarte muchos elementos, siempre que el significado de la condición siga siendo claro.