Las matrices de JavaScript son fácilmente uno de mis tipos de datos favoritos. Son dinámicos, fáciles de usar y ofrecen una gran cantidad de métodos integrados que podemos aprovechar.
Sin embargo, cuantas más opciones tenga, más confuso puede ser decidir cuál debe usar.
En este artículo, me gustaría discutir algunas formas comunes de agregar un elemento a una matriz de JavaScript.
El método de empuje
El primer y probablemente el método de matriz de JavaScript más común que encontrará es push () . El método push () se usa para agregar un elemento al final de una matriz.
Digamos que tiene una matriz de elementos, cada elemento es una cadena que representa una tarea que necesita realizar. Tendría sentido agregar elementos más nuevos al final de la matriz para que podamos terminar nuestras tareas anteriores primero.
Veamos el ejemplo en forma de código:
const arr = ['First item', 'Second item', 'Third item']; arr.push('Fourth item'); console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item']Muy bien, push nos ha proporcionado una sintaxis simple y agradable para agregar un elemento al final de nuestra matriz.
Digamos que queremos agregar dos o tres elementos a la vez a nuestra lista, ¿qué haríamos entonces? Resulta que push () puede aceptar que se agreguen varios elementos a la vez.
const arr = ['First item', 'Second item', 'Third item']; arr.push('Fourth item', 'Fifth item'); console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']Ahora que hemos agregado algunas tareas más a nuestra matriz, es posible que deseemos saber cuántos elementos hay actualmente en nuestra matriz para determinar si tenemos demasiado en nuestro plato.
Afortunadamente, push () tiene un valor de retorno con la longitud de la matriz después de que se hayan agregado nuestros elementos.
const arr = ['First item', 'Second item', 'Third item']; const arrLength = arr.push('Fourth item', 'Fifth item'); console.log(arrLength); // 5 console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']El método Unshift
No todas las tareas son iguales. Puede encontrarse con un escenario en el que está agregando tareas a su matriz y, de repente, se encuentra con una que es más urgente que las demás.
Es hora de presentar a nuestro amigo unshift () que nos permite agregar elementos al comienzo de nuestra matriz.
const arr = ['First item', 'Second item', 'Third item']; const arrLength = arr.unshift('Urgent item 1', 'Urgent item 2'); console.log(arrLength); // 5 console.log(arr); // ['Urgent item 1', 'Urgent item 2', 'First item', 'Second item', 'Third item']Puede notar en el ejemplo anterior que, al igual que el método push () , unshift () devuelve la nueva longitud de matriz para que la usemos. También nos da la posibilidad de agregar más de un elemento a la vez.
El método Concat
Abreviatura de concatenar (vincular), el método concat () se usa para unir dos (o más) matrices.
Si recuerda lo anterior, los métodos unshift () y push () devuelven la longitud de la nueva matriz. concat () , por otro lado,devolverá una matriz completamente nueva.
Esta es una distinción muy importante y hace que concat () sea extremadamente útil cuando se trata de matrices que no desea mutar (como matrices almacenadas en el estado React).
Así es como se vería un caso bastante básico y sencillo:
const arr1 = ['?', '?']; const arr2 = ['?', '?']; const arr3 = arr1.concat(arr2); console.log(arr3); // ["?", "?", "?", "?"] Supongamos que tiene varias matrices que le gustaría unir. No se preocupe, ¡ concat () está ahí para salvar el día!
const arr1 = ['?', '?']; const arr2 = ['?', '?']; const arr3 = ['?', '?']; const arr4 = arr1.concat(arr2,arr3); console.log(arr4); // ["?", "?", "?", "?", "?", "?"] Clonación con Concat
¿Recuerda cómo dije que concat () puede ser útil cuando no desea mutar su matriz existente? Echemos un vistazo a cómo podemos aprovechar este concepto para copiar el contenido de una matriz en una nueva matriz.
const arr1 = ["?", "?", "?", "?", "?", "?"]; const arr2 = [].concat(arr1); arr2.push("?"); console.log(arr1) //["?", "?", "?", "?", "?", "?"] console.log(arr2) //["?", "?", "?", "?", "?", "?", "?"]¡Increíble! Básicamente, podemos "clonar" una matriz usando concat () .
Pero hay un pequeño problema en este proceso de clonación. La nueva matriz es una "copia superficial" de la matriz copiada. Esto significa que cualquier objeto se copia por referencia y no el objeto real.
Echemos un vistazo a un ejemplo para explicar esta idea con más claridad.
const arr1 = [{food:"?"}, {food:"?"}, {food:"?"}] const arr2 = [].concat(arr1); //change only arr2 arr2[1].food = "?"; arr2.push({food:"?"}) console.log(arr1) //[ { food: '?' }, { food: '?' }, { food: '?' } ] console.log(arr2) //[ { food: '?' }, { food: '?' }, { food: '?' }, { food: '?' } ]Aunque no hicimos ningún cambio directamente en nuestra matriz original, ¡la matriz finalmente se vio afectada por los cambios que hicimos en nuestra matriz clonada!
Hay varias formas diferentes de hacer correctamente un "clon profundo" de una matriz, pero te lo dejo como tarea.
TL; DR
Cuando desee agregar un elemento al final de su matriz, use push (). Si necesita agregar un elemento al comienzo de su matriz, intente unshift (). Y tu puedesagregue matrices juntas usando concat ().
Ciertamente, hay muchas otras opciones para agregar elementos a una matriz, ¡y los invito a salir y encontrar algunos métodos de matriz más geniales!
No dude en comunicarse conmigo en Twitter y hacerme saber su método de matriz favorito para agregar elementos a una matriz.