El método concat es inmutable y consiste en crear un nuevo array a partir de la unión de otros valores o arrays especificados como argumentos.
Este método recibe uno o varios argumentos:
let result = array.concat(otherArray)
Diferencia entre la estructura for y el método concat
Si deseas utilizar una estructura for para concatenar arrays, debes copiar el primer array sin su referencia en memoria para que no exista mutabilidad. Puedes realizar una copia con el spread operator (operador de propagación) o con el nuevo método structuredClone. También puedes utilizar el método push si no importa la mutabilidad del array original.
Con el método concat, solo debemos establecer el/los elemento/s a concatenar a un array de manera inmutable, es decir, los elementos originales no cambiarán.
const numbers1 = [1,2,3,4] const numbers2 = [5,6,7,8] const numbers3 = [9,10,11,12] const result1 = numbers1.concat("hola", "mundo") const result2 = numbers1.concat(numbers2) const result3 = numbers1.concat(numbers2, "hola") const result4 = numbers1.concat(numbers2, numbers3) result1 // [ 1, 2, 3, 4, 'hola', 'mundo' ] result2 // [ 1, 2, 3, 4, 5, 6, 7, 8 ] result3 // [ 1, 2, 3, 4, 5, 6, 7, 8, 'hola' ] result4 // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ]
Contribución creada por Andrés Guano.
Nicolas Molina
ProfesorSi estas trabajando con un arrays de Objs igual una forma de copiar cada elemento sin la referencia podría ser:
const newArray = myArray.map(a => ({…a}));
Luis Guilermo Figueroa Hernandez
¿Porque el curso no contiene el método slice 😢?
Erasmo Hernández
Profesor
German Cavani
Estaba preocupado porque la numeración de ejercicios de los archivos del profe iban un número más adelante que el mío y pensé que me había salteado una clase. Por suerte me di cuenta que en realidad el profe se saltó el número 8 😁
Stephany Plaza
me paso jajaja
Claudio Román
también pensé que me había saltado una clase xd
Luis Abdel Rangel Castro
La sintaxis de propagación (...) (Spread) permite que un iterable, como una expresión de matriz o una cadena, se expanda en lugares donde se esperan cero o más argumentos (para llamadas a funciones) o elementos (para literales de matriz), o que se expanda una expresión de objeto en lugares donde se esperan cero o más pares clave-valor (para objetos literales).
Obed Paz
El spread operator es de esos features que mas me gustas de JS.
Esteban Augusto Colmenares Blanco
También si quieren un array "merged" sin valores repetidos, pueden utilizar new Set más los spread operators. Adjunto ej:
<const arrayA = ["Java","JavaScript"]; const arrayB = ["C#", "PHP" , "Java"]; const mergedArrays = [...new Set([...arrayA, ...arrayB])] //(4) ['Java', 'JavaScript', 'C#', 'PHP'] console.log(mergedArrays)>
Leobardo Licona Soto
Fredy Daniel Flores Lemus
Pense que las referencias de memoria solo ocurria con objetos literales, pero veo que tambien pasa con arrays, sucede con algun otro objeto de JS?
Luis Manuel Morales López
Los primitivos se pasan por valor y los objetos por referencias:
Fredy Daniel Flores Lemus
Muchas gracias bro, saludos desde Guatemala
Miguel Angel Reyes Moreno
Mucho cuidado, el nombre correcto es 'spread operator', no 'split operation' para esto => ...
Orangel Gonzalez
... split operation, es muy útil 👍🏻
José Luis Encastin Flores
Su nombre correcto es "spread operator", aunque comprendo la confusión por la pronuciación en el video. Te comparto la documentación por si quieres saber más del tema: https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Spread_syntax
Orangel Gonzalez
Gracias amigo. Que bueno que me corregiste eso, ojala se pudiera editar para colocarle Spread @LuisEncastin
John Jairo Rodriguez Rivas
Me parece importante destacar que concat no solo recibe arrays, tambien puede recibir los elementos a concatenar en el orden que se quiere, o un solo elemento, lo destaco porque un compañero uso concat para añadir un solo elemento no array y no estaba entendiendo.
[1,2,3].concat('hola') // returned value [1, 2, 3, 'hola' ]
Janet Guadalupe Torres Ménera
Esta es mi solución usando ciclo for:
const array1 = ["🌧️", "🤷🏻♀️", "😎", "💚"]; const array2 = ["🐾", "🍋", "💘", "🌷"];
let newArray = [...array1];
for(let i = 0; i < array2.length; i++){ newArray.push(array2[i]); } console.log("FOR concatenar", newArray);
Pero estoy confundida del porqué sin el (... array) y con la asignación directa del array al arraynuevo se duplican los elementos del segundo array, entiendo lo de la referencia pero a la vez no capto porqué se lleva los elementos del 2do. 2 veces. Aquí me hubiera sido muy útil la prueba de escritorio para entenderlo mejor.
Janet Guadalupe Torres Ménera
Bueno he realizado mis pruebas y ya quedó claro.
Daniel Esteban Santos Mendez
Con spread operator sí se podrían agregar strings y otros valores:
const numbers1 = [1, 2, 3, 4] const numbers2 = [5, 6, 7, 8] const fusion = numbers1.concat(numbers2) const fusion2 = [ ...fusion, 42, 23, 1000, 2330, 'string', { greet: 'hola' }, ] console.log(fusion2[fusion2.length - 1].greet) console.log(fusion2) console.log(fusion)
También podríamos crear un array de strings u otra elemento y fusionar con spread.
Gustavo Adolfo Perez Ramos
Concat: Fusionar 2 arrays en uno, se genera un nuevo array sin modificar los array que se fusionan
Leobardo Licona Soto
Concat con Spread Operator
const elements = [1, 2, 3, 4]; const otherElements = [5, 6, 7, 8]; const spreadOperatorMetod = [...elements, ...otherElements]; console.log('Con spread operator: ', spreadOperatorMetod );
Natalia Gallego Heras
Creo que necesitaría un vídeo exclusivamente para el spread operator (...), pero .concat( ) 🫡 perfecto
Pablo Guallichico
También podemos usar el split operation para separar un String en caracteres de una manera sencilla:
const caracters = [..."Hello"]; console.log(caracters); //Output: ['H', 'e', 'l', 'l', 'o']
Ulises Serrano Pérez
Una forma mas moderna de hacer una copia sin referencias de memoria puedes ocupar la función structuredClone(), puedes revisar la documentación oficial en este link
Daniel Reyes
Mi solución a la primera parte fue la siguiente, usando el ciclo for:
const elements = [1,1,2,2]; const otherElements = [3,3,4,4]; const elements3 = []; for(let i=0; i<elements.length; i++){ const a = elements[i]; elements3.push(a); if(i === elements.length-1){ for(let ii = 0; ii<otherElements.length;ii++){ const b = otherElements[ii]; elements3.push(b); } } } console.log(elements3)
Escribí algo mas de código pero me dio el mismo resultado.
Ariel Ezequiel Biazzo Genua
Buena practica!
Es bueno que sepas que el problema de esa iteracion es que es un bucle dentr de otro bucle. Es O^2 en la notacion algoritmica de BIG O NOTATION. Ese algo no es tan bueno para el largo plazo!
Eduardo Peña Ramos
El hecho de que concat separe los caracteres si le enviamos un string con spread operator, en realidad tiene sentido: porque un string técnicamente es un array de caracteres.
Solo hay que estar atentos de que al usar spread operator mandemos un array.
@lgfh Lo que dice Mozilla del método Slice:
El método slice() devuelve una copia de una parte del array dentro de un nuevo array empezando por inicio hasta fin (fin no incluido). El array original no se modificará.
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']; console.log(animals.slice(2)); // expected output: Array ["camel", "duck", "elephant"] console.log(animals.slice(2, 4)); // expected output: Array ["camel", "duck"] console.log(animals.slice(1, 5)); // expected output: Array ["bison", "camel", "duck", "elephant"] console.log(animals.slice(-2)); // expected output: Array ["duck", "elephant"] console.log(animals.slice(2, -1)); // expected output: Array ["camel", "duck"]
Método concat: fusiona arrays. Es inmutable (no modifica el array original).
const elements = [1, 2, 3, 4]; const otherElements = [5, 6, 7, 8]; const concatMetod = elements.concat(otherElements); console.log('Concat:', concatMetod);
Concat con spread operator :
const elements = [1, 2, 3, 4]; const otherElements = [5, 6, 7, 8]; const spreadOperatorMetod = [...elements, ...otherElements]; console.log('Con spread operator: ', spreadOperatorMetod );
Fusionar arrays método push:
const elements = [1, 2, 3, 4]; const otherElements = [5, 6, 7, 8]; elements.push(...otherElements); // con spread operator console.log('Push con spread operator:', elements); //elements.push(otherElements); // sin spread operator //console.log('Push sin spread operator:', elements);
