En este artículo te mostraré seis formas de agregar elementos a un Array en JavaScript

Introducción

Un Array en JavaScript es una matriz de variables de un objeto, una matriz funciona como una lista, pila o cola.

A continuación te muestro las diferentes funciones de JavaScript que puedes usar para agregar elementos a un Array:

  • push: agrega un elemento al final del array

  • unshift: agrega un elemento al comienzo del array

  • operador de propagación: agregar elementos a un array utilizando el nuevo operador de propagación (…) de ES6

  • concat: este método se puede usar para agregar un array a otro array

  • Usando la propiedad de longitud del array para agregar un elemento

  • splice: este método agrega un elemento en cualquier lugar de un array

El método push()

El método push() inserta los elementos al final de array

Agregar un solo elemento:

let matriz= ['1', '2', '3'];
matriz.push('4');
console.log(matriz); // resultado: ['1', '2', '3', '4']

Agregar múltiples elementos:

let matriz= ['1', '2', '3'];
matriz.push('4', '5', '6');
console.log(matriz); // resultado: ['1', '2', '3', '4', '5', '6']

También puedes añadir un array a otro array existente usando el método push.apply()

let a = ['1', '2', '3'];
let b = ['4', '5', '6'];
a.push.apply(a, b);

console.log(a); // resultado: ['1', '2', '3', '4', '5', '6']

El método unshift()

El método unshift agrega los elementos al inicio del array

Agregar un solo elemento

let matriz = ['1', '2', '3'];
matriz.unshift('0');
console.log(matriz); // resultado: ['0', '1', '2', '3']

Agregar múltiples elementos

let matriz = ['1', '2', '3'];
matriz.unshift('-1', '0');
console.log(matriz); // resultado: ['-1', '0', '1', '2', '3']

El método concat()

El método concat no insertar elementos a un array existen, pero crea un nuevo array uniendo dos array´s existentes.

let matrizOriginal = ['1', '2', '3'];
let matrizAgregar = ['4', '5', '6'];

let nuevaMatriz = matrizOriginal.concat(matrizAgregar);

console.log(nuevaMatriz); // resultado: ['1', '2', '3', '4', '5', '6']
console.log(matrizOriginal); // resultado: ['1', '2', '3']

También puedes tomar un array vacío y unir múltiples array´s

let a = ['1', '2', '3'];
let b = ['4', '5', '6'];

let c = [].concat(a, b);

console.log(c); // resultado:['1', '2', '3', '4', '5', '6']

El operador de propagación (…)

El operador de propagación es similar al método de concat() que crea un nuevo Array en vez de agregar elementos a uno existente.

let a = ['1', '2', '3'];

let nuevaMatriz = ['0', ...a, '4'];

console.log(nuevaMatriz); // resultado: ['0', '2', '3', '4']

Como puedes ver, es posible agregar un array completo en medio de la definición de uno nuevo.

También puedes usar el operador de propagación junto con el método push()

let a = ['1', '2', '3'];
let b = ['4', '5']

a.push(...b);

console.log(a); // resultado: ['0', '1', '2', '3', '4', '5']

Usar la longitud del Array para insertar un nuevo elemento

Puedes agregar un nuevo elemento a un array usando la longitud del mismo como indice

let a = ['1', '2', '3'];
a[a.length] = '4';

console.log(a); // resultado: ['1', '2', '3', '4']

El nuevo elemento se agrega al final del array

El método splice()

El método splice agrega elementos en cualquier parte del Array que le indiques. Se usa de la siguiente manera:

array.splice(indice, total de elementos a eliminar, elementos a agregar)

El primer parámetro define la posición del array donde se agregaran los nuevos elementos

El segundo parámetro define el total de elementos a eliminar, si no deseas eliminar elementos puedes usar como valor cero

los parámetros siguientes son nuevos a elementos que quieres agregar


let a = ['1', '2', '3'];

a.splice(2, 0, '4', '5');

console.log(a); // resultado ['0', '2', '4', '5', '3']

conclusión

En mi opinión son métodos muy sencillos de aprender y como desarrollador deberías de conocer y aplicar a conciencia.

Por último te agradezco por leer este artículo y espero que puedas apoyarme

paypal

buymeacoffee

github

twitter