JavaScript -arrays
Een array is een speciale variabele die meer dan één waarde kan bevatten:
const cars = ["Saab", "Volvo", "BMW"];
Waarom een array gebruiken?
Als je een lijst met items hebt (bijvoorbeeld een lijst met autonamen), kan het opslaan van de auto's in enkele variabelen er als volgt uitzien:
let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";
Maar wat als u door de auto's wilt bladeren en een specifieke wilt vinden? En wat als je niet 3 auto's had, maar 300?
De oplossing is een array!
Een array kan veel waarden onder één naam bevatten en u kunt toegang krijgen tot de waarden door te verwijzen naar een indexnummer.
Een array maken
Het gebruik van een letterlijke array is de gemakkelijkste manier om een JavaScript-array te maken.
Syntaxis:
const array_name = [item1, item2, ...];
Het is een gangbare praktijk om arrays te declareren met het sleutelwoord const .
Lees meer over const met arrays in het hoofdstuk: JS Array Const .
Voorbeeld
const cars = ["Saab", "Volvo", "BMW"];
Spaties en regeleinden zijn niet belangrijk. Een aangifte kan meerdere regels omvatten:
Voorbeeld
const cars = [
"Saab",
"Volvo",
"BMW"
];
U kunt ook een array maken en vervolgens de elementen opgeven:
Voorbeeld
const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";
Het JavaScript-sleutelwoord nieuw gebruiken
In het volgende voorbeeld wordt ook een array gemaakt en worden er waarden aan toegewezen:
Voorbeeld
const cars = new Array("Saab", "Volvo", "BMW");
De twee bovenstaande voorbeelden doen precies hetzelfde.
Het is niet nodig om te gebruiken new Array().
Gebruik voor eenvoud, leesbaarheid en uitvoeringssnelheid de letterlijke array-methode.
Toegang tot array-elementen
U krijgt toegang tot een array-element door te verwijzen naar het indexnummer :
const cars = ["Saab", "Volvo", "BMW"];
let car = cars[0];
Opmerking: array-indexen beginnen met 0.
[0] is het eerste element. [1] is het tweede element.
Een array-element wijzigen
Deze instructie verandert de waarde van het eerste element in cars:
cars[0] = "Opel";
Voorbeeld
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
Toegang tot de volledige array
Met JavaScript is de volledige array toegankelijk door te verwijzen naar de arraynaam:
Voorbeeld
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
Arrays zijn objecten
Arrays zijn een speciaal soort objecten. De typeofoperator in JavaScript retourneert "object" voor arrays.
Maar JavaScript-arrays kunnen het best worden omschreven als arrays.
Arrays gebruiken nummers om toegang te krijgen tot de "elementen". In dit voorbeeld person[0]
retourneert Jan:
Reeks:
const person = ["John", "Doe", 46];
Objecten gebruiken namen om toegang te krijgen tot de "leden". In dit voorbeeld
person.firstName
retourneert Jan:
Object:
const person = {firstName:"John", lastName:"Doe", age:46};
Array-elementen kunnen objecten zijn
JavaScript-variabelen kunnen objecten zijn. Arrays zijn speciale soorten objecten.
Hierdoor kunt u variabelen van verschillende typen in dezelfde array hebben.
U kunt objecten in een array hebben. U kunt functies in een array hebben. U kunt arrays in een array hebben:
myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;
Matrix-eigenschappen en -methoden
De echte kracht van JavaScript-arrays zijn de ingebouwde array-eigenschappen en -methoden:
cars.length // Returns the number of elements
cars.sort() // Sorts the array
Matrixmethoden worden in de volgende hoofdstukken behandeld.
De lengte Eigenschap
De lengtheigenschap van een array retourneert de lengte van een array (het aantal array-elementen).
Voorbeeld
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.length;
De lengtheigenschap is altijd één meer dan de hoogste matrixindex.
Toegang tot het eerste array-element
Voorbeeld
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[0];
Toegang tot het laatste array-element
Voorbeeld
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[fruits.length - 1];
Array-elementen in een lus
Een manier om door een array te lussen, is door een forlus te gebruiken:
Voorbeeld
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;
let text = "<ul>";
for (let i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
text
+= "</ul>";
U kunt ook de Array.forEach()functie gebruiken:
Voorbeeld
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function
myFunction(value) {
text += "<li>" + value + "</li>";
}
Array-elementen toevoegen
De eenvoudigste manier om een nieuw element aan een array toe te voegen, is door de push()methode te gebruiken:
Voorbeeld
const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon"); // Adds a new element (Lemon) to fruits
Een nieuw element kan ook aan een array worden toegevoegd met behulp van de lengtheigenschap:
Voorbeeld
const fruits = ["Banana", "Orange", "Apple"];
fruits[fruits.length] = "Lemon"; // Adds "Lemon" to fruits
WAARSCHUWING!
Het toevoegen van elementen met hoge indexen kan ongedefinieerde "gaten" in een array creëren:
Voorbeeld
const fruits = ["Banana", "Orange", "Apple"];
fruits[6] = "Lemon"; // Creates undefined "holes" in fruits
Associatieve arrays
Veel programmeertalen ondersteunen arrays met benoemde indexen.
Arrays met benoemde indexen worden associatieve arrays (of hashes) genoemd.
JavaScript ondersteunt geen arrays met benoemde indexen.
In JavaScript gebruiken arrays altijd genummerde indexen .
Voorbeeld
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length; // Will return 3
person[0]; // Will return "John"
WAARSCHUWING !!
Als u benoemde indexen gebruikt, zal JavaScript de array opnieuw definiëren voor een object.
Daarna zullen sommige matrixmethoden en -eigenschappen onjuiste resultaten opleveren .
Voorbeeld:
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length; // Will return 0
person[0]; // Will return undefined
Het verschil tussen arrays en objecten
In JavaScript gebruiken arrays genummerde indexen .
In JavaScript gebruiken objecten benoemde indexen .
Arrays zijn een speciaal soort objecten, met genummerde indexen.
Wanneer arrays te gebruiken. Wanneer objecten gebruiken.
- JavaScript ondersteunt geen associatieve arrays.
- U moet objecten gebruiken als u wilt dat de elementnamen strings (tekst) zijn .
- U moet arrays gebruiken als u wilt dat de elementnamen getallen zijn .
JavaScript nieuwe array()
JavaScript heeft een ingebouwde array-constructor new Array().
Maar u kunt in plaats daarvan veilig gebruiken [].
Deze twee verschillende instructies creëren beide een nieuwe lege array met de naam punten:
const points = new Array();
const points = [];
Deze twee verschillende instructies creëren beide een nieuwe array met 6 getallen:
const points = new Array(40, 100, 1, 5, 25, 10);
const points = [40, 100, 1, 5, 25, 10];
Het newtrefwoord kan enkele onverwachte resultaten opleveren:
// Create an array with three elements:
const points = new Array(40, 100, 1);
// Create an array with two elements:
const points = new Array(40, 100);
// Create an array with one element ???
const points = new Array(40);
Een veel voorkomende fout
const points = [40];
is niet hetzelfde als:
const points = new Array(40);
// Create an array with one element:
const points = [40];
// Create an array with 40 undefined elements:
const points = new Array(40);
Hoe herken je een array
Een veel voorkomende vraag is: Hoe weet ik of een variabele een array is?
The problem is that the JavaScript operator typeof returns
"object":
const fruits = ["Banana", "Orange", "Apple"];
let type = typeof fruits;
The typeof operator returns object because a JavaScript array is an object.
Solution 1:
To solve this problem ECMAScript 5 (JavaScript 2009) defined a new method Array.isArray():
Array.isArray(fruits);
Solution 2:
The instanceof operator returns true if an object is created
by a given constructor:
const fruits = ["Banana", "Orange", "Apple"];
fruits instanceof Array;
Complete Array Reference
For a complete Array reference, go to our:
Complete JavaScript Array Reference.
The reference contains descriptions and examples of all Array properties and methods.