Home-theater-designers
Webudviklere på alle færdighedsniveauer, fra rookie -programmører til kodeksperter, kommer til at se vigtigheden af JavaScript i udviklingen af moderne websteder. JavaScript er så dominerende, at det er en væsentlig færdighed at vide, om du vil oprette webapps.
En af de mest kraftfulde byggesten til JavaScript-sproget er arrays. Arrays findes almindeligvis på mange programmeringssprog og er nyttige til lagring af data.
JavaScript indeholder også nyttige funktioner kendt som array -metoder. Her er femten, du bør se nærmere på for at udvikle dine færdigheder som udvikler.
Hvad er Array -metoder?
Array metoder er funktioner indbygget i JavaScript, som du kan anvende på dine arrays. Hver metode har en unik funktion, der udfører en ændring eller beregning på dit array, så du slipper for at skulle kode fælles funktioner fra bunden.
Array-metoder i JavaScript køres ved hjælp af en dot-notation knyttet til din array-variabel. Da de bare er JavaScript -funktioner, slutter de altid med parenteser, der kan indeholde valgfrie argumenter. Her er en metode knyttet til et simpelt array kaldet myArray .
let myArray = [1,2,3]; myArray.pop();Denne kode ville anvende en metode kaldet pop til arrayet.
Eksempel Array
Brug hvert eksempeleksempel, som vi kalder myArray , at udføre metoderne på. Du er velkommen til at trække din konsol op og kode sammen.
let myArray = [2,4,5,7,9,12,14];Disse eksempler antager, at du kender grundlaget for hvad JavaScript er, og hvordan det fungerer . Hvis du ikke gør det, er det okay, vi er alle her for at lære og vokse.
Grav ind i disse femten kraftfulde array -metoder!
1. Array.push ()
Hvad det gør: skubbe() tager dit array og tilføjer et eller flere elementer til slutningen af arrayet, og returnerer derefter matrixens nye længde. Denne metode ændrer dit eksisterende array.
Tilføj tallet 20 til arrayet ved at køre skubbe() , ved hjælp af 20 som argument.
let myArray = [2,4,5,7,9,12,14];
myArray.push(20);Tjek om det fungerede:
console.log(myArray); [2,4,5,7,9,12,14,20]Kører skubbe() metode på myArray tilføjede værdien i argumentet til arrayet. I dette tilfælde 20. Når du tjekker myArray i konsollen, vil du se, at værdien nu tilføjes til slutningen af arrayet.
2. Array.concat ()
Hvad det gør: konkat () kan flette to eller flere arrays til et nyt array. Det ændrer ikke de eksisterende arrays, men opretter et nyt.
Tage myArray og flette et array kaldet newArray ind 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 metode gør underværker ved håndtering af flere arrays eller værdier, du skal kombinere, alt i et ret simpelt trin, når du bruger variabler.
3. Array.join ()
Hvad det gør: tilslutte() tager en matrix og sammenkæder matrixens indhold adskilt af et komma. Resultatet placeres i en snor. Du kan angive en separator, hvis du vil bruge et alternativ til et komma.
Tag et kig på, hvordan dette fungerer ved hjælp af myArray. Brug først standardmetoden uden separatorargument, som vil bruge et komma.
let myArray = [2,4,5,7,9,12,14];
myArray.join(); '2,4,5,7,9,12,14'JavaScript udsender en streng med hver værdi i matrixen adskilt af et komma. Du kan bruge et argument i funktionen til at ændre separatoren. Observer det med to argumenter: et enkelt mellemrum 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 eksempel er et mellemrum, der laver en streng, som du let kan læse.
Det andet eksempel bruger ('og') , og der er to ting at vide her.
Først bruger vi ordet 'og' til at adskille værdierne. For det andet er der et mellemrum på begge sider af ordet 'og'. Dette er en vigtig ting at huske på, når du bruger tilslutte() . JavaScript læser argumenter bogstaveligt; så hvis dette mellemrum udelades, vil alt blive skruet sammen (dvs. '2and4and5 ...' osv.) Ikke et meget læseligt output!
4. Array.forEach ()
Hvad det gør: for hver() (store og små bogstaver!) udfører en funktion på hvert element i din matrix. Denne funktion er enhver funktion, du opretter, svarende til at bruge en 'for' -sløjfe til at anvende en funktion på en matrix, men med meget mindre arbejde med at kode.
Der er lidt mere til for hver() ; se på syntaksen, og udfør derefter en enkel funktion at demonstrere.
myArray.forEach(function(item){
//code
});
Vi bruger myArray , for hver() anvendes med punktnotationen. Du placerer den funktion, du ønsker at bruge, inde i argumentparentesen, dvs. funktion (element) i eksemplet.
Se på funktion (element) . Dette er den funktion, der udføres inde i forEach (), og den har sit eget argument. Vi kalder argumentet vare . Der er to ting at vide om dette argument:
- Når forEach () går over dit array, anvender den koden på dette argument. Tænk på det som en midlertidig variabel, der indeholder det aktuelle element.
- Du vælger navnet på argumentet, det kan navngives hvad du vil. Normalt vil dette blive navngivet noget, der gør det lettere at forstå, f.eks. 'Element' eller 'element'.
Med disse to ting i tankerne, tjek dette enkle eksempel. Tilføj 15 til hver værdi, og lad konsollen vise resultatet.
myArray.forEach(function(item){
console.log(item + 15);
});
Vi bruger vare i dette eksempel som variablen, så funktionen er skrevet for at tilføje 15 til hver værdi via vare . Konsollen udskriver derefter resultaterne. Sådan ser det ud i en Google Chrome -konsol.
Resultatet er hvert tal i arrayet, men med 15 tilføjet til det!
5. Array.map ()
Hvad det gør: kort() udfører en funktion på hvert element i dit array og placerer resultatet i et nyt array.
At køre en funktion på hvert element lyder som forEach (). Forskellen her er kort() opretter et nyt array, når det køres. forEach () opretter ikke automatisk et nyt array, du skal kode en bestemt funktion for at gøre det.
Brug map () til at fordoble værdien af hvert element i myArray, og placer dem i et nyt array. Du vil se det samme funktion (element) syntaks for lidt mere øvelse.
let myArray = [2,4,5,7,9,12,14]; let doubleArray = myArray.map(function(item){
return item * 2;
});Kontroller resultaterne i konsollen.
console.log(doubleArray); [4,8,10,14,18,24,28]myArray er uændret:
console.log(myArray); [2,4,5,7,9,12,14]6. Array.unshift ()
Hvad det gør: I lighed med hvordan push () -metoden fungerer, bruges unshift () method tager dit array og tilføjer et eller flere elementer til arrayets start i stedet for slutningen, og returnerer arrayets nye længde. Denne metode ændrer dit eksisterende array.
let myArray = [2,4,5,7,9,12,14];
myArray.unshift(0);Når du logger arrayet til konsollen, skal du se tallet 0 i starten af arrayet.
console.log(myArray); [0, 2,4,5,7,9,12,14]7. Array.sort ()
Hvad det gør: Sortering er en af de mest almindelige operationer, der udføres på en matrix, og er meget nyttig. JavaScript's sortere() array -metode kan bruges til at sortere en række tal eller endda strenge med kun en enkelt kodelinje. Denne handling er på plads og returnerer det sorterede array ved at ændre det oprindelige array. Tag et andet sæt tal for myArray denne gang.
let myArray = [12, 55, 34, 65, 10];
myArray.sort((a,b) => a - b);Da sorteringen er udført på plads, behøver du ikke at deklarere en separat variabel for det sorterede array.
console.log(myArray); [10, 12, 34, 55, 65]Som standard er matrixen sorteret i stigende rækkefølge, men du kan eventuelt overføre en brugerdefineret funktion til sortere() metode til at sortere arrayet på den ønskede måde. I dette tilfælde bestod jeg en skik pilfunktion at sortere arrayet numerisk i stigende rækkefølge.
8. Array.reverse ()
Hvad det gør: Som navnet antyder, er baglæns() metode bruges til at vende rækkefølgen af elementer i arrayet. Bemærk, at dette ikke vender indholdet i arrayet, men kun selve ordren. Her er et eksempel for at forstå denne metode bedre:
let myArray = [2,4,5,7,9,12,14];
myArray.reverse()Log outputtet til konsollen for at kontrollere operationen.
console.log(myArray); [14, 12, 9, 7, 5, 4, 2]Som du kan se, er rækkefølgen af elementerne blevet vendt. Tidligere er elementet ved det sidste indeks (element 14 ved indeks 6) nu elementet ved nulindekset og så videre.
9. Array.slice ()
Hvad det gør: skive() bruges til at hente en lav kopi af en del af en matrix. I enklere termer giver denne metode dig mulighed for at vælge bestemte elementer fra en matrix efter deres indeks. Du kan videregive startindekset for det element, som du vil hente, og elementer og eventuelt også slutindekset.
Hvis du ikke angiver slutindekset, hentes alle elementerne fra startindekset til slutningen af arrayet. Denne metode returnerer et nyt array og ændrer ikke det eksisterende.
let myArray = [2,4,5,7,9,12,14];
let slicedArray = myArray.slice(2);I koden ovenfor hentes alle elementerne fra det andet indeks til det sidste indeks, da slutindeksparameteren ikke er bestået. Log begge arrays til konsollen.
console.log(myArray);
console.log(slicedArray); [2, 4, 5, 7, 9, 12, 14]
[5, 7, 9, 12, 14]
Det indledende array ændres åbenbart ikke ved metoden slice () og returnerer i stedet et nyt array, der er gemt i skiverArray variabel. Her er et eksempel, hvor parameteren slutindeks 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 ()
Hvad det gør: splejs () er en nyttig matrixmetode, der bruges til at fjerne eller udskifte elementer i arrayet på plads. Ved at angive indekset og antallet af elementer, der skal slettes, ændrer det arrayet.
let myArray = [2,4,5,7,9,12,14];
myArray.splice(2, 3);
console.log(myArray);I ovenstående eksempel er myArray array er splejset fra indeks 2, og 3 elementer fjernes fra det. Arrayen består nu af:
[2, 4, 12, 14]For at erstatte elementerne i stedet for bare at slette dem, kan du sende et vilkårligt antal valgfrie parametre med de elementer, du vil erstatte med, som dette:
hvordan man streamer pc -spil til tv
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 ()
Hvad det gør: filter() method er en nyttig array -metode, der tager en funktion, der indeholder en test og returnerer en ny array med alle de elementer, der består den test. Tro mod sit navn bruges denne metode til at filtrere de elementer, du har brug for, fra de andre elementer. Filtreringen udføres ved hjælp af en funktion, der returnerer en boolsk værdi.
Her er et eksempel på filter() metode, der bruges til kun at hente de elementer fra arrayet, der er delelige med 2.
let myArray = [2,4,5,7,9,12,14];
let divisibleByTwo = myArray.filter((number) => number % 2 === 0);
console.log(divisibleByTwo);I ovenstående eksempel sendes en pilfunktion som parameteren, der tager hvert nummer fra det originale array og kontrollerer, om det er delbart med 2 ved hjælp af modulo ( % ) og lighed ( === ) operatør. Sådan ser output ud:
[2, 4, 12, 14]12. Array.reduce ()
Hvad det gør: reducere() er en array -metode, der tager en reducer -funktion og udfører den på hvert array -element for at udsende en enkelt værdi, mens den returnerer. Det tager en reduktionsfunktion med en akkumulatorvariabel og en aktuel elementvariabel som nødvendige parametre. Akkumulatorens værdi huskes på tværs af alle iterationer og returneres i sidste ende efter den sidste iteration.
Et populært eksempel på denne metode er at beregne summen af alle elementerne i arrayet. Implementeringen af denne funktionalitet 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 anden parameter i ovenstående eksempel, som bruges som den oprindelige værdi af akkumulatorvariablen. Det sumOfNums variabel indeholder returværdien af reducere() metode, der forventes at være summen af alle elementer i arrayet.
console.log(sumOfNums); 5313. Array. Inkluderer ()
Hvad det gør: Søgning efter et element i en matrix for at kontrollere, om det er til stede, er en operation, der bruges ret ofte, og derfor har JavaScript en indbygget metode til dette i form af inkluderer () array -metode. Sådan kan du bruge det:
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 metode tager en påkrævet parameter, det element, der skal søges efter, og en valgfri parameter, arrayindekset, hvorfra man kan begynde at søge. Afhængigt af om elementet er til stede eller ej, vender det tilbage sand eller falsk henholdsvis. Derfor vil output være:
true
false
true
false14. Array.indexOf ()
Hvad det gør: indeks af() metode bruges til at finde ud af det indeks, hvor den første forekomst af et specifikt element kan findes i arrayet. Selvom den ligner metoden inkluderer (), returnerer denne metode det numeriske indeks eller -1, hvis elementet ikke er til stede i matrixen.
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));indeks af() metode bruger streng lighed for at kontrollere, om der er et element, hvilket betyder, at værdien samt datatypen skal være den samme. Den valgfri anden parameter tager indekset til at begynde at søge fra. Baseret på disse kriterier vil output se sådan ud:
1
-1
415. Array.fill ()
Hvad det gør: Ofte skal du muligvis indstille alle værdierne i arrayet til en statisk værdi som f.eks. 0. I stedet for at bruge en loop, kan du prøve fylde() metode til samme formål. Du kan kalde denne metode på en matrix med 1 påkrævet parameter: værdien, du skal fylde arrayet med og 2 valgfrie parametre: start- og slutindekset, der skal udfyldes mellem. Denne metode ændrer det spændende 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);Når du logger output 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]Næste trin i din JavaScript -rejse
Arrays er en stærk del af JavaScript-sproget, og derfor er der så mange indbyggede metoder til at gøre dit liv lettere som udvikler. Den bedste måde at mestre disse femten metoder på er at øve.
Når du fortsætter med at lære JavaScript, MDN er en stor ressource for detaljeret dokumentation. Bliv komfortabel i konsollen, og tag dine færdigheder op i et hak med de bedste JavaScript -redaktører til programmører. Er du klar til at bygge dit websted med JavaScript? Hvorfor ikke tage et kig på nogle rammer, du kan overveje.
Del Del Tweet E -mail 6 JavaScript -rammer værd at læreDer er mange JavaScript -rammer derude til at hjælpe med udvikling. Her er nogle, du bør vide.
Læs Næste Relaterede emner- Programmering
- JavaScript
- Kodningstip
Nitin er en ivrig softwareudvikler og en computeringeniørstuderende, der udvikler webapplikationer ved hjælp af JavaScript -teknologier. Han arbejder som freelance webudvikler og kan lide at skrive til Linux og programmering i fritiden.
Mere fra Nitin RanganathAbonner på vores nyhedsbrev
Tilmeld dig vores nyhedsbrev for at få tekniske tips, anmeldelser, gratis e -bøger og eksklusive tilbud!
Klik her for at abonnere