15 JavaScript-array-methoden die u vandaag moet beheersen

15 JavaScript-array-methoden die u vandaag moet beheersen

Webontwikkelaars van alle niveaus, van beginnende programmeurs tot codeerexperts, gaan het belang inzien van JavaScript bij het ontwikkelen van moderne websites. JavaScript is zo dominant dat het een essentiële vaardigheid is om te weten of je web-apps gaat maken.





Een van de krachtigste bouwstenen die in de JavaScript-taal zijn ingebouwd, zijn arrays. Arrays komen vaak voor in veel programmeertalen en zijn handig voor het opslaan van gegevens.



JavaScript bevat ook handige functies die bekend staan ​​als array-methoden. Hier zijn er vijftien waar je goed naar moet kijken om je vaardigheden als ontwikkelaar te laten groeien.





Wat zijn matrixmethoden?

Matrixmethoden zijn ingebouwde functies in JavaScript die u op uw arrays kunt toepassen. Elke methode heeft een unieke functie die een wijziging of berekening op uw array uitvoert, zodat u geen gemeenschappelijke functies hoeft te coderen.

Array-methoden in JavaScript worden uitgevoerd met behulp van een puntnotatie die aan uw arrayvariabele is gekoppeld. Omdat het gewoon JavaScript-functies zijn, eindigen ze altijd met haakjes die optionele argumenten kunnen bevatten. Hier is een methode gekoppeld aan een eenvoudige array genaamd mijnArray .



let myArray = [1,2,3]; myArray.pop();

Deze code zou een methode toepassen met de naam knal naar de array.

Voorbeeldmatrix

Gebruik voor elk voorbeeld een voorbeeldarray die we zullen noemen mijnArray , om de methoden op uit te voeren. Trek gerust je console tevoorschijn en codeer mee.



let myArray = [2,4,5,7,9,12,14];

Deze voorbeelden gaan ervan uit dat u de basis kent van: wat JavaScript is en hoe het werkt . Als je dat niet doet, is dat oké, we zijn hier allemaal om te leren en te groeien.

Duik in deze vijftien krachtige array-methoden!



1. Matrix.push()

Wat het doet: duw() neemt je array en voegt een of meer elementen toe aan het einde van de array, en retourneert vervolgens de nieuwe lengte van de array. Deze methode zal uw bestaande array wijzigen.

Voeg het getal 20 toe aan de array door te rennen duw() , met 20 als argument.

let myArray = [2,4,5,7,9,12,14];
myArray.push(20);

Controleer of het werkte:

console.log(myArray); [2,4,5,7,9,12,14,20]

Het runnen van de duw() methode op myArray heeft de waarde die in het argument wordt gegeven, aan de array toegevoegd. In dit geval 20. Wanneer u myArray in de console aanvinkt, ziet u dat de waarde nu aan het einde van de array is toegevoegd.

2. Matrix.concat()

Wat het doet: concat() kan twee of meer arrays samenvoegen tot een nieuwe array. Het wijzigt de bestaande arrays niet, maar maakt een nieuwe.

Nemen mijnArray en voeg een array samen met de naam nieuweArray erin.

let myArray = [2,4,5,7,9,12,14];
let newArray = [1,2,3];
let result = myArray.concat(newArray); console.log(result); [2,4,5,7,9,12,14,1,2,3]

Deze methode doet wonderen bij het omgaan met meerdere arrays of waarden die u moet combineren, alles in één vrij eenvoudige stap bij het gebruik van variabelen.

3. Matrix.join()

Wat het doet: meedoen() neemt een array en voegt de inhoud van de array samen, gescheiden door een komma. Het resultaat wordt in een string geplaatst. U kunt een scheidingsteken opgeven als u een alternatief voor een komma wilt gebruiken.

Bekijk hoe dit werkt met myArray. Gebruik eerst de standaardmethode zonder scheidingstekenargument, waarbij een komma wordt gebruikt.

let myArray = [2,4,5,7,9,12,14];
myArray.join(); '2,4,5,7,9,12,14'

JavaScript zal een tekenreeks uitvoeren, waarbij elke waarde in de array wordt gescheiden door een komma. U kunt een argument in de functie gebruiken om het scheidingsteken te wijzigen. Observeer het met twee argumenten: een enkele spatie en een string.

myArray.join(' ');
'2 4 5 7 9 12 14' myArray.join(' and ');
'2 and 4 and 5 and 7 and 9 and 12 and 14'

Het eerste voorbeeld is een spatie, waardoor een string ontstaat die je gemakkelijk kunt lezen.

Het tweede voorbeeld gebruikt (' en ') , en er zijn twee dingen die u hier moet weten.

Ten eerste gebruiken we het woord 'en' om de waarden te scheiden. Ten tweede is er een spatie aan beide zijden van het woord 'en'. Dit is belangrijk om in gedachten te houden bij het gebruik meedoen() . JavaScript leest argumenten letterlijk; dus als deze spatie wordt weggelaten, wordt alles door elkaar gehusseld (bijv. '2and4and5...' etc.) Geen erg leesbare output!

4. Array.forEach()

Wat het doet: voor elk() (hoofdlettergevoelig!) voert een functie uit op elk item in uw array. Deze functie is elke functie die u maakt, vergelijkbaar met het gebruik van een 'for'-lus om een ​​functie op een array toe te passen, maar met veel minder werk aan code.

Er is nog een beetje meer aan de hand voor elk() ; kijk naar de syntaxis en voer vervolgens een eenvoudige functie uit om te demonstreren.


myArray.forEach(function(item){
//code
});

We gebruiken mijnArray , voor elk() wordt toegepast met de puntnotatie. U plaatst de functie die u wilt gebruiken binnen de argument-haakjes, dat is functie(item) in het voorbeeld.

Kijk eens naar functie(item) . Dit is de functie die binnen forEach() wordt uitgevoerd en heeft zijn eigen argument. We noemen het argument item . Er zijn twee dingen die u moet weten over dit argument:

  • Wanneer forEach() over uw array loopt, past het de code toe op dit argument. Zie het als een tijdelijke variabele die het huidige element bevat.
  • U kiest de naam van het argument, het kan elke naam krijgen die u maar wilt. Meestal wordt dit iets genoemd dat het gemakkelijker te begrijpen maakt, zoals 'item' of 'element'.

Bekijk dit eenvoudige voorbeeld met die twee dingen in gedachten. Voeg 15 toe aan elke waarde en laat de console het resultaat tonen.


myArray.forEach(function(item){
console.log(item + 15);
});

We gebruiken item in dit voorbeeld als de variabele, dus de functie is geschreven om 15 op te tellen bij elke waarde via item . De console drukt vervolgens de resultaten af. Zo ziet het eruit in een Google Chrome-console.

Het resultaat is elk nummer in de array, maar dan met 15 erbij!

5. Matrix.map ()

Wat het doet: kaart() voert een functie uit op elk element in uw array en plaatst het resultaat in een nieuwe array.

Het uitvoeren van een functie op elk element klinkt als forEach(). Het verschil hier is: kaart() creëert een nieuwe array wanneer uitgevoerd. forEach() maakt niet automatisch een nieuwe array, u zou hiervoor een specifieke functie moeten coderen.

Gebruik map() om de waarde van elk element in myArray te verdubbelen en plaats ze in een nieuwe array. U zult hetzelfde zien functie(item) syntaxis voor wat meer oefening.

let myArray = [2,4,5,7,9,12,14]; let doubleArray = myArray.map(function(item){
return item * 2;
});

Controleer de resultaten in de console.

console.log(doubleArray); [4,8,10,14,18,24,28]

mijnArray is ongewijzigd:

console.log(myArray); [2,4,5,7,9,12,14]

6. Array.unshift()

Wat het doet: vergelijkbaar met hoe de methode push() werkt, is de ontschuiven() methode neemt je array en voegt een of meer elementen toe aan het begin van de array in plaats van het einde, en retourneert de nieuwe lengte van de array. Deze methode zal uw bestaande array wijzigen.

let myArray = [2,4,5,7,9,12,14];
myArray.unshift(0);

Bij het loggen van de array op de console, zou u het nummer 0 aan het begin van de array moeten zien.

console.log(myArray); [0, 2,4,5,7,9,12,14]

7. Array.sort()

Wat het doet: Sorteren is een van de meest voorkomende bewerkingen die op een array worden uitgevoerd en is zeer nuttig. JavaScript's soort() array-methode kan worden gebruikt om een ​​reeks getallen of zelfs tekenreeksen te sorteren met slechts een enkele regel code. Deze bewerking is op zijn plaats en retourneert de gesorteerde array door de initiële array te wijzigen. Neem een ​​andere reeks getallen voor mijnArray deze keer.

let myArray = [12, 55, 34, 65, 10];
myArray.sort((a,b) => a - b);

Aangezien de sortering op zijn plaats wordt gedaan, hoeft u geen afzonderlijke variabele voor de gesorteerde array te declareren.

console.log(myArray); [10, 12, 34, 55, 65]

Standaard wordt de array in oplopende volgorde gesorteerd, maar u kunt optioneel een aangepaste functie doorgeven aan de soort() methode om de array op de gewenste manier te sorteren. In dit geval heb ik een gewoonte doorgegeven pijl functie: om de array numeriek in oplopende volgorde te sorteren.

8. Matrix.reverse()

Wat het doet: Zoals de naam al doet vermoeden, achteruit() methode wordt gebruikt om de volgorde van elementen in de array om te keren. Merk op dat dit niet de inhoud van de array omkeert, maar alleen de volgorde zelf. Hier is een voorbeeld om deze methode beter te begrijpen:

let myArray = [2,4,5,7,9,12,14];
myArray.reverse()

Log de uitvoer in op de console om de bewerking te verifiëren.

console.log(myArray); [14, 12, 9, 7, 5, 4, 2]

Zoals je kunt zien, is de volgorde van de elementen omgedraaid. Voorheen was het element bij de laatste index (element 14 bij index 6) nu het element bij de nulde index enzovoort.

9. Array.slice()

Wat het doet: plak() wordt gebruikt om een ​​ondiepe kopie van een deel van een array op te halen. In eenvoudiger bewoordingen kunt u met deze methode specifieke elementen uit een array selecteren op basis van hun index. U kunt de startindex doorgeven van het element waaruit u wilt ophalen en elementen en optioneel ook de eindindex.

Als u de eindindex niet opgeeft, worden alle elementen van de startindex tot het einde van de array opgehaald. Deze methode retourneert een nieuwe array en wijzigt de bestaande niet.

let myArray = [2,4,5,7,9,12,14];
let slicedArray = myArray.slice(2);

In de bovenstaande code worden alle elementen van de tweede index tot de laatste index opgehaald omdat de parameter end index niet wordt doorgegeven. Log beide arrays in de console.

console.log(myArray);
console.log(slicedArray); [2, 4, 5, 7, 9, 12, 14]
[5, 7, 9, 12, 14]

Het is duidelijk dat de initiële array niet wordt gewijzigd door de methode slice() en in plaats daarvan een nieuwe array retourneert die is opgeslagen in de slicedArray variabel. Hier is een voorbeeld waarin de parameter end index ook wordt doorgegeven aan de plak() methode.

let myArray = [2,4,5,7,9,12,14];
let slicedArray = myArray.slice(1, 3);
console.log(slicedArray); [4, 5]

10. Matrix.splice()

Wat het doet: splitsen() is een handige array-methode die wordt gebruikt voor het verwijderen of vervangen van elementen in de array op hun plaats. Door de index en het aantal te verwijderen elementen op te geven, wordt de array gewijzigd.

let myArray = [2,4,5,7,9,12,14];
myArray.splice(2, 3);
console.log(myArray);

In het bovenstaande voorbeeld is de mijnArray array wordt gesplitst van index 2 en 3 elementen worden eruit verwijderd. De array bestaat nu uit:

[2, 4, 12, 14]

Om de elementen te vervangen in plaats van ze gewoon te verwijderen, kunt u een willekeurig aantal optionele parameters doorgeven aan de elementen waarmee u wilt vervangen, zoals dit:

hoe ios 14 bèta te verwijderen
let myArray = [2,4,5,7,9,12,14];
myArray.splice(2, 3, 1, 2, 3);
console.log(myArray); [2, 4, 1, 2, 3, 12, 14]

11. Matrix.filter()

Wat het doet: De filter() methode is een handige array-methode die een functie met een test nodig heeft en een nieuwe array retourneert met alle elementen die die test doorstaan. Trouw aan zijn naam, wordt deze methode gebruikt om de elementen die je nodig hebt uit de andere elementen te filteren. De filtratie wordt gedaan met behulp van een functie die een booleaanse waarde retourneert.

Hier is een voorbeeld van de filter() methode die wordt gebruikt om alleen die elementen uit de array te krijgen die deelbaar zijn door 2.

let myArray = [2,4,5,7,9,12,14];
let divisibleByTwo = myArray.filter((number) => number % 2 === 0);
console.log(divisibleByTwo);

In het bovenstaande voorbeeld wordt een pijlfunctie doorgegeven als de parameter die elk getal uit de originele array haalt en controleert of het deelbaar is door 2 met behulp van de modulo ( % ) en gelijkwaardigheid ( === ) exploitant. Zo ziet de uitvoer eruit:

[2, 4, 12, 14]

12. Array.reduce()

Wat het doet: verminderen() is een array-methode die een reducer-functie neemt en deze op elk array-element uitvoert om een ​​enkele waarde uit te voeren tijdens het retourneren. Het vereist een verloopfunctie met een accumulatorvariabele en een stroomelementvariabele als vereiste parameters. De waarde van de accumulator wordt onthouden over alle iteraties en wordt uiteindelijk geretourneerd na de laatste iteratie.

Een populair gebruik van deze methode is om de som van alle elementen in de array te berekenen. De implementatie van deze functionaliteit is als volgt:

let myArray = [2,4,5,7,9,12,14];
let sumOfNums = myArray.reduce((sum, currentNum) => sum + currentNum, 0);

0 wordt doorgegeven als de tweede parameter in het bovenstaande voorbeeld, die wordt gebruikt als de beginwaarde van de accumulatorvariabele. De sumOfNums variabele bevat de geretourneerde waarde van de verminderen() methode die naar verwachting de som is van alle elementen in de array.

console.log(sumOfNums); 53

13. Array.omvat()

Wat het doet: Zoeken naar een element in een array om te controleren of het aanwezig is, is een bewerking die vrij vaak wordt gebruikt en daarom heeft JavaScript hiervoor een ingebouwde methode in de vorm van omvat() array methode. Hier is hoe je het kunt gebruiken:

let myArray = [2,4,5,7,9,12,14];
console.log(myArray.includes(4));
console.log(myArray.includes(2, 1));
console.log(myArray.includes(12, 2));
console.log(myArray.includes(18));

Deze methode heeft een vereiste parameter nodig, het element waarnaar moet worden gezocht en een optionele parameter, de matrixindex van waaruit moet worden gezocht. Afhankelijk van of dat element aanwezig is of niet, zal het terugkeren waar of vals respectievelijk. Daarom zal de output zijn:

true
false
true
false

14. Matrix.indexOf()

Wat het doet: index van() methode wordt gebruikt om de index te achterhalen waarop het eerste voorkomen van een bepaald element in de array kan worden gevonden. Hoewel het vergelijkbaar is met de methode include(), retourneert deze methode de numerieke index of -1 als het element niet aanwezig is in de array.

let myArray = [2,4,5,7,9,12,14];
console.log(myArray.indexOf(4));
console.log(myArray.indexOf('4'));
console.log(myArray.indexOf(9, 2));

index van() methode gebruikt strikte gelijkheid om te controleren of een element aanwezig is, wat betekent dat de waarde, evenals het gegevenstype, hetzelfde moet zijn. De optionele tweede parameter neemt de index om te beginnen met zoeken. Op basis van deze criteria ziet de uitvoer er als volgt uit:

1
-1
4

15. Matrix.fill()

Wat het doet: Vaak moet u alle waarden in de array instellen op een statische waarde zoals 0. In plaats van een lus te gebruiken, kunt u de vullen() methode voor hetzelfde doel. Je kunt deze methode aanroepen op een array met 1 vereiste parameter: de waarde om de array mee te vullen en 2 optionele parameters: de begin- en eindindex om tussen te vullen. Deze methode wijzigt de bestaande array.

let myArray = [2,4,5,7,9,12,14];
let array1 = myArray.fill(0);
myArray = [2,4,5,7,9,12,14];
let array2 = myArray.fill(0, 2);
myArray = [2,4,5,7,9,12,14];
let array3 = myArray.fill(0, 1, 3);

Als u de uitvoer naar de console logt, ziet u:

console.log(array1);
console.log(array2);
console.log(array3); [0, 0, 0, 0, 0, 0, 0]
[2, 4, 0, 0, 0, 0, 0]
[2, 0, 0, 7, 9, 12, 14]

Volgende stappen in uw JavaScript-reis

Arrays zijn een krachtig onderdeel van de JavaScript-taal. Daarom zijn er zoveel methoden ingebouwd om uw leven als ontwikkelaar gemakkelijker te maken. De beste manier om deze vijftien methoden onder de knie te krijgen, is door te oefenen.

Terwijl u JavaScript blijft leren, MDN is een geweldige bron voor gedetailleerde documentatie. Maak het u gemakkelijk in de console en verbeter uw vaardigheden met de beste JavaScript-editors voor programmeurs. Klaar om uw website te bouwen met JavaScript? Waarom bekijkt u niet enkele kaders die u kunt overwegen.

Deel Deel Tweeten E-mail 6 JavaScript-frameworks die het leren waard zijn

Er zijn veel JavaScript-frameworks om te helpen bij de ontwikkeling. Hier zijn er enkele die u moet weten.

Lees volgende Gerelateerde onderwerpen
  • Programmeren
  • JavaScript
  • Codeertips
Over de auteur Nitin Ranganath(31 artikelen gepubliceerd)

Nitin is een enthousiaste softwareontwikkelaar en een student computertechniek die webapplicaties ontwikkelt met behulp van JavaScript-technologieën. Hij werkt als freelance webontwikkelaar en schrijft in zijn vrije tijd graag voor Linux en Programmeren.

Meer van Nitin Ranganath

Abonneer op onze nieuwsbrief

Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!

Klik hier om je te abonneren