Sintaxis Spread en Arrays
Parte de la sección Lógica y Flujo del Journey de JavaScript de Coddy — lección 48 de 65.
La sintaxis de propagación (...) permite que un iterable, como un array, sea expandido en lugares donde se esperan cero o más argumentos o elementos. Proporciona una forma concisa de realizar operaciones como combinar arrays o copiar arrays.
Aquí hay algunos casos de uso comunes:
1. Combinar arreglos:
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4, 5, 6]2. Creando una copia superficial de un array:
const original = [1, 2, 3];
const copy = [...original];
console.log(copy); // [1, 2, 3]3. Añadir elementos a un array:
const numbers = [1, 2, 3];
const moreNumbers = [0, ...numbers, 4];
console.log(moreNumbers); // [0, 1, 2, 3, 4]4. Pasar elementos de un array como argumentos de función:
function sum(a, b, c) {
return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6Desafío
FácilCrea una función llamada mergeArr que reciba dos arrays de números como argumentos. La función debe:
- Combinar los dos arrays utilizando el operador spread
- Eliminar cualquier número duplicado
- Devolver el array resultante
Hoja de referencia
La sintaxis extendida (...) permite que un iterable se expanda en lugares donde se esperan cero o más argumentos o elementos.
Combinar arrays:
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4, 5, 6]Crear una copia superficial:
const original = [1, 2, 3];
const copy = [...original];
console.log(copy); // [1, 2, 3]Añadir elementos a un array:
const numbers = [1, 2, 3];
const moreNumbers = [0, ...numbers, 4];
console.log(moreNumbers); // [0, 1, 2, 3, 4]Pasar elementos de un array como argumentos de función:
function sum(a, b, c) {
return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6Pruébalo tú mismo
function mergeArr(arr1, arr2) {
// Escribe tu código aquí
}
Esta 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 libros10Gestionar el sistema del festival
Descripción general del proyectoAñadir películas y sedes2Arreglos 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 JSON