JavaScript: cómo insertar elementos en un índice específico de una matriz

En este artículo, insertaremos elementos en una matriz al principio, al final y en varias posiciones. ¡Usaremos los métodos unshift, push, concat y slice!

Introducción

Una matriz es una estructura de datos lineal y posiblemente una de las estructuras de datos más populares utilizadas en informática. La modificación de una matriz es una operación común. Aquí, discutiremos cómo agregar un elemento en cualquier posición de una matriz en JavaScript.

Un elemento se puede agregar a una matriz en tres lugares:

  • Inicio/Primer elemento
  • Fin/Último elemento
  • En cualquier otro lugar

Insert an element in an array

¡Comencemos agregando elementos al comienzo de una matriz!

Adición de elementos al inicio de una matriz

El método unshift() en los objetos de matriz agrega uno o más elementos al comienzo de una matriz. Cuando se ejecuta, también devuelve la nueva longitud de una matriz:

1
2
3
4
5
6
7
const startArray = [3, 4, 5];
const newLength = startArray.unshift(2);
console.log(newLength);
console.log(startArray);

startArray.unshift(-1, 0, 2);
console.log(startArray);

Lo que nos da el resultado esperado:

1
2
3
4
[ 2, 3, 4, 5 ]
[ -1, 0, 2, 2, 3, 4, 5 ]

Adición de elementos al final de una matriz

Usando el último índice de la matriz

Para agregar un elemento al final de una matriz, podemos usar el hecho de que la longitud de una matriz siempre es uno menos que el índice.

Digamos que la longitud de una matriz es 5, luego el último índice en el que el valor será 4. Entonces, podemos agregar directamente el elemento en el índice last+1. Echemos un vistazo:

1
2
3
4
5
6
7
const indexArray = [1, 2, 3];
console.log(indexArray.length);
console.log(indexArray[2]);
console.log(indexArray[3]);

indexArray[indexArray.length] = 4
console.log(indexArray);

Ejecutar esto en una consola JS muestra:

1
2
3
4
3
3
undefined
[ 1, 2, 3, 4 ]

La matriz tiene una longitud de 3 y el segundo elemento es 3. No hay un tercer elemento, por lo que nos recibe con undefined. Finalmente, en esa posición, insertamos el valor de 4.

El método push()

El método push() de una matriz agrega uno o más elementos al final de la misma. Al igual que unshift(), también devuelve la nueva longitud de la matriz:

1
2
3
4
const pushArray = [1, 2, 3]
const newLength = pushArray.push(4, 5, 6, 7);
console.log(newLength);
console.log(pushArray);

Ejecutar el código anterior mostrará esto:

1
2
7
[ 1, 2, 3, 4, 5, 6, 7 ]

El método concat()

La fusión o unión de dos o más matrices se logra mediante el método concat() de una matriz. Crea una nueva copia de la salida y no afecta las matrices originales. A diferencia de los métodos anteriores, devuelve una nueva matriz. Los valores que se concatenan siempre vienen al final de la matriz usando el método.

Podemos concatenar un arreglo con otro arreglo:

1
2
3
4
5
6
const example1Array1 = [1, 2, 3];
const valuesToAdd = [4, 5, 6];
const example1NewArray = example1Array1.concat(valuesToAdd);

console.log(example1NewArray);
console.log(example1Array1);

Que imprime esta salida:

1
2
[ 1, 2, 3, 4, 5, 6 ]
[ 1, 2, 3 ]

Podemos concatenar un arreglo con una secuencia de valores:

1
2
3
4
const array = [1,2,3];
const newArray = array.concat('12', true, null, 4,5,6,'hello');
console.log(array);
console.log(newArray);

Ejecutar el código anterior registrará esto en nuestras consolas:

1
2
[ 1, 2, 3 ]
[ 1, 2, 3, '12', true, null, 4, 5, 6, 'hello' ]

Podemos concatenar una matriz con varias matrices:

1
2
3
4
5
6
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const array3 = [7, 8, 9];
const oneToNine = array1.concat(array2, array3);

console.log(oneToNine);

Cuando se ejecuta, el código anterior imprime una lista de números del 1 al 9:

1
[ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

Adición de elementos en cualquier lugar de una matriz

Ahora discutiremos un método de golpe maestro que se puede usar para agregar un elemento en cualquier lugar de una matriz: inicio, final, medio y cualquier otro lugar intermedio.

El método splice() agrega, elimina y reemplaza elementos en una matriz. Se utiliza comúnmente para la gestión de matrices. Este método no crea una nueva matriz sino que actualiza la que la llamó.

Veamos splice() en acción. Vamos a tomar una serie de días de la semana y agregar un elemento "miércoles" entre "martes" y "jueves":

1
2
3
4
5
const weekdays = ['monday', 'tuesday', 'thursday', 'friday']
const deletedArray = weekdays.splice(2, 0, 'wednesday');

console.log(weekdays);
console.log(deletedArray);

El código anterior registra esto en la consola:

1
2
[ 'monday', 'tuesday', 'wednesday', 'thursday', 'friday' ]
[]

Analicemos el código anterior. Queríamos agregar 'miércoles' en la matriz días de la semana en la posición 2nd. No es necesario eliminar ningún elemento aquí. El código weekdays.splice(2, 0, 'wednesday') se lee como en la segunda posición, no elimine ningún elemento y agregue miércoles.

Aquí está la sintaxis general para usar splice():

1
let removedItems = array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

Dónde:

  • start - El índice en el que comenzar a modificar la matriz.
  • deleteCount - El número opcional de elementos en la matriz para eliminar de start. Si se omite, se eliminarán todos los elementos después de start.
  • item1, item2, ... - Los elementos opcionales para agregar a la matriz desde start. Si se omite, solo eliminará elementos de la matriz.

Veamos otro ejemplo de slice() donde agregamos y eliminamos la matriz al mismo tiempo. Agregaremos "miércoles" en la segunda posición, sin embargo, también eliminaremos los valores de fin de semana erróneos allí:

1
2
3
4
5
const weekdays = ['monday', 'tuesday', 'saturday', 'sunday', 'thursday', 'friday']
const deletedArray = array.splice(2, 2, 'wednesday');

console.log(weekdays);
console.log(deletedArray);

El código anterior imprimirá:

1
2
[ 'monday', 'tuesday', 'wednesday', 'thursday', 'friday' ]
[ 'saturday', 'sunday' ]

En el ejemplo anterior, array.splice(2, 2, 'wenesday') elimina dos elementos de la segunda posición (inicio) y agrega 'willnesday' allí. ¡Ese es el poder de slice()!

Conclusión

En este artículo, analizamos muchas formas en JavaScript en las que podemos agregar elementos a una matriz. Podemos agregarlos al principio con unshift(). Podemos agregarlos al final usando su índice, el método pop() y el método concat(). Obtenemos aún más control sobre dónde los colocamos con el método splice().