Filtrar Arrays en JavaScript: Dominando filters js para Datos y Objetos

La manipulación de datos es fundamental en la programación JavaScript, y la filtración de arrays es una tarea común que surge en diversos contextos. Ya sea que se trate de procesar listas de usuarios, gestionar inventarios o analizar datos, la capacidad de seleccionar elementos específicos de un array es esencial para obtener información relevante.

En este artículo, exploraremos dos métodos clave para filtrar arrays en JavaScript: el uso de un ciclo for y el método filter(). Analizaremos en detalle ambos métodos, incluyendo ejemplos prácticos para comprender su aplicación y la diferencia en su sintaxis. Adicionalmente, abordaremos la filtración de objetos, mostrando cómo convertirlos en arrays para aplicar el método filter() de manera efectiva.

Filtrando Arrays con un Ciclo for

El ciclo for es una herramienta clásica en JavaScript para iterar sobre elementos de un array. Para filtrar un array, podemos utilizar un ciclo for y agregar los elementos que cumplan con una condición específica a un nuevo array.

«`javascript
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenNumbers = [];

for (let i = 0; i < numbers.length; i++) {
if (numbers[i] % 2 === 0) {
evenNumbers.push(numbers[i]);
}
}

console.log(evenNumbers); // Output: [2, 4, 6, 8, 10]
«`

En este ejemplo, el ciclo for itera sobre cada elemento del array numbers. Dentro del ciclo, una condición if verifica si el número actual es divisible por 2. Si lo es, se agrega al array evenNumbers.

Filtrando Arrays con el Método filter()

El método filter() es una función de alto orden en JavaScript que permite crear un nuevo array con los elementos que cumplen una condición específica. Es una forma más concisa y legible de filtrar arrays en comparación con el uso de un ciclo for.

«`javascript
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evenNumbers = numbers.filter(number => number % 2 === 0);

console.log(evenNumbers); // Output: [2, 4, 6, 8, 10]
«`

En este caso, el método filter() recibe una función de devolución de llamada (callback function) como argumento. Esta función se ejecuta para cada elemento del array original. La función de devolución de llamada en este ejemplo verifica si el número actual es divisible por 2 y devuelve true si lo es, y false en caso contrario. El método filter() crea un nuevo array con los elementos que retornan true en la función de devolución de llamada.

Filtrando Arrays de Objetos con filters js

La filtración de arrays de objetos es un escenario común en la programación JavaScript. Para filtrar un array de objetos, podemos utilizar el método filter() con una función de devolución de llamada que verifica una propiedad específica del objeto.

«`javascript
const users = [
{ name: «John Doe», age: 30 },
{ name: «Jane Smith», age: 25 },
{ name: «Peter Jones», age: 40 },
];

const adultUsers = users.filter(user => user.age >= 18);

console.log(adultUsers);
// Output:
// [
// { name: «John Doe», age: 30 },
// { name: «Jane Smith», age: 25 },
// { name: «Peter Jones», age: 40 },
// ]
«`

En este ejemplo, el método filter() crea un nuevo array adultUsers con los usuarios que tienen una edad mayor o igual a 18 años. La función de devolución de llamada verifica la propiedad age de cada objeto en el array original.

Filtrando Objetos con filters js

Si necesitas filtrar las propiedades de un objeto, primero debes convertir el objeto en un array utilizando métodos como Object.keys(), Object.values() o Object.entries(). Luego, puedes aplicar el método filter() para obtener las propiedades deseadas.

Ejemplo usando Object.keys():

«`javascript
const person = {
name: «Alice»,
age: 28,
city: «New York»,
occupation: «Software Engineer»,
};

const relevantProperties = Object.keys(person)
.filter(key => key !== «age»);

console.log(relevantProperties);
// Output: [«name», «city», «occupation»]
«`

En este ejemplo, Object.keys(person) devuelve un array con las claves del objeto person. El método filter() se utiliza para crear un nuevo array con las claves que no son «age».

Ejemplo usando Object.values():

«`javascript
const person = {
name: «Alice»,
age: 28,
city: «New York»,
occupation: «Software Engineer»,
};

const relevantValues = Object.values(person)
.filter(value => typeof value === «string»);

console.log(relevantValues);
// Output: [«Alice», «New York», «Software Engineer»]
«`

En este ejemplo, Object.values(person) devuelve un array con los valores del objeto person. El método filter() se utiliza para crear un nuevo array con los valores que son de tipo string.

Ejemplo usando Object.entries():

«`javascript
const person = {
name: «Alice»,
age: 28,
city: «New York»,
occupation: «Software Engineer»,
};

const relevantEntries = Object.entries(person)
.filter(([key, value]) => key !== «age»);

console.log(relevantEntries);
// Output:
// [
// [«name», «Alice»],
// [«city», «New York»],
// [«occupation», «Software Engineer»]
// ]
«`

En este ejemplo, Object.entries(person) devuelve un array de arrays, donde cada sub-array contiene una clave y un valor del objeto person. El método filter() se utiliza para crear un nuevo array con las entradas que no son «age».

Combinando filter() con otros métodos

El método filter() puede combinarse con otros métodos como sort() y map() para realizar operaciones adicionales en los arrays filtrados.

«`javascript
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evenNumbers = numbers
.filter(number => number % 2 === 0)
.sort((a, b) => a – b)
.map(number => number * 2);

console.log(evenNumbers); // Output: [4, 8, 12, 16, 20]
«`

En este ejemplo, el método filter() se utiliza primero para obtener los números pares. Luego, el método sort() se utiliza para ordenar los números pares en orden ascendente. Finalmente, el método map() se utiliza para multiplicar cada número par por 2.

Conclusión

Filtrar arrays en JavaScript es una tarea fundamental para la manipulación de datos. El método filter() ofrece una sintaxis concisa y legible para filtrar arrays, mientras que el ciclo for proporciona un enfoque tradicional para realizar esta tarea. La elección del método depende de las necesidades del proyecto y del estilo de programación preferido.

Al comprender la sintaxis y la aplicación del método filter(), los desarrolladores pueden escribir código más eficiente y expresivo para filtrar datos en sus aplicaciones JavaScript. La capacidad de filtrar arrays y objetos de manera efectiva es esencial para la gestión de datos, la toma de decisiones y la creación de aplicaciones dinámicas.