Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Aprende Filtrado de Arreglos con el Método filter() | Métodos Avanzados de Arreglos y Transformaciones
Estructuras de Datos en JavaScript

bookFiltrado de Arreglos con el Método filter()

Este capítulo explora en detalle las complejidades del método filter(), aclarando su sintaxis, aplicaciones y cómo facilita la creación de arreglos refinados.

filter()

El método filter() selecciona los elementos que cumplen una condición específica. Analicemos la sintaxis:

array.filter((element, index, array) => {
  // Callback body
});

Aspectos clave sobre el método filter():

  • No modifica el arreglo original;
  • Itera sobre el arreglo original elemento por elemento;
  • Devuelve un nuevo arreglo;
  • Los elementos se agregan al nuevo arreglo si cumplen la condición del callback;
  • Si el callback retorna true, el elemento se incluye; de lo contrario, se omite.

Ejemplos

El verdadero potencial del método filter() se manifiesta al aplicarlo en diversos escenarios. A continuación, se presentan algunos ejemplos ilustrativos:

Ejemplo 1: Filtrado de números impares

En este ejemplo, el método filter() crea un arreglo (oddNumbers) que contiene únicamente los números impares del arreglo original.


              
123456

            
const numbers = [15, 22, 37, 41, 58, 67, 72];

const oddNumbers = numbers.filter((number) => {
  return number % 2 !== 0;
});
console.log(oddNumbers); // Output: 15, 37, 41, 67
copy

Ejemplo 2: Filtrado de productos por rango de precio

Aquí, el método filter() se utiliza para extraer productos con precios inferiores a $500, creando un nuevo arreglo (affordableProducts).

const products = [
  { name: "Keyboard", price: 220 },
  { name: "Smartphone", price: 800 },
  { name: "Tablet", price: 500 },
  { name: "Headphones", price: 120 },
  { name: "Camera", price: 1500 },
];

const affordableProducts = products.filter((product) => product.price < 500);
console.log(affordableProducts); // Output: [ { name: "Keyboard", price: 220 }, { name: "Headphones", price: 120 } ]

1. ¿Qué hace el método filter()?

2. ¿Cuál es una característica clave del método filter()?

3. En el siguiente ejemplo, ¿cuál debe ser la condición para que el arreglo numbersGreaterThan20 contenga los números mayores que 20?

question mark

¿Qué hace el método filter()?

Select the correct answer

question mark

¿Cuál es una característica clave del método filter()?

Select the correct answer

question mark

En el siguiente ejemplo, ¿cuál debe ser la condición para que el arreglo numbersGreaterThan20 contenga los números mayores que 20?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 5. Capítulo 3

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Suggested prompts:

Can you explain how the filter() method differs from the map() method?

Can you show more examples of using filter() with different data types?

What happens if no elements satisfy the filter condition?

Awesome!

Completion rate improved to 2.27

bookFiltrado de Arreglos con el Método filter()

Desliza para mostrar el menú

Este capítulo explora en detalle las complejidades del método filter(), aclarando su sintaxis, aplicaciones y cómo facilita la creación de arreglos refinados.

filter()

El método filter() selecciona los elementos que cumplen una condición específica. Analicemos la sintaxis:

array.filter((element, index, array) => {
  // Callback body
});

Aspectos clave sobre el método filter():

  • No modifica el arreglo original;
  • Itera sobre el arreglo original elemento por elemento;
  • Devuelve un nuevo arreglo;
  • Los elementos se agregan al nuevo arreglo si cumplen la condición del callback;
  • Si el callback retorna true, el elemento se incluye; de lo contrario, se omite.

Ejemplos

El verdadero potencial del método filter() se manifiesta al aplicarlo en diversos escenarios. A continuación, se presentan algunos ejemplos ilustrativos:

Ejemplo 1: Filtrado de números impares

En este ejemplo, el método filter() crea un arreglo (oddNumbers) que contiene únicamente los números impares del arreglo original.


              
123456

            
const numbers = [15, 22, 37, 41, 58, 67, 72];

const oddNumbers = numbers.filter((number) => {
  return number % 2 !== 0;
});
console.log(oddNumbers); // Output: 15, 37, 41, 67
copy

Ejemplo 2: Filtrado de productos por rango de precio

Aquí, el método filter() se utiliza para extraer productos con precios inferiores a $500, creando un nuevo arreglo (affordableProducts).

const products = [
  { name: "Keyboard", price: 220 },
  { name: "Smartphone", price: 800 },
  { name: "Tablet", price: 500 },
  { name: "Headphones", price: 120 },
  { name: "Camera", price: 1500 },
];

const affordableProducts = products.filter((product) => product.price < 500);
console.log(affordableProducts); // Output: [ { name: "Keyboard", price: 220 }, { name: "Headphones", price: 120 } ]

1. ¿Qué hace el método filter()?

2. ¿Cuál es una característica clave del método filter()?

3. En el siguiente ejemplo, ¿cuál debe ser la condición para que el arreglo numbersGreaterThan20 contenga los números mayores que 20?

question mark

¿Qué hace el método filter()?

Select the correct answer

question mark

¿Cuál es una característica clave del método filter()?

Select the correct answer

question mark

En el siguiente ejemplo, ¿cuál debe ser la condición para que el arreglo numbersGreaterThan20 contenga los números mayores que 20?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 5. Capítulo 3
some-alt