Java-array. Deel 6 van de JavaScript-cursus van Beginner tot Gevorderd in 10 blogposts

Dit is deel 6 van de JavaScript blogpostserie die je van beginner naar gevorderde zal brengen. Aan het einde van deze serie weet je alle basisprincipes die je moet kennen om te beginnen met coderen in JavaScript. Zonder verder oponthoud, laten we beginnen met de zesde tutorial.

Java array – inhoudsopgave:

1. Arrays – basisinformatie
2. Items toevoegen aan een java array
3. Items verwijderen uit een array
4. Lengte in arrays bepalen
5. Arrays sorteren
6. Elementen in arrays omkeren
7. Voor elke
8. Bevat in arrays

Deze tutorial gaat ervan uit dat je een coderingsomgeving al hebt ingesteld. Als je de vorige tutorials hebt gevolgd, zou je deze al open moeten hebben. Als je om de een of andere reden je setup hebt gesloten, kun je de volledige instructies voor het instellen vinden in Deel 4 van deze serie. In die tutorial lopen we door hoe je je Google Chrome Snippets-omgeving voor coderen kunt instellen.

Als je enigszins vertrouwd bent met het gebruik van Google Chrome, is hier een snelle manier om je voor deze tutorial in te stellen, anders kun je de Deel 4 bekijken voor de volledige set stap-voor-stap instructies over hoe je je coderingsomgeving kunt instellen.

Als je op een Mac bent, is de sneltoets om de console te openen “Option + Command + J”, nadat je Chrome hebt geopend. Als je een Windows-apparaat gebruikt, kun je de sneltoets “Control + Shift + J” gebruiken om de JavaScript-console te openen, zodra je Chrome opent. Of je kunt ook naar het menu bovenaan gaan en naar Weergave -> Ontwikkelaar -> JavaScript-console gaan. Zodra je de console opent, kun je op het tabblad “Bronnen” klikken, dat zich direct naast “Console” bevindt. Nu zou je Snippets moeten zien. Je kunt doorgaan met coderen in een snippet die je eerder al hebt gebruikt, of je kunt een nieuwe Snippet maken door op de knop “+ Nieuwe snippet” te klikken. Zolang je een coderingssetup hebt voor deze tutorial waar je kunt oefenen, ben je goed om te gaan.

Java array – basisinformatie

Arrays worden veel gebruikt in veel programmeertalen en JavaScript is daar geen uitzondering op. En dat is met een goede reden. Maar je vraagt je misschien af, wat is een array om mee te beginnen? Arrays zijn in wezen een verzameling van gerelateerde gegevens die kunnen worden benaderd en gemanipuleerd met bepaalde gedefinieerde methoden. Laten we enkele voorbeelden bekijken van een array om een completer begrip te krijgen.

const numbersUntilTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const testAnswers = [true, true, false, false, true];
const pets = ["honden", "katten", "vogels", "vissen"];

We kunnen een java array gebruiken om meerdere verschillende soorten gegevens op te slaan. Bijvoorbeeld, in de bovenstaande code hebben we enkele nummers, booleans en ook string datatypes opgeslagen.

We kunnen een java array maken net zoals we andere variabelen maken, met ofwel const of let sleutelwoorden aan de linkerkant en de inhoud van de arrays aan de rechterkant van de vergelijkingen. Een ding waar je op moet letten is dat wanneer we arrays maken, we de vierkante haken gebruiken om de items te omringen, net zoals we deden in de bovenstaande code. We scheiden ook elk item met een komma ertussen, ongeacht hun datatype.

In deze tutorial zullen we code schrijven op een manier dat je alles in deze tutorial kunt kopiëren en plakken, sequentieel, of alles kunt intypen in een JavaScript-snippet in Chrome, en het zou zoals verwacht werken, mits je de volgorde volgt. Wat dit voor jou betekent is dat, als we een variabele met het const-sleutelwoord eenmaal in de tutorial definiëren, je normaal gesproken geen andere variabele met exact dezelfde naam opnieuw kunt definiëren. Daarom is het een goed idee om ervoor te zorgen dat je die variabelen ook in je code definieert als je van plan bent om gedeeltelijk wat code te kopiëren en plakken. Dit zou geen probleem moeten zijn als je de tutorial volgt in de volgorde waarin deze wordt gepresenteerd.

Een van de eerste dingen die je moet weten over een java array is dat, zodra je een array maakt, je toegang moet krijgen tot de elementen. Arrays hebben iets dat “genummerde indexen” wordt genoemd, en wat dit voor jou in de praktijk betekent is dat elk element dat je in JavaScript maakt, er een nummer aan is gekoppeld van links naar rechts, van nul tot de lengte van de java array min één.

Bijvoorbeeld, in de bovenstaande code voor huisdieren, kunnen we het eerste element van “honden” benaderen door de naam van de variabele te schrijven, vierkante haken te openen, de index van het item dat we willen benaderen in te voeren en de vierkante haakjes te sluiten:

alert(pets[0]);

Evenzo zal het invoeren van hogere nummers andere elementen in het waarschuwingsvenster dat we weergeven, activeren.

alert(pets[1]);
alert(pets[2]);
alert(pets[3]);

Aangezien we 4 elementen in de huisdierenarray hadden, en we de indexen vanaf 0 zijn begonnen, wordt het laatste item in de array benaderd met pets[3], wat 1 minder is dan de totale lengte van de array. Op dit punt vraag je je misschien af, nu we een array kunnen maken en een item uit die array kunnen benaderen, hoe zit het met het aanbrengen van wijzigingen in die array? Hoe zit het met het toevoegen van nieuwe items, het wijzigen van bestaande items of het verwijderen van items? Laten we het stap voor stap aanpakken en beginnen met het toevoegen van nieuwe items aan een array.

Items toevoegen aan een java array

Er zijn meerdere manieren waarop we verschillende items aan een array kunnen toevoegen. Als we weten dat we het nieuwe item aan het einde van de array willen toevoegen, kunnen we de “push” methode gebruiken. Dit wordt ook wel het toevoegen van een nieuw item aan de array genoemd. Merk op dat het toegevoegde item aan het einde van de array komt. Bijvoorbeeld:

pets.push("slangen");
// laten we verifiëren dat we slangen als het laatste item hebben
// door de inhoud van de array weer te geven
alert(pets);

Als we weten dat we specifiek een item als het eerste element aan de java array willen toevoegen, kunnen we het sleutelwoord “unshift” gebruiken. Laten we dat met een voorbeeld bekijken:

// het uitvoeren van deze code zal alle waarden verschuiven
// naar één kant en zal het eerste huisdier van draak toevoegen
pets.unshift(“draken”); 
// laten we dit verifiëren door de inhoud van de array weer te geven
alert(pets);

Het is geweldig dat we items aan het einde van de array of aan het begin van de array kunnen toevoegen, maar wat als ik om de een of andere reden items op specifieke posities in de array wil injecteren? Laten we zeggen dat ik schildpadden aan de derde positie wil toevoegen. Is dat zelfs mogelijk? Ja, dat is het. Om een item in een array te injecteren, kunnen we het definiëren zoals we dat deel van de array maken en een waarde toewijzen aan dat specifieke deel van de array. Vergeet ook niet de indexwaarden te gebruiken bij het invoegen van waarden. Vanuit praktisch oogpunt ziet het er als volgt uit:

pets[2] = "schildpadden";
// laten we verifiëren dat we schildpadden als het derde item hebben
// door de inhoud van de array weer te geven
alert(pets);

Items verwijderen uit een array

Op dit punt vraag je je misschien af, hoe zit het met het verwijderen van items uit een array? Nou, daar zijn ook meerdere manieren voor. Waarschijnlijk de bekendste is het gebruik van de “pop” methode. Dit zal op een bepaalde manier je laatste item uit een array verwijderen. // dit zal het laatste item in de array verwijderen pets.pop(); // laten we de resultaten verifiëren door de inhoud van de array weer te geven alert(pets);

Zoals je kunt zien, hebben we met de pop-methode het laatste huisdieritem van slangen uit onze huisdierenarray verwijderd.

Een andere manier waarop je items uit een java array kunt verwijderen, is door het sleutelwoord “shift” te gebruiken. Wanneer we shift gebruiken, wordt het eerste element verwijderd en passen de rest van de indexwaarden zich aan. Bijvoorbeeld:

// dit zal het eerste item verwijderen
// en zal de andere items naar hun nieuwe indexwaarden verschuiven
// die één lager zullen zijn dan de vorige indexwaarden
pets.shift();
// laten we dit ook verifiëren door de array weer te geven
alert(pets);

De naam “shift” komt eigenlijk van hoe de geheugenallocatie werkt in computergeheugen. Dus als het in het begin relatief onintuitief lijkt, is dat ook volkomen normaal. Voor nu moet je weten dat we met de shift-methode het eerste item uit een array kunnen verwijderen.

Lengte in arrays bepalen

Wanneer we met arrays in het echte leven werken, zijn er veel momenten waarop we het aantal array-items willen tellen. Dit kan nodig zijn op verschillende plaatsen, waaronder in takenlijsten, deelnemerslijsten op school of werk, enzovoort. Om dat te bereiken, hebben we een ingebouwde array-eigenschap genaamd “length” en deze zal ons de totale lengte van de array vertellen. Bijvoorbeeld:

alert(pets.length);

Arrays sorteren

Arrays sorteren is een vrij gebruikelijke operatie in JavaScript. Er zijn verschillende specifieke implementaties voor het sorteren van items in JavaScript. Deze specifieke implementaties worden over het algemeen sorteeralgoritmen genoemd. Verschillende sorteeralgoritmen kunnen verschillende voordelen en nadelen met zich meebrengen. Bijvoorbeeld, een sorteeralgoritme kan boven een ander worden gekozen omdat het gewoon veel gemakkelijker te implementeren is in code, vergeleken met een ander, ook al kunnen ze iets betere prestaties vertonen. Je hebt misschien gehoord van verschillende sorteeralgoritmen voor geoptimaliseerde prestaties. In deze tutorial zullen we de ingebouwde sorteermethode gebruiken die door JavaScript wordt aangeboden. Sorteren is een vrij veelvoorkomend probleem, vooral in webontwikkeling. Bijvoorbeeld, als je een e-commercewebsite bouwt, moet je verschillende sorteersituaties implementeren waaruit je gebruiker kan kiezen. Hoewel er geen strikte regels zijn over welke opties en mogelijkheden je je publiek moet bieden, zijn er vrij algemene normen die van je worden verwacht als websitebouwer. Bijvoorbeeld, als gebruiker is er een grote kans dat je enkele winkelitems zowel in oplopende als in aflopende prijs wilt weergeven. Bij het implementeren van de sortering voor die taken moet je rekening houden met hoe je het implementeert, gezien het feit dat de gebruiker ook de zoekresultaten kan beperken tot bepaalde andere categorieën, zoals t-shirts, hoeden, tassen, enzovoort. We kunnen een array sorteren door “.sort()” aan het einde ervan toe te voegen.

pets.sort();
alert(pets);

Elementen in arrays omkeren

Een array omkeren is waarschijnlijk gebruikelijker in combinatie met sorteren. In dit geval, omdat we deze codes ook van boven naar beneden uitvoeren, passen we ook de omkering toe na het sorteren van de array. We kunnen een array omkeren door “.reverse()” aan het einde ervan toe te voegen. pets.reverse(); alert(pets);

Omdat we de array in de vorige stap hebben geordend, zie je dat we nu een array hebben die zowel gesorteerd als omgekeerd is.

Voor elke

Wanneer we met arrays werken, biedt JavaScript ons een handige manier om over de array-items te itereren met “.forEach()”. Als we echt willen, kunnen we nog steeds een reguliere for-lus gebruiken om over een array te itereren. Laten we eerst zien hoe we een for-lus construeren om over een array te itereren, daarna zullen we zien hoe we forEach() gebruiken.

// dit zal ons 4 keer waarschuwen om ons huisdier te voeren
for (let a = 0; a < pets.length; a++) {
    alert("Tijd om mijn huisdier te voeren");
}

We kunnen ook hetzelfde resultaat bereiken door forEach te gebruiken.

pets.forEach(alert("Tijd om mijn huisdier te voeren"));

Wanneer we het gebruik van for-lussen of For each vergelijken, afhankelijk van je voorkeuren en je specifieke situatie, kun je de voorkeur geven aan het gebruik van de een boven de ander. In wezen bereiken ze beide dezelfde uitvoer met verschillende stijlen in de code. ForEach kan relatief gemakkelijker zijn en je een regel code besparen om te lezen en te schrijven, maar het zal uiteindelijk jouw keuze zijn. Je hoeft nu niet zo’n keuze te maken en je eraan te houden. Terwijl je code schrijft, kun je experimenteren met het oplossen van hetzelfde probleem met verschillende benaderingen terwijl je verdergaat in je programmeerreis.

Bevat in arrays

We kunnen ook controleren of een item in een java array bestaat. Een voorbeeld van een echt gebruik van deze methode zou zijn of een privé-evenement de naam van een persoon op de uitnodigingslijst bevat. De daadwerkelijke implementatie is ook vrij eenvoudig. We schrijven eerst de naam van de array, in dit geval werken we met de huisdierenarray. Vervolgens zetten we een punt om toegang te krijgen tot verschillende array-eigenschappen en -methoden, daarna schrijven we “includes”, openen en sluiten haakjes, en typen de naam van het item dat we willen controleren. Hier is een voorbeeld dat controleert of een item dat we weten dat het in de array bestaat:

alert(pets.includes("honden"));

Als we ook hetzelfde doen met een item waarvan we weten dat het niet in de java array bestaat, verwachten we als antwoord false te ontvangen. Laten we ook die situatie met een voorbeeld bekijken:

alert(pets.includes("puppy")); [/code>

Aangezien we geen puppy in de huisdierenarray hadden, krijgen we false zoals we verwachtten. In de volgende tutorial zullen we een ander belangrijk concept in zowel de programmeerwereld als in JavaScript bekijken.