Agregar elementos en un array en JavaScript

1. Utilice la propiedad .length del array para agregar elementos en un array en JavaScript
2. Utilice el método push() para agregar elementos en un array en JavaScript
3. Utilice el método unshift() para agregar elementos en un array
4. Utilice el método splice() para agregar elementos en un array
5. Utilice el método concat() para agregar elementos en un array
6. Utilice la sintaxis spread para agregar elementos en un array

En este artículo, aprenderemos cómo agregar elementos en un array en JavaScript.

Existen varios métodos para agregar un elemento a un array en JavaScript. Podemos agregar un solo elemento, varios elementos e incluso agregar un array completa a un array determinada. Podemos utilizar un método dependiendo de si queremos mutar o no, requisitos de velocidad y eficiencia, legibilidad del código.

Utilice la propiedad .length del array para agregar elementos en un array en JavaScript

Es el enfoque clásico en el que obtenemos el último índice vacío del array utilizando la longitud total del array e insertamos un elemento en ese índice. Este método es el más fácil de usar y proporciona una excelente eficiencia. Solo nos permite agregar un elemento a la vez. Es un método mutativo porque cambia el array original.

let arr = [0, 1, 2];
arr[arr.length] = 3;
console.log(arr);

Producción :

[0, 1, 2, 3]

En el código anterior, obtenemos el último índice del array usando arr.length como 3 y luego agregamos elementos en esos índices.

Utilice el método push() para agregar elementos en un array en JavaScript

El método push() se utiliza para agregar elementos al final del array. Podemos agregar un solo elemento, múltiples elementos o incluso un array. Es la opción más simple y rápida, incluso supera al método anterior usando Array.length en arrays grandes en algunos casos. Las acciones realizadas por push() se pueden revertir con el método .pop(). Cuando se pasan varios elementos juntos, el operador push() conserva su orden. Este método también cambia el array y, por lo tanto, es mutativo.

const arr = [1, 2, 3];
const arr2 = [8, 9, 10];
arr.push(4);        // single item
arr.push(5, 6, 7);  // multiple items
arr.push(...arr2);  // spread operator
console.log(arr);

Producción :

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

En el código anterior, hemos demostrado todos los 3 casos: agregar un solo elemento, varios elementos e incluso un array completa utilizando la sintaxis de propagación. Todos los elementos se agregan al final del array.

Utilice el método unshift() para agregar elementos en un array

El método unshift() nos ayuda a agregar un elemento al comienzo del array. Devuelve la nueva longitud del array. Se puede llamar o aplicar a objetos que se asemejen a un array en propiedades. Cuando se pasan varios elementos juntos, el operador unshift() conserva su orden. Este método también cambia el array y, por lo tanto, es mutativo.

const arr = [1, 2, 3];
const arr2 = [8, 9, 10];
arr.unshift(4);        // single item
arr.unshift(5, 6, 7);  // multiple items
arr.unshift(...arr2)   // spread operator
console.log(arr);

Producción :

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

En el código anterior, hemos demostrado los 3 casos: agregando un solo elemento, múltiples elementos e incluso un array completa usando la sintaxis extendida. Observe cómo esta operación es diferente de push(), todos los elementos se añaden al principio del array.

Utilice el método splice() para agregar elementos en un array

El método splice() puede modificar el contenido del array agregando / quitando elementos. Toma los siguientes 3 argumentos:

1. índice: un valor entero que especifica la posición para agregar / eliminar elementos. Incluso podemos especificar un índice desde la parte posterior del array mediante el uso de índices negativos.
2. howmany: es un parámetro opcional. Especifica cuántos elementos se eliminarán del array. Si se establece en 0, no se elimina ningún elemento.
3. item1, item2, ... ,itemx: Los elementos que se agregarán a el array.

Este método también cambia el array y, por lo tanto, es mutativo.

const arr = [1, 2, 3, 4, 5];
arr.splice(4, 3, 7, 8, 9);
console.log(arr);

Producción :

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

En el código anterior, seleccionamos el índice 4 y agregamos 3 elementos 7,8,9 en ese índice.

Utilice el método concat() para agregar elementos en un array

El método concat() toma matrices como entrada y las concatena juntas, es decir, toma un array y agrega el resto al final. Pero este operador no modifica el array original y devuelve un array completamente nueva que contiene el resultado combinado. Puede tomar dos o más matrices y concatenarlas juntas. Dado que este método no modifica el array dada, no es mutativo.

const arr = [1, 2, 3];
const arr2 = [8, 9, 10];
const arr3 = arr.concat(arr2);
console.log(arr3);

Producción :

[1, 2, 3, 8, 9, 10]

En el código anterior, tomamos dos matrices, arr y arr2, y llamamos a la función concat() para concatenarlas y formar la nueva matriz: arr3.

Utilice la sintaxis spread para agregar elementos en un array

Podemos usar la sintaxis de extensión para agregar arrays completos a un array dado. Es un método no mutativo ya que simplemente distribuimos los elementos del array en una nueva matriz. Es muy similar a la operación concat(). Nos ayuda a crear una copia o fusionar dos matrices separadas. Es importante utilizar la sintaxis de propagación con cuidado. Si usamos la sintaxis const arr = [arr1, arr2]; obtenemos un array anidada que contiene dos subarrays mientras que si usamos const arr=[...arr1 , ...arr2]; concatenamos los elementos de ambos arrays juntos.

const arr = [1, 2, 3];
const arr2 = [8, 9, 10];
const arr3 = [...arr, ...arr2];

Producción :

[1, 2, 3, 8, 9, 10]

En el código anterior, hemos utilizado el operador de extensión para agregar dos matrices, arr y arr2, en una nueva matriz: arr3.

Todos los métodos anteriores son compatibles con los principales navegadores, excepto la sintaxis de propagación. Internet Explorer no admite la sintaxis de propagación.