ES6 Methods
ES6, wat de korte vorm is van ECMAScript 6, is de versie van JavaScript die in juni 2015 werd uitgebracht. Het lijkt erop dat de ontwikkelaars die JavaScript onderhouden mijn geboortemaand leuk vinden, want dat is wanneer de meeste van hun versies zijn uitgebracht.
Als je net JavaScript aan het leren bent, zal ES6 het leven veel gemakkelijker voor je maken. Het biedt niet alleen array methoden, maar het biedt ook dingen als destructuring, pijl functies, een betere manier om object-georiënteerde en modulaire code te schrijven, onder andere.
De meeste van deze ES6 array methoden nemen een callback functie, en als gevolg daarvan worden ze genoemd hogere-orde array methoden. Pijl functies zijn heel gebruikelijk in hogere-orde functies, omdat het onze code vereenvoudigt
De map methode
Als er een ES6 array methode is die je bijna de hele tijd zult gebruiken, dan is het deze methode. Het is mijn beste array methode, zowel in JavaScript als in Python. Ook al hebben sommige JavaScript ontwikkelaars geprobeerd map te implementeren vóór ES6, de standaard map methode werd in JavaScript geïntroduceerd in ES6. In het onderstaande codefragment heb ik map op drie manieren geïmplementeerd:
- Met gewone JavaScript-functies: Hier gaf ik twee argumenten door aan de functie, eerst
item, dat is het element waarop ik iets wil doen, en een optioneel argument,index, dat is de index van elk element - Met behulp van pijl functies: Ik heb ook twee argumenten doorgegeven, net als in het eerste voorbeeld, maar de callbackfunctie is hier een pijlfunctie, wat de code een stuk netter maakt.
- Ik heb ook pijlfuncties gebruikt, maar ik heb slechts één argument doorgegeven – het element waarop ik wil itereren. Dit is handig als ik de index niet nodig heb.
De filtermethode
De methode filter is een andere array-methode van een hogere orde die je vandaag de dag zou moeten gebruiken. Wat filter doet is eenvoudig. Gegeven een array van elementen, willen we een nieuwe array teruggeven van de initiële array, waarbij een bepaalde voorwaarde true is. De callback functie moet een boolean teruggeven, en het element dat aan de voorwaarde voldoet is wat in de nieuwe array komt.
De reduce methode
Dit is erg leuk, en ik denk dat het de moeilijkste is van alle methodes die ik tot nu toe heb genoemd. Wat deze methode doet, is een bepaalde callback gebruiken om de array te verkleinen. Als ik bijvoorbeeld de som van alle elementen in een array wil vinden of het product van alle elementen in een array, dan is deze methode een mooie methode om te gebruiken, in plaats van een lus te maken en de initiële som of het initiële product te verhogen.
The forEach method
Deze methode is vergelijkbaar met de methode map, maar in dit geval wordt geen nieuwe matrix teruggegeven. Het is meer de gewone for-lus in JavaScript, maar op een schonere en meer geavanceerde manier. Er zijn drie parameters nodig, zoals je misschien al wist. De eerste is het item in de array, de tweede is de index van het item (die optioneel is), en de derde is het array object waartoe het huidige element behoort.
In de code snippet hieronder, heb ik forEach gebruikt om het Document Object Model (DOM) te manipuleren, wat best cool is. Ik kan de array bijwerken, en de lijstitems die op het DOM worden weergegeven, worden automatisch gewijzigd.
De concat-methode
Er zijn gevallen waarin u twee of meer arrays wilt samenvoegen of samenvoegen. Dan is deze functie erg handig. Als u concat op twee arrays aanroept, krijgt u een nieuwe array die bestaat uit de twee samengevoegde arrays.
De every en some methoden
Deze methoden zijn nuttig als u wilt weten of alle elementen in een array aan een voorwaarde voldoen en of sommige elementen in een array aan een voorwaarde voldoen, respectievelijk.
Andere methoden zijn:
De fill-methode
Vult elk element in de array met een waarde die is doorgegeven als parameter: .fill(1) // .
De entries methode
Dit zorgt ervoor dat de array zich gedraagt als een object met een sleutel-waarde paar, waarbij de sleutel de index is en de waarde het element.
De find methode
Deze methode retourneert het eerste element in een array dat een test doorstaat.
De splice methode
Deze methode neemt een oneindig aantal parameters – de eerste twee zijn de index waar u wilt beginnen met het invoegen en verwijderen van elementen en het aantal elementen dat u wilt verwijderen, respectievelijk – en de resterende parameters zijn de elementen die u wilt toevoegen aan de array. Het retourneert een array van de verwijderde elementen en muteert de array.
De reverse methode
De reverse methode keert de array om. Merk op dat het muteert, wat betekent dat het de array verandert in plaats van alleen een kopie ervan te maken.
De join methode
Deze methode verandert een array in een tekenreeks. Merk op dat de array niet wordt gemuteerd – er wordt alleen een kopie van gemaakt. Het omgekeerde van deze methode is de split methode, die een string omzet in een array. Deze methode neemt een string als parameter, die zal worden gebruikt om elk element van de array samen te voegen.
De flat methode
De methode flat is een nieuwe methode die in ES11 is toegevoegd (ES11 is in juni van dit jaar gemaakt). Deze methode vlakt een array af.
Laten we zeggen dat we een array hebben die een array bevat, en we willen de som en het product vinden van elk element in de arrays binnen de array. Wat ik bedoel is dat als ik een array heb die wordt gedefinieerd door , ], de som 10 moet zijn en het product 24.
Een manier om dit te doen is door de initiële array te doorlopen en door elk element te lopen en de som en het product te krijgen.
Met ES6 kan ik door de initiële array lopen en de methode reduce gebruiken om de som en het product van elk element in de hoofdarray te krijgen – daarmee verkrijg ik de totale som en het totale product. Maar met de flat array, kan ik de hoofd array plat maken, en zo een enkele array teruggeven die alleen getallen bevat, en ik kan de reduce methode daarop gebruiken.
De flatMap methode
Dit is de combinatie van flat en map. Het mapt elk element in de array aan een gegeven callback functie en maakt de resulterende array vlak.
Laten we zeggen dat we het kwadraat van elk element in een niet-vlakke array willen krijgen, en we willen het vlak maken. Deze methode zal ons het leven gemakkelijker maken. In het deel waar ik de flatMap methode gebruikte in het code fragment hieronder, neemt het een element dat een array is, en ik retourneerde een nieuwe array, die het kwadraat is van de elementen. En tenslotte wordt de resulterende array afgevlakt.
