7.4 KiB

Raw Permalink Blame History

JavaScript Basis: Arrays en Lussen

Sketchnote door Tomomi Imura

Pre-Les Quiz

Deze les behandelt de basis van JavaScript, de taal die interactiviteit op het web mogelijk maakt. In deze les leer je over arrays en lussen, die worden gebruikt om gegevens te manipuleren.

🎥 Klik op de afbeeldingen hierboven voor video's over arrays en lussen.

Je kunt deze les volgen op Microsoft Learn!

Arrays

Werken met gegevens is een veelvoorkomende taak in elke programmeertaal, en het is een stuk eenvoudiger wanneer gegevens zijn georganiseerd in een gestructureerd formaat, zoals arrays. Met arrays worden gegevens opgeslagen in een structuur die lijkt op een lijst. Een groot voordeel van arrays is dat je verschillende soorten gegevens in één array kunt opslaan.

✅ Arrays zijn overal om ons heen! Kun je een voorbeeld bedenken van een array in het echte leven, zoals een array van zonnepanelen?

De syntax voor een array is een paar vierkante haken.

let myArray = [];

Dit is een lege array, maar arrays kunnen ook worden gedeclareerd met al ingevulde gegevens. Meerdere waarden in een array worden gescheiden door een komma.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

De waarden in een array krijgen een unieke waarde genaamd de index, een geheel getal dat wordt toegewezen op basis van de afstand vanaf het begin van de array. In het bovenstaande voorbeeld heeft de stringwaarde "Chocolate" een index van 0, en de index van "Rocky Road" is 4. Gebruik de index met vierkante haken om arraywaarden op te halen, te wijzigen of in te voegen.

✅ Verrast het je dat arrays beginnen bij index nul? In sommige programmeertalen beginnen indexen bij 1. Er is een interessante geschiedenis hierover, die je kunt lezen op Wikipedia.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors[2]; //"Vanilla"

Je kunt de index gebruiken om een waarde te wijzigen, zoals dit:

iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"

En je kunt een nieuwe waarde invoegen op een bepaalde index zoals dit:

iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"

✅ Een meer gebruikelijke manier om waarden toe te voegen aan een array is door gebruik te maken van array-operators zoals array.push()

Om te achterhalen hoeveel items er in een array zitten, gebruik je de length eigenschap.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors.length; //5

✅ Probeer het zelf! Gebruik de console van je browser om een array te maken en te manipuleren die je zelf hebt bedacht.

Lussen

Lussen stellen ons in staat om herhalende of iteratieve taken uit te voeren, en kunnen veel tijd en code besparen. Elke iteratie kan variëren in variabelen, waarden en voorwaarden. Er zijn verschillende soorten lussen in JavaScript, en ze hebben allemaal kleine verschillen, maar doen in wezen hetzelfde: herhalen over gegevens.

For-lus

De for-lus vereist 3 onderdelen om te itereren:

counter Een variabele die meestal wordt geïnitialiseerd met een getal dat het aantal iteraties telt
condition Een expressie die gebruik maakt van vergelijkingsoperators om de lus te stoppen wanneer deze false wordt
iteration-expression Wordt uitgevoerd aan het einde van elke iteratie, meestal gebruikt om de waarde van de teller te wijzigen

// Counting up to 10
for (let i = 0; i < 10; i++) {
  console.log(i);
}

✅ Voer deze code uit in de console van je browser. Wat gebeurt er als je kleine wijzigingen aanbrengt in de teller, de voorwaarde of de iteratie-expressie? Kun je de lus achteruit laten lopen, zodat er een aftelling ontstaat?

While-lus

In tegenstelling tot de syntax van de for-lus, vereist een while-lus alleen een voorwaarde die de lus stopt wanneer de voorwaarde false wordt. Voorwaarden in lussen zijn meestal afhankelijk van andere waarden zoals tellers, en moeten tijdens de lus worden beheerd. Startwaarden voor tellers moeten buiten de lus worden gemaakt, en alle expressies om aan een voorwaarde te voldoen, inclusief het wijzigen van de teller, moeten binnen de lus worden onderhouden.

//Counting up to 10
let i = 0;
while (i < 10) {
 console.log(i);
 i++;
}

✅ Waarom zou je kiezen voor een for-lus versus een while-lus? 17K kijkers hadden dezelfde vraag op StackOverflow, en sommige van de meningen kunnen interessant voor je zijn.

Lussen en Arrays

Arrays worden vaak gebruikt met lussen omdat de meeste voorwaarden de lengte van de array nodig hebben om de lus te stoppen, en de index kan ook de waarde van de teller zijn.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

for (let i = 0; i < iceCreamFlavors.length; i++) {
  console.log(iceCreamFlavors[i]);
} //Ends when all flavors are printed

✅ Experimenteer met het herhalen over een array die je zelf hebt gemaakt in de console van je browser.

🚀 Uitdaging

Er zijn andere manieren om over arrays te herhalen dan for- en while-lussen. Er zijn forEach, for-of, en map. Herschrijf je array-lus met een van deze technieken.

Post-Les Quiz

Post-les quiz

Review & Zelfstudie

Arrays in JavaScript hebben veel methoden die eraan gekoppeld zijn, die uiterst handig zijn voor gegevensmanipulatie. Lees meer over deze methoden en probeer er een paar uit (zoals push, pop, slice en splice) op een array die je zelf hebt gemaakt.

Opdracht

Herhaal een Array

Disclaimer:
Dit document is vertaald met behulp van de AI-vertalingsservice Co-op Translator. Hoewel we streven naar nauwkeurigheid, willen we u erop wijzen dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.

7.4 KiB Raw Permalink Blame History