Búsqueda de sitios web

javascript - ¿Cómo agregar algo a un arreglo?

¿Cómo agrego un objeto (como una cadena o un número) a un arreglo en JavaScript?

Respuesta #1

Usa el método Array.prototype.push para añadir valores al final de un arreglo:

// initialize array
var arr = [
  "Hi",
  "Hello",
  "Bonjour"
];

// append new value to the array
arr.push("Hola");

console.log(arr);

Puedes usar la función push() para agregar más de un valor a un arreglo en una sola llamada:

// initialize array
var arr = ["Hi", "Hello", "Bonjour", "Hola"];

// append multiple values to the array
arr.push("Salut", "Hey");

// display all values
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

Tenga en cuenta que el método push() devuelve la longitud actualizada del arreglo.

Actualizar

Si quieres añadir los elementos de un arreglo a otro arreglo, puedes usar firstArray.concat(secondArray):

var arr = [
  "apple",
  "banana",
  "cherry"
];

// Do not forget to assign the result as, unlike push, concat does not change the existing array
arr = arr.concat([
  "dragonfruit",
  "elderberry",
  "fig"
]);

console.log(arr);

Actualizar

Solo una adición a esta respuesta: si quieres anteponer cualquier valor al inicio de un arreglo (es decir, al primer índice), entonces puedes usar Array.prototype.unshift para este propósito.

var arr = [1, 2, 3];
arr.unshift(0);
console.log(arr);

También admite agregar múltiples valores a la vez, al igual que push.

Actualizar

Otra forma con la sintaxis de ES6 es devolver un nuevo array con la sintaxis spread. Esto deja el array original sin cambios, pero devuelve un nuevo array con nuevos elementos agregados al final o al principio, cumpliendo con el espíritu de la programación funcional.

const arr1 = [
  "Hi",
  "Hello",
  "Bonjour",
];
const arr2 = [
  "Ciao",
  "Hej",
  "Merhaba",
];

const newArr1 = [
  ...arr1,
  "Salut",
];
const newArr2 = [
  "Salut",
  ...arr2,
];
const newArr3 = [
  ...arr1,
  ...arr2,
];

console.log(newArr1, newArr2, newArr3);

Respuesta #2

Si solo estás agregando una sola variable, entonces push() funciona perfectamente. Si necesitas agregar otro arreglo, usa concat():

var ar1 = [1, 2, 3];
var ar2 = [4, 5, 6];

var ar3 = ar1.concat(ar2);

alert(ar1);
alert(ar2);
alert(ar3);

La concatenación no afecta a ar1 y ar2 a menos que se reasignen, por ejemplo:

var ar1 = [1, 2, 3];
var ar2 = [4, 5, 6];

ar1 = ar1.concat(ar2);
alert(ar1);

Hay mucha información excelente en Referencia de JavaScript.

Respuesta #3

Algunos benchmarks rápidos (cada prueba=500k elementos añadidos y los resultados son promedios de múltiples ejecuciones) mostraron lo siguiente:

Firefox 3.6 (Mac):

  • Arreglos pequeños: arr[arr.length]=b es más rápido (300ms vs. 800ms)
  • Grandes arrays: arr.push(b) es más rápido (500ms vs. 900ms)

Safari 5.0 (Mac):

  • Arreglos pequeños: arr[arr.length]=b es más rápido (90ms vs. 115ms)
  • Arreglos grandes: arr[arr.length]=b es más rápido (160ms vs. 185ms)

Google Chrome 6.0 (Mac):

  • Arreglos pequeños: Sin diferencia significativa (¡y Chrome es RÁPIDO! ¡Solo ~38 ms!!)
  • Arreglos grandes: No hay diferencia significativa (160ms)

Me gusta más la sintaxis arr.push(), pero creo que me iría mejor con la versión arr[arr.length], al menos en velocidad pura. Sin embargo, me encantaría ver los resultados de una ejecución en IE.

Mis bucles de evaluación comparativa:

function arrpush_small() {
    var arr1 = [];
    for (a = 0; a < 100; a++)
    {
        arr1 = [];
        for (i = 0; i < 5000; i++)
        {
            arr1.push('elem' + i);
        }
    }
}

function arrlen_small() {
    var arr2 = [];
    for (b = 0; b < 100; b++)
    {
        arr2 = [];
        for (j = 0; j < 5000; j++)
        {
            arr2[arr2.length] = 'elem' + j;
        }
    }
}


function arrpush_large() {
    var arr1 = [];
    for (i = 0; i < 500000; i++)
    {
        arr1.push('elem' + i);
    }
}

function arrlen_large() {
    var arr2 = [];
    for (j = 0; j < 500000; j++)
    {
        arr2[arr2.length] = 'elem' + j;
    }
}

Respuesta #4

Creo que vale la pena mencionar que push se puede llamar con múltiples argumentos, los cuales se agregarán al arreglo en orden. Por ejemplo:

var arr = ['first'];
arr.push('second', 'third');
console.log(arr);

Como resultado de esto, puedes usar push.apply para agregar un arreglo a otro arreglo de la siguiente manera:

var arr = ['first'];
arr.push('second', 'third');
arr.push.apply(arr, ['forth', 'fifth']);
console.log(arr);

Annotated ES5 tiene más información sobre exactamente lo que hacen push y apply.

Actualización 2016: con spread, ya no necesitas ese apply, como:

var arr = ['first'];
arr.push('second', 'third');

arr.push(...['fourth', 'fifth']);
console.log(arr) ;

Respuesta #5

Puedes usar las funciones push y apply para agregar dos arrays.

var array1 = [11, 32, 75];
var array2 = [99, 67, 34];

Array.prototype.push.apply(array1, array2);
console.log(array1);

Añadirá array2 a array1. Ahora array1 contiene [11, 32, 75, 99, 67, 34]. Este código es mucho más simple que escribir bucles for para copiar cada uno de los elementos del array.

Respuesta #6

Con el nuevo operador spread de ES6, unir dos arrays utilizando push se vuelve aún más fácil:

var arr = [1, 2, 3, 4, 5];
var arr2 = [6, 7, 8, 9, 10];
arr.push(...arr2);
console.log(arr);

Esto añade el contenido de arr2 al final de arr.

Ejemplo de REPL de Babel

Respuesta #7

Si arr es un arreglo, y val es el valor que deseas agregar, usa:

arr.push(val);

Por ejemplo

var arr = ['a', 'b', 'c'];
arr.push('d');
console.log(arr);

Respuesta #8

Usa concat:

a = [1, 2, 3];
b = [3, 4, 5];
a = a.concat(b);
console.log(a);

Respuesta #9

JavaScript con el estándar ECMAScript 5 (ES5), que ahora es compatible con la mayoría de los navegadores, puedes usar apply() para agregar array1 a array2.

var array1 = [3, 4, 5];
var array2 = [1, 2];

Array.prototype.push.apply(array2, array1);

console.log(array2); // [1, 2, 3, 4, 5]

JavaScript con el estándar ECMAScript 6 (ES6) que es compatible con Chrome, Firefox, Internet Explorer y Edge, puedes usar el operador spread:

"use strict";
let array1 = [3, 4, 5];
let array2 = [1, 2];

array2.push(...array1);

console.log(array2); // [1, 2, 3, 4, 5]

El operador spread reemplazará array2.push(...array1); con array2.push(3, 4, 5); cuando el navegador esté procesando la lógica.

Punto extra

Si deseas crear otra variable para almacenar todos los elementos de ambos arreglos, puedes hacer esto:

ES5 var combinedArray=array1.concat(array2);

ES6 const combinedArray=[...array1, ...array2]

El operador de propagación (...) sirve para expandir todos los elementos de una colección.

Respuesta #10

Si quieres concatenar dos arrays -

var a = ['a', 'b'];
var b = ['c', 'd'];

entonces podrías usar:

var c = a.concat(b);

Y si quieres agregar el registro g al arreglo (var a=[]) entonces podrías usar:

a.push('g');

Respuesta #11

Hay un par de formas de agregar un array en JavaScript:

1) El método push() agrega uno o más elementos al final de un arreglo y devuelve la nueva longitud del arreglo.

var a = [1, 2, 3];
a.push(4, 5);
console.log(a);

Salida :

[1, 2, 3, 4, 5]

2) El método unshift() añade uno o más elementos al principio de un array y devuelve la nueva longitud del array:

var a = [1, 2, 3];
a.unshift(4, 5);
console.log(a);

Salida :

[4, 5, 1, 2, 3]

3) El método concat() se utiliza para unir dos o más arreglos. Este método no cambia los arreglos existentes, sino que devuelve un nuevo arreglo.

var arr1 = ["a", "b", "c"];
var arr2 = ["d", "e", "f"];
var arr3 = arr1.concat(arr2);
console.log(arr3);

Salida :

[ "a", "b", "c", "d", "e", "f" ]

4) Puedes usar la propiedad .length del arreglo para agregar un elemento al final del arreglo:

var ar = ['one', 'two', 'three'];
ar[ar.length] = 'four';
console.log( ar );

Salida :

 ["one", "two", "three", "four"]

5) El método splice() cambia el contenido de un array eliminando elementos existentes y/o agregando nuevos elementos:

var myFish = ["angel", "clown", "mandarin", "surgeon"];
myFish.splice(4, 0, "nemo");
//array.splice(start, deleteCount, item1, item2, ...)
console.log(myFish);

Salida :

["angel", "clown", "mandarin", "surgeon","nemo"]

6) También puedes agregar un nuevo elemento a un arreglo simplemente especificando un nuevo índice y asignando un valor:

var ar = ['one', 'two', 'three'];
ar[3] = 'four'; // add new element to ar
console.log(ar);

Salida :

["one", "two","three","four"]

Respuesta #12

El método push() agrega nuevos elementos al final de un arreglo y devuelve la nueva longitud. Ejemplo:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");

// The result of fruits will be:
Banana, Orange, Apple, Mango, Kiwi

La respuesta exacta a tu pregunta ya ha sido respondida, pero veamos algunas otras formas de añadir elementos a un arreglo.

El método unshift() agrega nuevos elementos al principio de un arreglo y devuelve la nueva longitud. Ejemplo:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon", "Pineapple");

// The result of fruits will be:
Lemon, Pineapple, Banana, Orange, Apple, Mango

Y por último, el método concat() se utiliza para unir dos o más arreglos. Ejemplo:

var fruits = ["Banana", "Orange"];
var moreFruits = ["Apple", "Mango", "Lemon"];
var allFruits = fruits.concat(moreFruits);

// The values of the children array will be:
Banana, Orange, Apple, Mango, Lemon

Respuesta #13

Ahora, puedes aprovechar la sintaxis de ES6 y simplemente hacer

let array = [1, 2];
console.log([...array, 3]);

manteniendo inmutable el arreglo original.

Respuesta #14

Agregar un solo elemento

// Append to the end
arrName.push('newName1');

// Prepend to the start
arrName.unshift('newName1');

// Insert at index 1
arrName.splice(1, 0,'newName1');
// 1: index number, 0: number of element to remove, newName1: new element


// Replace index 3 (of exists), add new element otherwise.
arrName[3] = 'newName1';

Agregar varios elementos

// Insert from index number 1
arrName.splice(1, 0,'newElemenet1', 'newElemenet2', 'newElemenet3');
// 1: index number from where insert starts,
// 0: number of element to remove,
//newElemenet1,2,3: new elements

Agregar un arreglo

// Join two or more arrays
arrName.concat(newAry1, newAry2);
//newAry1,newAry2: Two different arrays which are to be combined (concatenated) to an existing array

Respuesta #15

Si estás usando ES6 puedes usar el operador spread para hacerlo.

var arr = [
    "apple",
    "banana",
    "cherry"
];

var arr2 = [
    "dragonfruit",
    "elderberry",
    "fig"
];

arr.push(...arr2);

Respuesta #16

Si conoces el índice más alto (como almacenado en una variable "i"), entonces puedes hacer

myArray[i + 1] = someValue;

Sin embargo, si no lo sabes, entonces puedes usar

myArray.push(someValue);

como sugirieron otras respuestas, o puedes usar

myArray[myArray.length] = someValue;

Tenga en cuenta que el arreglo comienza en cero, por lo que .length devuelve el índice más alto más uno.

También tenga en cuenta que no tiene que agregarlos en orden y que en realidad puede omitir valores, como en

myArray[myArray.length + 1000] = someValue;

En cuyo caso, los valores intermedios tendrán un valor de undefined.

Por lo tanto, es una buena práctica, al recorrer un JavaScript, verificar que un valor realmente exista en ese punto.

Esto se puede hacer con algo como lo siguiente:

if(myArray[i] === "undefined"){ continue; }

Si estás seguro de que no tienes ceros en el arreglo, entonces puedes simplemente hacer:

if(!myArray[i]){ continue; }

Por supuesto, asegúrate en este caso de no usar como condición myArray[i] (como algunas personas sugieren en Internet basándose en que en cuanto i sea mayor que el índice más alto, devolverá undefined, lo cual se evalúa como false).

Respuesta #17

Puedes hacerlo usando la sintaxis del operador spread de JavaScript:

// Initialize the array

var arr = [
    "Hi",
    "Hello",
    "Bangladesh"
];

// Append a new value to the array

arr = [...arr, "Feni"]; 

// Or you can add a variable value

var testValue = "Cool";

arr = [...arr, testValue ];

console.log(arr);

// Final output [ 'Hi', 'Hello', 'Bangladesh', 'Feni', 'Cool' ]

Respuesta #18

concat(), por supuesto, también se puede usar con matrices bidimensionales. No se requiere bucle.

var a = [
    [1, 2],
    [3, 4] ];

var b = [
    ["a", "b"],
    ["c", "d"] ];

b = b.concat(a);

alert(b[2][1]); // Result: 2

Respuesta #19

Solo quiero agregar un fragmento para la adición no destructiva de un elemento.

var newArr = oldArr.concat([newEl]);

Respuesta #20

Deja que la propiedad length del arreglo haga el trabajo:

myarray[myarray.length] = 'new element value added to the end of the array';

myarray.length devuelve el número de cadenas en el array. JavaScript empieza desde cero, por lo que la clave del siguiente elemento del array será la longitud actual del array.

Ejemplo :

var myarray = [0, 1, 2, 3],
    myarrayLength = myarray.length; // myarrayLength is set to 4

Artículos relacionados