JavaScript Array Methoden

De kracht van JavaScript-arrays zit in de arraymethoden.

Converteer een array naar een string

JavaScript-methode toString() Converteer een array naar een string van arraywaarden (gescheiden door komma's).

Voorbeeld

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

Resultaat

Banana,Orange,Apple,Mango

Probeer het zelf

join() De methode combineert alle arrayelementen tot een string.

Het gedrag is vergelijkbaar met toString(), maar je kunt ook een separator opgeven:

Voorbeeld

var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");

Resultaat

Banana * Orange * Apple * Mango

Probeer het zelf

Popping en Pushing

Bij het werken met arrays is het eenvoudig om elementen te verwijderen en nieuwe elementen toe te voegen.

Popping en Pushing betekenen:

Van een arrayPoppenItem, of naar een arrayInvoegenItem.

Popping

pop() De methode verwijdert het laatste element van het array:

Voorbeeld

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();              // Het laatste element van fruits verwijderen ("Mango")

Probeer het zelf

pop() De methode retourneert de waarde die is verwijderd:

Voorbeeld

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.pop();      // De waarde van x is "Mango"

Probeer het zelf

Pushing

push() De methode voegt een nieuw element toe aan het einde van het array:

Voorbeeld

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");       // Een nieuw element toevoegen aan fruits

Probeer het zelf

push() De methode retourneert de nieuwe lengte van het array:

Voorbeeld

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.push("Kiwi");   // De waarde van x is 5

Probeer het zelf

Verplaats elementen

Verplaatsen is gelijk aan pop, maar het verwijdert het eerste element in plaats van het laatste.

shift() De methode verwijdert het eerste element en verplaatst alle andere elementen naar lagere indices.

Voorbeeld

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();            // Van fruits verwijderen de eerste element "Banana"

Probeer het zelf

shift() De methode retourneert de verplaatste string:

Voorbeeld

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();             // Retourneer "Banana"

Probeer het zelf

unshift() De methode (aan het begin) voegt nieuwe elementen toe aan de array en "verplaatst" de oude elementen omhoog:

Voorbeeld

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    // Voeg het nieuwe element "Lemon" toe aan fruits

Probeer het zelf

unshift() De methode retourneert de nieuwe lengte van de array.

Voorbeeld

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

Probeer het zelf

Elementen wijzigen

Door gebruik te maken van hunindexnummerom array-elementen te bereiken:

ArrayIndex (index)met 0 beginnen. [0] is het eerste array-element, [1] is het tweede, [2] is het derde ...

Voorbeeld

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";        // Maak het eerste element van fruits "Kiwi"

Probeer het zelf

length De eigenschap biedt een eenvoudige manier om nieuwe elementen aan de array toe te voegen:

Voorbeeld

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";          // Voeg "Kiwi" toe aan fruits

Probeer het zelf

Verwijder elementen

Aangezien JavaScript-arrays objecten zijn, kunnen de elementen ervan worden verwijderd met behulp van JavaScript delete operator omVerwijder:

Voorbeeld

var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];           // Maak het eerste element van fruits ongedefinieerd

Probeer het zelf

Gebruik delete Laat ondefinieerde gaten in de array achter. Gebruik pop() Of shift() In plaats van dat.

Samenstellen van arrays

splice() De methode kan worden gebruikt om nieuwe items toe te voegen aan de array:

Voorbeeld

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");

Probeer het zelf

De eerste parameter (2) definieert de positie waar het nieuwe element moet worden toegevoegd (samenstellen).

De tweede parameter (0) definieert hoeveel elementen moeten worden verwijderd.

De overige parameters ("Lemon", "Kiwi") definiëren de nieuwe elementen die moeten worden toegevoegd.

splice() De methode retourneert een array met de verwijderde items:

Voorbeeld

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

Probeer het zelf

Gebruik splice() om elementen te verwijderen

Door slimme parameters in te stellen, kunt u splice() Verwijder elementen zonder "gaten" in de array:

Voorbeeld

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);        // Verwijder het eerste element van fruits

Probeer het zelf

De eerste parameter (0) definieert waar de nieuwe elementen moeten wordentoevoegenlocatie (ingang).

de tweede parameter (1) definieert dehet verwijderen van meerdereelementen.

de overige parameters worden weggelaten. Er worden geen nieuwe elementen toegevoegd.

het combineren (verbinden) van arrays

concat() de methode maakt een nieuwe array door bestaande arrays te combineren (te verbinden):

voorbeeld (het samenvoegen van twee arrays)

var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);   // Voeg myGirls en myBoys samen

Probeer het zelf

concat() de methode wijzigt de bestaande array niet. Het retourneert altijd een nieuwe array.

concat() de methode kan een oneindig aantal arrayparameters gebruiken:

voorbeeld (het samenvoegen van drie arrays)

var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);   // Voeg arr1, arr2 en arr3 samen

Probeer het zelf

concat() de methode kan ook waarden als parameters gebruiken:

voorbeeld (het samenvoegen van een array met waarden)

var arr1 = ["Cecilie", "Lone"];
var myChildren = arr1.concat(["Emil", "Tobias", "Linus"]);

Probeer het zelf

het afsnijden van de array

slice() de methode maakt een nieuwe array met een deel van de array.

in dit voorbeeld begint het afsnijden van een deel van de array vanaf array element 1 ("Orange"):

Voorbeeld

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1);

Probeer het zelf

slice() de methode maakt een nieuwe array. Het verwijdert geen elementen van de bronarray.

in dit voorbeeld begint het afsnijden van een deel van de array vanaf array element 3 ("Apple"):

Voorbeeld

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(3);

Probeer het zelf

slice() het kan twee parameters aanvaarden, bijvoorbeeld (1, 3).

deze methode neemt elementen van het begin parameter tot aan het einde parameter (exclusief).

Voorbeeld

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);

Probeer het zelf

als het einde parameter wordt weggelaten, zoals in het eerste voorbeeld, dan slice() het zal het resterende deel van de array afsnijden.

Voorbeeld

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(2);

Probeer het zelf

auto toString()

Als je de oorspronkelijke waarden nodig hebt, zal JavaScript automatisch de array omzetten naar een string. De volgende twee voorbeelden zullen hetzelfde resultaat opleveren:

Voorbeeld

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

Probeer het zelf

Voorbeeld

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;

Probeer het zelf

Alle JavaScript objecten hebben toString() Methoden.

Array Sorteren

We zullen in het volgende hoofdstuk leren over array sorteren~.

Zoek naar de hoogste en laagste waarden in een array

Er zijn geen ingebouwde functies in JavaScript Arrays om de hoogste en laagste waarden te vinden.

Je zult in het volgende hoofdstuk leren hoe je dit probleem oplost.

Volledige Array Referentiemanual

Voor een volledig referentiemanual, bezoek onze volledige JavaScript Array Referentiemanual.

Dit referentiemanual bevat beschrijvingen en voorbeelden van alle array-eigenschappen en methoden.