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