Encadenamiento de métodos de Arrays
Parte de la sección Lógica y Flujo del Journey de JavaScript de Coddy — lección 55 de 65.
El encadenamiento de arreglos te permite realizar múltiples operaciones en un arreglo en una sola sentencia. Este enfoque puede hacer que tu código sea más conciso y legible.
Aquí tienes un ejemplo de encadenamiento de métodos de array:
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const result = numbers
.filter(num => num % 2 === 0)
.map(num => num * 2)
.reduce((sum, num) => sum + num, 0);
console.log(result); // 60En este ejemplo, comenzamos con un array de números, filtramos los números impares, duplicamos cada número restante y luego sumamos los resultados.
El orden del encadenamiento es importante. Cada método en la cadena opera sobre el resultado del método anterior.
Desafío
FácilCrea una función llamada processFruits que reciba un array de objetos de frutas. Cada objeto de fruta tiene las propiedades name (string) y quantity (number).
La función debe utilizar métodos de array encadenados para:
- Filtrar las frutas con una cantidad de 0
- Transformar cada nombre de fruta a mayúsculas
- Crear una cadena que enumere todas las frutas con sus cantidades como "APPLE: 5, BANANA: 3"
Un recordatorio rápido:
Puedes usar la función .join(", ") para convertir un array de cadenas en una sola cadena.
Es posible encadenar incluso la función .join():
arr.filter(...)
.map(...)
.join(...)Hoja de referencia
El encadenamiento de métodos de array te permite realizar múltiples operaciones en un array en una sola sentencia, haciendo que el código sea más conciso y legible.
Cada método en la cadena opera sobre el resultado del método anterior:
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const result = numbers
.filter(num => num % 2 === 0)
.map(num => num * 2)
.reduce((sum, num) => sum + num, 0);
console.log(result); // 60También puedes encadenar el método .join() para convertir un array en una cadena de texto:
arr.filter(...)
.map(...)
.join(", ")Pruébalo tú mismo
function processFruits(fruits) {
// Escribe tu código aquí
}
Ponte a pruebaEsta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.
Todas las lecciones de Lógica y Flujo
1Strings en profundidad
Fundamentos de stringsIterar sobre stringsTemplate LiteralsMétodos de stringsResumen - String Weaver4JSON Parte 2
Iterar sobre JSONJSON anidadoEncadenamiento opcional en JSONCopia superficial y profundaResumen - Tienda de bicicletasResumen - Sistema solar7Sistema de Gestión de Biblioteca
Descripción general del proyectoAñadir libros
Buscar por títuloFiltrar por géneroMarcar como leído10Gestionar el sistema del festival
Descripción general del proyectoAñadir películas y sedesAñadir proyeccionesComprar entradasCalificar películasCancelar proyecciones2Arreglos multidimensionales
Conceptos básicos de arreglos 2DAcceso a elementos de arreglos 2DBucles anidados con arreglos 2DResumen - Arreglos 2DSuma y resta de matricesArreglos irregulares (Jagged Arrays)Arreglos 3D y más alláPatrones comunes en arreglos 2DResumen - Todo sobre arreglos5Conjuntos Parte 1
¿Qué es un conjunto?Iterar sobre conjuntosAñadir un elementoEliminar un elementoComprobar si un elemento existeTamaño y Is EmptyCopy y ClearResumen - Conceptos básicos de conjuntos8Temas interesantes de Arrays
Desestructuración de ArraysSintaxis Spread en ArraysArrays dispersosResumen - Taller de Arrays3JSON Parte 1
¿Qué es un JSON?Comprobar si existe una claveMétodos de objetoEl Spread Operator Parte 1El Spread Operator Parte 2Eliminar clavesResumen - Manipular claves de JSON6Conjuntos Parte 2
Matemáticas - Unión de conjuntosMatemáticas - Intersección de conjuntosMatemáticas - Diferencia de conjuntosMatemáticas - Diferencia simétricaSubconjuntos y superconjuntosRepaso - Agrupar amigos9Métodos avanzados de Arrays
Los métodos Join y SplitEl método MapEl método FilterEl método ReduceEncadenamiento de métodos de Arrays¿Son iguales ForEach y Map?El método SortLos métodos Find y FindIndexResumen - El maestro del encadenamiento