JavaScript Arrays

JavaScript arrays worden gebruikt om meerdere waarden in een enkele variabele op te slaan.

Voorbeeld

var cars = ["Saab", "Volvo", "BMW"];

Probeer het zelf

Wat is een array?

Een array is een speciale variabele die meer dan één waarde kan opslaan.

Als je een lijst van projecten hebt (bijvoorbeeld, een lijst van automerken), moet je de automerken in een enkele variabele opslaan zoals dit:

var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";

Maar wat als je alle auto's wilt doorlopen en een specifieke waarde wilt vinden? Wat als het niet om drie automerkken gaat, maar om driehonderd?

De oplossing is een array!

Een array kan veel waarden opslaan onder een enkele naam en deze waarden kunnen worden benaderd door de index te gebruiken.

Maak een array

Het gebruik van array tekst is de eenvoudigste manier om een JavaScript array te maken.

Syntax:

var array-name = [item1, item2, ...];

Voorbeeld

var cars = ["Saab", "Volvo", "BMW"];

Probeer het zelf

Spaties en regeleinden zijn niet belangrijk. De verklaring kan over meerdere regels lopen:

Voorbeeld

var cars = [
    "Saab",
    "Volvo",
    "BMW"
];

Probeer het zelf

Schrijf geen komma achter de laatste element (bijvoorbeeld "BMW",).

Er kunnen problemen met browser compatibiliteit optreden.

Gebruik de JavaScript keyword new

Hier is een voorbeeld dat ook een array maakt en waarden toekent:

Voorbeeld

var cars = new Array("Saab", "Volvo", "BMW");

Probeer het zelf

Deze twee voorbeelden hebben hetzelfde effect. Gebruik geen new Array().

Voor eenvoud, leesbaarheid en uitvoeringsnelheid, gebruik de eerste methode (array tekst methode).

om array elementen te benaderen

Wij gebruikenIndex nummer (onderstreepte nummer)om een array element te verwijzen.

Deze statement raadpleegt de waarde van het eerste element in cars:

var name = cars[0];

Deze statement wijzigt het eerste element in cars:

cars[0] = "Opel";

Voorbeeld

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];

Probeer het zelf

[0] is het eerste element in de array. [1] is het tweede. Array indices beginnen bij 0.

Verander array element

Deze statement wijzigt de waarde van het eerste element in cars:

cars[0] = "Opel";

Voorbeeld

var cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars[0];

Probeer het zelf

Volledige array bereiken

Met JavaScript, kun je de hele array bereiken door de naam van de array te gebruiken:

Voorbeeld

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;

Probeer het zelf

Array is object

Arrays zijn een speciale soort object. In JavaScript worden arrays gebruikt typeof Operatoren retourneren "object".

Maar, JavaScript arrays zijn het beste beschreven als arrays.

Array gebruikennummersom toegang te krijgen tot zijn "elementen". In dit voorbeeld,person[0] Retourneer Bill:

Array:

var person = ["Bill", "Gates", 62];

Probeer het zelf

Objecten gebruikenNaamom toegang te krijgen tot zijn "leden". In dit voorbeeld,person.firstName Retourneer Bill:

Object:

var person = {firstName:"Bill", lastName:"Gates", age:19};

Probeer het zelf

Array elementen kunnen objecten zijn

JavaScript variabelen kunnen objecten zijn. Arrays zijn een speciale soort object.

Daarom kun je verschillende soorten variabelen in dezelfde array opslaan.

Je kunt objecten in een array opslaan. Je kunt functies in een array opslaan. Je kunt zelfs arrays in een array opslaan:

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

Array eigenschappen en methoden

De echte kracht van JavaScript arrays ligt in de eigenschappen en methoden van de array:

Voorbeeld

var x = cars.length;   // De length eigenschap retourneert het aantal elementen
var y = cars.sort();   // De sort() methode sorteert de array

We zullen in het volgende hoofdstuk leren over arraymethoden.

length eigenschap

length De eigenschap retourneert de lengte van de array (het aantal elementen).

Voorbeeld

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;                       // De lengte van fruits is 4

Probeer het zelf

length De eigenschap is altijd groter dan de hoogste index van de array (index).

Toegang tot het eerste element van de array

Voorbeeld

fruits = ["Banana", "Orange", "Apple", "Mango"];
var first = fruits[0];

Probeer het zelf

Toegang tot het laatste element van de array

Voorbeeld

fruits = ["Banana", "Orange", "Apple", "Mango"];
var last = fruits[fruits.length - 1];

Probeer het zelf

Doorloopt de elementen van de array

Het veiligste manier om een array te doorlopen is om te gebruiken "for"Cyclus:",

Voorbeeld

var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
     text += "<li>" + fruits[i] + "</li>";
}

Probeer het zelf

U kunt ook Array.foreach() Functie:

Voorbeeld

var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];
text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function myFunction(value) {
  text += "<li>" + value + "</li>";
}

Probeer het zelf

het toevoegen van arrayelementen

De beste manier om nieuwe elementen aan de array toe te voegen is push() Methoden:

Voorbeeld

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

Probeer het zelf

U kunt ook length Eigenschappen voegen nieuwe elementen toe aan de array:

Voorbeeld

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

Probeer het zelf

Waarschuwing!

Het toevoegen van het hoogste indexelement kan ongedefinieerde "gaten" in de array creëren:

Voorbeeld

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

Probeer het zelf

Associative arrays

Veel programmelelementen ondersteunen arrays met genaamd geïndiceerde indexen.

Arrays met genaamd geïndiceerde indexen worden genoemd associative arrays (of hashes).

JavaScript Wordt niet ondersteundgenaamd geïndiceerde array worden gebruikt.

In JavaScript kunnen arrays alleen metnumerieke indices.

Voorbeeld

var person = [];
person[0] = "Bill";
person[1] = "Gates";
person[2] = 62;
var x = person.length;          // person.length retourneert 3
var y = person[0];              // person[0] retourneert "Bill"

Probeer het zelf

Waarschuwing!

Als u genaamd geïndiceerde indexen gebruikt, definieert JavaScript de array als een standaard object.

Daarna zullen alle methoden en eigenschappen van de array onjuiste resultaten opleveren.

Voorbeeld:

var person = [];
person["firstName"] = "Bill";
person["lastName"] = "Gates";
person["age"] = 62;
var x = person.length;         // person.length retourneert 0
var y = person[0];              // person[0] retourneert undefined

Probeer het zelf

Het verschil tussen arrays en objecten

in JavaScript,ArrayGebruiknumerieke indices.

in JavaScript,objectGebruikNaamgegeven indices.

Arrays zijn een speciaal type object dat numerieke indices heeft.

Wanneer gebruik je een array en wanneer gebruik je een object?

  • JavaScript ondersteunt geen geassocieerde arrays
  • Als je de naam van de elementen wilttekst (tekst)dan moet jeobject.
  • Als je de naam van de elementen wiltnummersdan moet jeArray.

Voorkom new Array()

Het is niet nodig om de ingebouwde array constructor van JavaScript te gebruiken new Array().

Gebruik [] In plaats daarvan!

Hieronder zijn twee verschillende statements die een nieuwe lege array genaamd points maken:

var points = new Array();         // Slecht
var points = [];                  // Goed

Hieronder zijn twee verschillende statements die een nieuwe array van zes cijfers maken:

var points = new Array(40, 100, 1, 5, 25, 10); // Slecht
var points = [40, 100, 1, 5, 25, 10];          // Goed

Probeer het zelf

new Sleutelwoorden kunnen de code complexer maken. Ze kunnen ook onverwachte resultaten veroorzaken:

var points = new Array(40, 100);  // Maakt een array van twee elementen (40 en 100)

Wat gebeurt er als je een van de elementen verwijdert?

var points = new Array(40);       // Maakt een array van 40 ongedefinieerde elementen!!!

Probeer het zelf

Hoe een array herkennen

Een veelvoorkomend probleem is: hoe weet ik of een variabele een array is?

Het probleem ligt in de JavaScript-bewerker typeof Retourneert "object：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
typeof fruits;             // Retourneert object

Probeer het zelf

De typeof-bewerker retourneert "object", omdat JavaScript-arrays behoren tot objecten.

Oplossing 1:

Om dit probleem op te lossen, definieerde ECMAScript 5 een nieuwe methode Array.isArray():

Array.isArray(fruits);     // Retourneer true

Probeer het zelf

Het probleem met deze oplossing is ECMAScript 5 Ondersteunt geen oude browsers.

Oplossing 2:

Maak je eigen isArray() De functie lost dit probleem op:

function isArray(x) {
    return x.constructor.toString().indexOf("Array") > -1;
}

Probeer het zelf

Als het parameter een array is, retourneert de bovenstaande functie altijd true.

Of een meer nauwkeurige uitleg is: als het objectprototype de woorden "Array" bevat, dan wordt true geretourneerd.

Oplossing 3:

Als het object is gemaakt door de gegeven constructor, dan instanceof Operator retourneert true:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits instanceof Array     // Retourneer true

Probeer het zelf