Hoe voeg je iets toe aan een array?

Hoe voeg ik een object (zoals een string of getal) toe aan een array in JavaScript?

Oplossing

Gebruik de Array.prototype.push methode om waarden aan een array toe te voegen:

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

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

console.log(arr);

Je kunt de push() functie gebruiken om meer dan een waarde aan een array toe te voegen in een enkele oproep:

// 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]);
}

**Update.

Als je de items van een array aan een andere array wilt toevoegen, kun je gebruik maken van firstArray.concat(secondArray):

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

arr = arr.concat([
  "dragonfruit",
  "elderberry",
  "fig"
]);

console.log(arr);

Update

Nog even een aanvulling op dit antwoord als je een willekeurige waarde aan het begin van een array wilt appen, dus aan de eerste index, dan kun je hiervoor Array.prototype.unshift gebruiken.

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

Het ondersteunt ook het toevoegen van meerdere waarden in een keer, net als push.

Commentaren (12)

Als je slechts een enkele variabele wilt toevoegen, dan werkt push() prima. Als je een andere array moet appen, gebruik dan concat():

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

var ar3 = ar1.concat(ar2);

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

De concat heeft geen invloed op ar1 en ar2, tenzij ze opnieuw worden toegewezen, bijvoorbeeld:

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

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

Veel goede info hier.

Commentaren (6)

Wat snelle benchmarking (elke test = 500k toegevoegde elementen en de resultaten zijn gemiddelden van meerdere runs) toonde het volgende aan:

Firefox 3.6 (Mac):

  • Kleine arrays: arr[arr.length] = b is sneller (300ms vs. 800ms)
  • Grote arrays: arr.push(b) is sneller (500ms vs. 900ms)

Safari 5.0 (Mac):

  • Kleine arrays: arr[arr.length] = b is sneller (90ms vs. 115ms)
  • Grote arrays: arr[arr.length] = b is sneller (160ms vs. 185ms)

Google Chrome 6.0 (Mac):

  • Kleine arrays: Geen significant verschil (en Chrome is SNEL! Slechts ~38ms !!)
  • Grote arrays: Geen significant verschil (160ms)

Ik vind de arr.push() syntax beter, maar ik denk dat ik beter af zou zijn met de arr[arr.length] versie, in ieder geval in ruwe snelheid. Ik'zou echter graag de resultaten van een IE run zien.


Mijn benchmarking loops:

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;
    }
}
Commentaren (9)