15 JavaScript -matrisemetoder du bør mestre i dag

Webutviklere på alle ferdighetsnivåer, fra nybegynnere til programmeringseksperter, ser viktigheten av JavaScript for å utvikle moderne nettsteder. JavaScript er så dominerende at det er en viktig ferdighet å vite om du skal lage webapper.

En av de kraftigste byggesteinene som er innebygd i JavaScript-språket, er matriser. Arrays finnes ofte på mange programmeringsspråk og er nyttige for lagring av data.

JavaScript inneholder også nyttige funksjoner kjent som matrisemetoder. Her er femten du bør ta en nærmere titt på for å vokse dine ferdigheter som utvikler.

Hva er matrisemetoder?

Array metoder er funksjoner innebygd i JavaScript som du kan bruke på matrisene dine. Hver metode har en unik funksjon som utfører en endring eller beregning på matrisen, slik at du ikke trenger å kode vanlige funksjoner fra bunnen av.

Arraymetoder i JavaScript kjøres ved hjelp av en punktnotasjon knyttet til matrisevariabelen. Siden de bare er JavaScript -funksjoner, slutter de alltid med parentes som kan inneholde valgfrie argumenter. Her er en metode knyttet til en enkel matrise kalt myArray .

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

Denne koden vil anvende en metode som kalles pop til matrisen.

Eksempel Array

Bruk et eksempelarray som vi kaller for hvert eksempel myArray , for å utføre metodene på. Ta gjerne opp konsollen og kode sammen.

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

Disse eksemplene antar at du kjenner grunnlaget for hva JavaScript er og hvordan det fungerer . Hvis du ikke gjør det, er vi alle her for å lære og vokse.

Grav inn i disse femten kraftige matrisemetodene!

1. Array.push ()

Hva det gjør: trykk() tar matrisen din og legger til ett eller flere elementer til slutten av matrisen, og returnerer deretter den nye lengden på matrisen. Denne metoden vil endre den eksisterende matrisen.

Legg til tallet 20 i matrisen ved å kjøre trykk() , bruker 20 som argument.

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

Sjekk om det fungerte:

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

Kjører trykk() method on myArray la verdien gitt i argumentet inn i matrisen. I dette tilfellet 20. Når du sjekker myArray i konsollen, vil du se at verdien nå er lagt til slutten av matrisen.

2. Array.concat ()

Hva det gjør: konkat () kan slå sammen to eller flere matriser til en ny matrise. Den endrer ikke de eksisterende matrisene, men oppretter en ny.

Ta myArray og slå sammen en matrise kalt newArray i det.

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]

Denne metoden gjør underverker når du arbeider med flere matriser eller verdier du må kombinere, alt i ett ganske enkelt trinn når du bruker variabler.

3. Array.join ()

Hva det gjør: bli med() tar en matrise og kobler sammen innholdet i matrisen, atskilt med et komma. Resultatet legges i en streng. Du kan angi en separator hvis du vil bruke et alternativ til komma.

Ta en titt på hvordan dette fungerer med myArray. Bruk først standardmetoden uten separatorargument, som bruker et komma.

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

'2,4,5,7,9,12,14'

JavaScript sender ut en streng, med hver verdi i matrisen atskilt med et komma. Du kan bruke et argument i funksjonen til å endre skilletegnet. Observer det med to argumenter: et enkelt mellomrom og en streng.

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'

Det første eksemplet er et mellomrom, og lager en streng du enkelt kan lese.

Det andre eksemplet bruker ('og') , og det er to ting å vite her.

Først bruker vi ordet 'og' for å skille verdiene. For det andre er det et mellomrom på begge sider av ordet 'og'. Dette er en viktig ting å huske på når du bruker bli med() . JavaScript leser argumenter bokstavelig talt; så hvis denne plassen blir utelatt, vil alt bli skrudd sammen (dvs. '2and4and5 ...' etc.) Ikke en veldig lesbar utgang!

4. Array.forEach ()

Hva det gjør: for hver() (store og små bokstaver!) utfører en funksjon på hvert element i matrisen. Denne funksjonen er hvilken som helst funksjon du oppretter, på samme måte som å bruke en 'for' -løkke for å bruke en funksjon på en matrise, men med mye mindre arbeid for å kode.

Det er litt mer å gjøre for hver() ; se på syntaksen, og utfør deretter en enkel funksjon for å demonstrere.

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

Vi bruker myArray , for hver() brukes med prikknotasjonen. Du plasserer funksjonen du ønsker å bruke inne i argumentparentesen, som er funksjon (element) i eksemplet.

Se på funksjon (element) . Dette er funksjonen som utføres inne i forEach (), og den har sitt eget argument. Vi kaller argumentet punkt . Det er to ting å vite om dette argumentet:

Når forEach () går over matrisen, bruker den koden på dette argumentet. Tenk på det som en midlertidig variabel som inneholder det nåværende elementet.
Du velger navnet på argumentet, det kan navngis hva du vil. Vanligvis vil dette bli kalt noe som gjør det lettere å forstå, for eksempel 'element' eller 'element'.

Med disse to tingene i tankene, sjekk ut dette enkle eksemplet. Legg til 15 til hver verdi, og la konsollen vise resultatet.

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

Vi bruker punkt i dette eksemplet som variabelen, så funksjonen er skrevet for å legge 15 til hver verdi via punkt . Konsollen skriver deretter ut resultatene. Slik ser det ut i en Google Chrome -konsoll.

Resultatet er hvert tall i matrisen, men med 15 lagt til det!

5. Array.map ()

Hva det gjør: kart() utfører en funksjon på hvert element i matrisen og plasserer resultatet i en ny matrise.

Å kjøre en funksjon på hvert element høres ut som forEach (). Forskjellen her er kart() oppretter en ny matrise når den kjøres. forEach () oppretter ikke en ny matrise automatisk, du må kode en bestemt funksjon for å gjøre det.

Bruk map () til å doble verdien av hvert element i myArray, og plasser dem i en ny matrise. Du vil se det samme funksjon (element) syntaks for litt mer øvelse.

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

let doubleArray = myArray.map(function(item){  
return item * 2;  
});

Sjekk resultatene i konsollen.

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

myArray er uendret:

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

6. Array.unshift ()

Hva den gjør: I likhet med hvordan push () -metoden fungerer, unshift () method tar matrisen din og legger til ett eller flere elementer i starten av matrisen i stedet for slutten, og returnerer den nye lengden på matrisen. Denne metoden vil endre den eksisterende matrisen.

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

Når du logger matrisen til konsollen, bør du se tallet 0 i begynnelsen av matrisen.

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

7. Array.sort ()

Hva det gjør: Sortering er en av de vanligste operasjonene som utføres på en matrise og er svært nyttig. JavaScript sortere() matrisemetode kan brukes til å sortere en rekke tall eller til og med strenger med bare en enkelt kodelinje. Denne operasjonen er på plass og returnerer den sorterte matrisen ved å endre den opprinnelige matrisen. Ta et annet sett med tall for myArray denne gangen.

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

Siden sorteringen er gjort på plass, trenger du ikke å deklarere en egen variabel for den sorterte matrisen.

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

Som standard er matrisen sortert i stigende rekkefølge, men du kan eventuelt sende en egendefinert funksjon til sortere() metode for å sortere matrisen på ønsket måte. I dette tilfellet besto jeg en skikk pilfunksjon for å sortere matrisen numerisk i stigende rekkefølge.

8. Array.reverse ()

Hva det gjør: Som navnet antyder, er omvendt() metode brukes til å reversere rekkefølgen på elementer i matrisen. Vær oppmerksom på at dette ikke reverserer innholdet i matrisen, men bare selve ordren. Her er et eksempel for å forstå denne metoden bedre:

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

Logg utgangen til konsollen for å bekrefte operasjonen.

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

Som du kan se har rekkefølgen på elementene blitt reversert. Tidligere er elementet ved den siste indeksen (element 14 ved indeks 6) nå elementet ved nullindeksen og så videre.

9. Array.slice ()

Hva det gjør: skive() brukes til å hente en grunne kopi av en del av en matrise. I enklere termer lar denne metoden deg velge bestemte elementer fra en matrise etter deres indeks. Du kan passere startindeksen for elementet du vil hente fra og elementer og eventuelt sluttindeksen også.

Hvis du ikke oppgir sluttindeksen, vil alle elementene fra startindeksen til slutten av matrisen bli hentet. Denne metoden returnerer en ny matrise og endrer ikke den eksisterende.

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

I koden ovenfor blir alle elementene fra den andre indeksen til den siste indeksen hentet siden sluttindeksparameteren ikke er bestått. Logg begge matrisene til konsollen.

console.log(myArray);  
console.log(slicedArray);

[2, 4, 5, 7, 9, 12, 14]  
[5, 7, 9, 12, 14]

Tydeligvis endres ikke den opprinnelige matrisen med slice () -metoden og returnerer i stedet en ny matrise som er lagret i skiverArray variabel. Her er et eksempel der sluttindeksparameteren også sendes til skive() metode.

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

[4, 5]

10. Array.splice ()

Hva det gjør: spleise () er en nyttig matrisemetode som brukes til å fjerne eller erstatte elementer i matrisen på plass. Ved å angi indeksen og antall elementer som skal slettes, endrer den matrisen.

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

I eksemplet ovenfor er myArray array er spleiset fra indeks 2 og 3 elementer blir fjernet fra den. Arrayen består nå av:

[2, 4, 12, 14]

For å erstatte elementene i stedet for bare å slette dem, kan du sende et valgfritt antall parametere med elementene du vil erstatte med, slik:

beste stedet å kjøpe musikk -CDer på nettet

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. Array.filter ()

Hva den gjør: filter() method er en nyttig matrisemetode som tar en funksjon som inneholder en test og returnerer en ny matrise med alle elementene som består den testen. Tro mot navnet sitt, brukes denne metoden for å filtrere elementene du trenger fra de andre elementene. Filtreringen utføres ved hjelp av en funksjon som returnerer en boolsk verdi.

Her er et eksempel på filter() metode som brukes for å få bare de elementene fra matrisen som er delbare med 2.

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

I eksemplet ovenfor sendes en pilfunksjon som parameteren som tar hvert tall fra den opprinnelige matrisen og sjekker om det er delbart med 2 ved hjelp av modulo ( % ) og likestilling ( === ) operatør. Slik ser utgangen ut:

[2, 4, 12, 14]

12. Array.reduce ()

Hva det gjør: redusere() er en matrisemetode som tar en reduksjonsfunksjon og utfører den på hvert matriseelement for å sende ut en enkelt verdi mens du returnerer. Det tar en reduksjonsfunksjon med en akkumulatorvariabel og en nåværende elementvariabel som nødvendige parametere. Akkumulatorens verdi huskes på tvers av alle iterasjonene og returneres til slutt etter den siste iterasjonen.

Et populært brukstilfelle for denne metoden er å beregne summen av alle elementene i matrisen. Implementeringen av denne funksjonaliteten er som følger:

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

0 sendes som den andre parameteren i eksemplet ovenfor, som brukes som startverdien til akkumulatorvariabelen. De sumOfNums variabelen vil inneholde returverdien av redusere() metode som forventes å være summen av alle elementene i matrisen.

console.log(sumOfNums); 53

13. Array. Inkluderer ()

Hva det gjør: Å søke etter et element i en matrise for å sjekke om det er tilstede er en operasjon som brukes ganske ofte, og derfor har JavaScript en innebygd metode for dette i form av inkluderer () matrisemetode. Slik kan du bruke den:

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));

Denne metoden tar en nødvendig parameter, elementet å søke etter, og en valgfri parameter, matrisindeksen som søket skal begynne fra. Avhengig av om elementet er tilstede eller ikke, kommer det tilbake ekte eller falsk henholdsvis. Derfor vil utgangen være:

true  
false  
true  
false

14. Array.indexOf ()

Hva det gjør: oversikt over() metode brukes for å finne ut indeksen der den første forekomsten av et spesifisert element kan bli funnet i matrisen. Selv om den ligner metoden inkluderer (), returnerer denne metoden den numeriske indeksen eller -1 hvis elementet ikke er til stede i matrisen.

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));

oversikt over() metoden bruker streng likhet for å sjekke om et element er tilstede, noe som betyr at verdien, så vel som datatypen, skal være den samme. Den valgfrie andre parameteren tar indeksen til å begynne å søke fra. Basert på disse kriteriene vil utgangen se slik ut:

1  
-1  
4

15. Array.fill ()

Hva det gjør: Ofte må du kanskje sette alle verdiene i matrisen til en statisk verdi som 0. I stedet for å bruke en loop, kan du prøve fylle() metode for samme formål. Du kan kalle denne metoden på en matrise med 1 nødvendig parameter: verdien å fylle matrisen med og 2 valgfrie parametere: start- og sluttindeksen som skal fylles mellom. Denne metoden endrer den spennende matrisen.

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);

Når du logger utgangen til konsollen, ser du:

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]

Neste trinn i din JavaScript -reise

Arrays er en kraftig del av JavaScript-språket, og det er derfor det er så mange metoder innebygd for å gjøre livet ditt lettere som utvikler. Den beste måten å mestre disse femten metodene på er å øve.

Når du fortsetter å lære JavaScript, MDN er en flott ressurs for detaljert dokumentasjon. Bli komfortabel i konsollen, og ta ferdighetene dine et hakk med de beste JavaScript -redaktørene for programmerere. Klar til å bygge nettstedet ditt med JavaScript? Hvorfor ikke ta en titt på noen rammer du kan vurdere.

Dele Dele kvitring E -post 6 JavaScript -rammer som er verdt å lære

Det er mange JavaScript -rammer der ute for å hjelpe til med utvikling. Her er noen du bør vite.

Les neste Relaterte temaer

Programmering
JavaScript
Kodetips

Om forfatteren Nitin Ranganath(31 artikler publisert)

Nitin er en ivrig programvareutvikler og en dataingeniørstudent som utvikler webapplikasjoner ved hjelp av JavaScript -teknologier. Han jobber som frilans webutvikler og liker å skrive for Linux og programmering på fritiden.

Mer fra Nitin Ranganath

Abonner på vårt nyhetsbrev

Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis ebøker og eksklusive tilbud!

Klikk her for å abonnere