javascript lijst

| | | | | | | | | | | | | | | | | | | | | | | | | | |

We gaan zelf een lijst met fruit maken. We noemen onze lijst `fruits` en voegen de volgende waarden toe: banaan, meloen, druif. Oh, wat ben ik dol op fruit! Hoewel dit misschien klinkt als een tutorial over een boodschappenlijstje, hebben we eigenlijk net een tabel gemaakt.

In deze gids gaan we in op wat arrays zijn, hoe ze werken en waarom je ze in je code zou moeten gebruiken. We gaan enkele voorbeeldborden in actie bespreken, zodat je een JavaScript-bordninja kunt worden!

Wat is een array?

Een array is een object waarin gegevens worden opgeslagen. Arrays bevatten een geordende verzameling elementen en kunnen nul of meer elementen bevatten. Arrays zijn handig bij het programmeren omdat ze u vergelijkbare waarden ‚Äã‚Äãin een variabele opslaan.

U hoeft bijvoorbeeld geen tien eenvoudige variabelen te schrijven om uw favoriete fruit op te sommen. Met een array kunt u al uw favoriete fruit toevoegen aan één variabele.

Beschouw het volgende voorbeeld:.

Hier hebben we een array gemaakt met de naam "fruits". Het slaat drie verschillende waarden op, die elk een vrucht weerspiegelen die we in een supermarkt willen kopen. Om onze array te declareren, hebben we onze lijst met elementen tussen vierkante haken geplaatst.

Een array declareren

Er zijn twee manieren om een array te declareren. De manier waarop u de meeste mensen dit zult zien doen, is door een lijst met items tussen vierkante haken te omcirkelen, zoals we eerder deden:

In dit voorbeeld hebben we een array gedeclareerd met drie waarden. We kunnen ook de array-constructor gebruiken, die het sleutelwoord new gebruikt om een array te declareren:

Deze codefragmenten creëren dezelfde array, maar met verschillende methoden. Merk op dat we in ons tweede voorbeeld cirkelvormige ondersteuningen hebben gebruikt om onze array te declareren. We gebruiken ook de nieuwe array-constructor om een array te declareren. Het is om deze reden dat de meeste mensen de voorkeur geven aan de eerste methode; Vierkante haken zijn veel gemakkelijker te onthouden en sneller te typen

de tabellen bevatten mogelijk niet dezelfde type data Ons netwerk kan een aantal verschillende datatypes opslaan.

Deze array slaat drie verschillende datatypes op: een string, een getal en een boolean Nu je bekend bent met het declareren van een array, ben je klaar om toegang te krijgen tot hun inhoud.

Een array lezen

Arrays zouden niet erg handig zijn als we ze niet zouden kunnen lezen. waarden. Dit is de reden waarom indexering bestaat. de index is een manier om toegang te krijgen tot individuele elementen in itereerbaar object als een lijst.

Aan elk element van een array in een array wordt zijn indexnummer toegewezen eh. Deze getallen beginnen met 0 en kunnen worden gebruikt om stroom af te wisselen met afzonderlijke elementen in een array. Herinner je je onze "fruit"-tabel nog?

Hier zijn de indexwaarden ‚Äã‚Äãtoegewezen aan deze array:

met deze nummers hebben we toegang tot de verschillende items in onze lijst. Stel dat u wilt identificeren dat de vrucht zich op indexpositie 1 in uw array bevindt. U kunt dat doen door de indexwaarde tussen haakjes achter de tabelnaam aan te geven:

Onze code keert terug. druiven We verwijzen naar de positie 1 van de index, die de waarde "Raisin" opslaat. Als u de waarde 0 hebt doorgegeven, wordt "Banaan" geretourneerd. Als u probeert toegang te krijgen tot een element dat niet bestaat, wordt "undefined" geretourneerd:

Uitvoer: niet gedefinieerd. Waar indexering bijzonder handig is, is wanneer u door elementen in een array wilt bladeren. Stel dat u elk fruit in uw stencil op de console wilt afdrukken. U kunt dit doen met een lus als volgt:

Deze code geeft als resultaat:

Onze code gaat door elk item in onze lijst en drukt elk item vervolgens af naar de console. Je zult ook merken dat we de lengte hebben gebruikt. Deze functie retourneert de lengte van onze lijst

Voeg elementen toe aan een array

most pa , Soms wil je een nieuwe waarde aan een array toevoegen nadat je je array in eerste instantie hebt gedeclareerd.Je kunt dat doen met behulp van push () array.

We zijn vergeten "Aardbei" toe te voegen aan onze fruitlijst. Oh nee! Maak je geen zorgen, we kunnen altijd toevoegen met de push () :

Nu we deze code hebben uitgevoerd, ziet onze array er als volgt uit:

< table class = "wp-block table cours-info table"> Banaan druiven Meloen Aardbei 1 2 3

U kunt gegevens aan het begin van uw tabel toevoegen met de code < > unshift () . Aardbeien zijn zo belangrijk in ons boodschappenlijstje dat we ze als eerste willen zien:

Hierdoor zou onze lijst met "vruchten" er als volgt uitzien:

< td > aardbei
Banaan druiven Meloen
1 2 3

elementen verwijderen uit een array

Het blijkt dat we al een meloen in huis hebben, dus die hadden we niet nodig om er een te kopen. Wat heeft het voor zin om een meloen te kopen, toch? Aangezien de meloen aan het einde van onze lijst staat, hebben we twee opties om hem te verwijderen:

met Let splice () als voorbeeld:.

Onze code geeft als resultaat:

splice () accepteert twee parameters. Het eerste is het indexnummer dat uit de array moet worden verwijderd en het tweede is het aantal items dat moet worden verwijderd. In dit geval wilden we het element met de indexwaarde 3 verwijderen, dus specificeerden we "3, 1" als onze parameters.

pop () accepteert geen enkele parameter . Verwijder alleen het laatste item uit een lijst:

Onze code geeft als resultaat:

Je kunt ook shift () gebruiken om een element aan het begin van een lijst te verwijderen:

Onze code geeft als resultaat:

druk op () en unshift () voeg items toe aan de lijst. pop () en shift () items Van lijst verwijderen. De montagemethode kan ook worden gebruikt om een item uit een lijst te verwijderen op basis van de indexwaarde

Wijziging elementen van een serie

Hoewel bananen een smakelijke vrucht zijn, zijn ze vaak zo groot dat je er geen als tussendoortje kunt eten als je je een beetje nerveus voelt. Ik durf honger te hebben. Babybananen zijn makkelijker om te eten.

Laten we zeggen dat we onze "fruit"-lijst willen veranderen om babybananen te kopen in plaats van gewone bananen. We zouden dit kunnen doen met behulp van de toewijzingsoperator zoals we allemaal variabelen:

Onze code returns:

We hebben de invoer aangepast op indexpositie 0 om de waarde "babybananen" op te slaan. Het is niet nodig om speciale methoden te gebruiken om deze wijziging aan te brengen; de toewijzingsoperator wordt gebruikt om val te wijzigen gebruikt in een array.

Conclusie

Dit is de basis van wat u moet weten over JavaScript-arrays. Er valt nog meer te leren, maar dat is wat programmeren leuk maakt: er is altijd een nieuwe uitdaging om aan te pakken. Als er niets anders is, heb je geleerd over mijn favoriete fruit. Hoewel ik zou zeggen dat ik van zwarte bes hou, heb ik het in deze tutorial niet genoemd.

Je bent nu klaar om te gaan werken met JavaScript-arrays zoals een deskundige!