Dette er del 6 af JavaScript blogindlæg serien, der vil tage dig fra nybegynder til avanceret. Ved slutningen af denne serie vil du kende alle de grundlæggende ting, du har brug for at vide for at begynde at kode i JavaScript. Uden videre, lad os komme i gang med den sjette tutorial.

Java array – indholdsfortegnelse:

  1. Arrays – grundlæggende information
  2. Tilføje elementer til et java array
  3. Fjerne elementer fra et array
  4. Find længden i arrays
  5. Sortere arrays
  6. Omvendte elementer i arrays
  7. For hver
  8. Inkluderer i arrays

Denne tutorial forudsætter, at du har et kodemiljø allerede opsat. Hvis du har fulgt de tidligere tutorials, bør du allerede have det åbent. Hvis du af en eller anden grund har lukket dit setup, kan du finde de fulde opsætningsinstruktioner i Del 4 af denne serie. I den tutorial gennemgår vi, hvordan du opsætter dit Google Chrome Snippets-miljø til kodning.

Hvis du er nogenlunde komfortabel med at bruge Google Chrome, er her en hurtig måde at komme i gang med denne tutorial, ellers kan du tjekke Del 4 for det fulde sæt trin-for-trin instruktioner om, hvordan du opsætter dit kodemiljø.

Hvis du er på en Mac, er tastaturgenvejen til at åbne konsollen at trykke på “Option + Command + J”, efter du har åbnet Chrome. Hvis du bruger en Windows-enhed, kan du bruge tastaturgenvejen “Control + Shift + J” for at åbne JavaScript-konsollen, når du åbner Chrome. Eller du kan også gå til menuen øverst og gå til Vis -> Udvikler -> JavaScript-konsol. Når du har åbnet konsollen, kan du klikke på “Kilder”-fanen, som ligger lige ved siden af “Konsol”. Nu skulle du kunne se Snippets. Du kan enten fortsætte med at kode i et snippet, du allerede er begyndt at bruge før, eller du kan oprette et nyt Snippet ved at klikke på knappen “+ Nyt snippet”. Så længe du har et kodemiljø opsat til denne tutorial, hvor du kan øve dig, er du klar til at gå.

Java array – grundlæggende information

Arrays bruges meget i mange programmeringssprog, og JavaScript er ingen undtagelse. Og det er der en god grund til. Men du undrer dig måske over, hvad et array er for at starte med? Arrays er i bund og grund en samling af relaterede data, der kan tilgås og manipuleres med visse definerede metoder. Lad os se nogle eksempler på et array for at få en mere komplet forståelse.

1
2
3
const numbersUntilTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const testAnswers = [true, true, false, false, true];
const pets = ["dogs", "cats", "birds", "fishes"];

Vi kan bruge et java array til at gemme flere forskellige slags data. For eksempel har vi i koden ovenfor gemt nogle tal, booleans samt strenge datatyper.

Vi kan oprette et java array ligesom vi opretter andre variabler, med enten const eller let nøgleordene på venstre side og indholdet af arrays på højre side af ligningerne. En ting, du skal være opmærksom på, er at når vi opretter arrays, bruger vi firkantede parenteser til at omgive elementerne, ligesom vi gjorde i koden ovenfor. Vi adskiller også hvert element med et komma imellem, uanset deres datatyper.

I denne tutorial vil vi skrive kode på en måde, så du kan kopiere og indsætte alt i denne tutorial, sekventielt, eller skrive alt ud, i et JavaScript snippet i Chrome, og det vil fungere som forventet, forudsat at du følger rækkefølgen. For eksempel betyder det for dig, at hvis vi definerer en variabel med const nøgleordet én gang i tutorialen, kan du normalt ikke definere en anden variabel med det præcise samme navn igen. Derfor, hvis du vil kopiere og indsætte noget af koden delvist, er det en god idé at sikre, at du også definerer de variabler i din kode. Dette bør ikke være et problem, hvis du følger tutorialen i den rækkefølge, den præsenteres.

En af de første ting, du skal vide om et java array, er, at når du har oprettet et array, skal du tilgå dets elementer. Arrays har noget, der kaldes “nummererede indekser”, og hvad dette betyder for dig i praksis er, at hvert element, du opretter i JavaScript, har et nummer, der er knyttet til det fra venstre mod højre, fra nul til længden af java arrayet minus én.

For eksempel, i koden ovenfor for kæledyr, kan vi tilgå det første element af “dogs” ved at skrive navnet på variablen, åbne firkantede parenteser, indsætte indekset for det element, vi vil tilgå, og lukke den firkantede parentes:

1
alert(pets[0]);
java_array

På samme måde vil højere tal udløse visning af andre elementer i den alert-boks, vi viser.

1
2
3
alert(pets[1]);
alert(pets[2]);
alert(pets[3]);
java_array java_array java_array

Da vi havde 4 elementer i kæledyr arrayet, og vi startede indekserne fra 0, tilgås det sidste element i arrayet med pets[3], som er 1 mindre end den samlede længde af arrayet. På dette tidspunkt undrer du dig måske over, nu hvor vi kan oprette et array og tilgå et element fra det array, hvordan med at lave ændringer i det array? Hvordan med at tilføje nye elementer, ændre eksisterende elementer eller slette elementer? Nå, lad os tage det trin for trin og starte med at tilføje nye elementer til et array.

Tilføje elementer til et java array

Der er flere måder, vi kan tilføje forskellige elementer til et array. Hvis vi ved, at vi vil tilføje det nye element til slutningen af arrayet, kan vi bruge “push” metoden. Dette kaldes også at skubbe et nyt element ind i arrayet. Bemærk, at det skubbede element vil komme til slutningen af arrayet. For eksempel:

1
2
3
4
pets.push("snakes");
// lad os bekræfte, at vi har slanger som det sidste element
// ved at vise indholdet af arrayet
alert(pets);
java_array

Hvis vi ved, at vi specifikt vil tilføje et element til java arrayet som det første element, kan vi bruge nøgleordet “unshift”. Lad os se det med et eksempel:

1
2
3
4
5
// at køre denne kode vil flytte alle værdier
// til den ene side og vil tilføje det første kæledyr af drage
pets.unshift(“dragons”);
// lad os bekræfte dette ved at vise indholdet af arrayet
alert(pets);
java_array

Det er fantastisk, at vi kan tilføje elementer til slutningen af arrayet eller til begyndelsen af arrayet, men hvad hvis jeg af en eller anden grund vil injicere elementer til arrayet på specifikke positioner. Lad os sige, at jeg vil tilføje skildpadder til den tredje position. Er det overhovedet muligt? Ja, det er det. For at injicere et element til et array kan vi definere det ligesom at oprette den del af arrayet og tildele en værdi til den specifikke del af arrayet. Glem heller ikke at bruge indeksværdier, mens du indsætter værdier. Fra et praktisk synspunkt ser det sådan ud:

1
2
3
4
pets[2] = "turtles";
// lad os bekræfte, at vi har skildpadder som det tredje element
// ved at vise indholdet af arrayet
alert(pets);
java_array

Fjerne elementer fra et array

På dette tidspunkt undrer du dig måske over, hvordan man fjerner elementer fra et array? Nå, der er også flere måder til det. Sandsynligvis den mest berømte er at bruge “pop” metoden. Dette vil på en måde fjerne dit sidste element fra et array. // dette vil fjerne det sidste element i arrayet pets.pop(); // lad os bekræfte resultaterne ved at vise indholdet af arrayet alert(pets); java_array

Som du kan se, har vi med pop metoden fjernet det sidste kæledyrselement af slanger fra vores kæledyr array.

En anden måde, du kan fjerne elementer fra et java array, er at bruge nøgleordet “shift”. Når vi bruger shift, vil det første element blive slettet, og resten af indeksværdierne vil tilpasse sig dem. For eksempel:

1
2
3
4
5
6
// dette vil slette det første element
// og vil flytte de andre elementer til deres nye indeksværdier
// som vil være en lavere end de tidligere indeksværdier
pets.shift();
// lad os også bekræfte dette ved at vise arrayet
alert(pets);
java_array

Navnet “shift” kommer faktisk fra, hvordan hukommelsesallokeringen fungerer i computerhukommelse. Så hvis det virker relativt unintuitivt i starten, er det helt fint. For nu skal du vide, at ved at bruge shift metoden kan vi fjerne det første element fra et array.

Find længden i arrays

Når vi arbejder med arrays i det virkelige liv, kan der være mange gange, hvor vi vil tælle antallet af arrayelementer. Dette kan være nødvendigt i en række forskellige situationer, herunder i to-do lister, deltagerlister i skolen eller på arbejdet, og så videre. For at opnå netop det har vi en indbygget array-egenskab kaldet “length”, og den vil fortælle os den samlede længde af arrayet. For eksempel:

1
alert(pets.length);
java_array

Sortere arrays

At sortere arrays er en ret almindelig operation i JavaScript. Der er forskellige specifikke implementeringer til at sortere elementer i JavaScript. Disse specifikke implementeringer kaldes generelt sorteringsalgoritmer. Forskellige sorteringsalgoritmer kan have forskellige fordele og ulemper. For eksempel kan en sorteringsalgoritme vælges frem for en anden, fordi den simpelthen er meget lettere at implementere i kode, sammenlignet med en anden, selvom de måske viser lidt bedre ydeevne. Du har måske hørt om forskellige sorteringsalgoritmer for optimeret ydeevne. I denne tutorial vil vi udnytte den indbyggede sorteringsmetode, der tilbydes af JavaScript. Sortering er et ret almindeligt problem, især inden for webudvikling. For eksempel, hvis du bygger en e-handelswebsted, skal du implementere forskellige sorteringsmuligheder for dine brugere at vælge imellem. Selvom der ikke er strenge regler for, hvilke muligheder og funktioner du skal give dit publikum, er der ret almindelige standarder, der forventes af dig som webstedbygger. For eksempel, som bruger, er der en stor chance for, at du måske vil liste nogle butikselementer i både stigende pris og faldende pris. Når du implementerer sorteringen for disse opgaver, skal du huske at implementere det, givet at brugeren også kan begrænse søgeresultaterne til visse andre kategorier, såsom t-shirts, hatte, tasker og så videre. Vi kan sortere et array ved at tilføje “.sort()” til slutningen af det.

1
2
pets.sort();
alert(pets);
java_array

Omvendte elementer i arrays

At omvende et array er sandsynligvis mere almindeligt at kombinere med sortering. I dette tilfælde, fordi vi også udfører disse koder fra top til bund, anvender vi også omvendelsen efter sorteringen af arrayet. Vi kan omvende et array ved at tilføje “.reverse()” til slutningen af det. pets.reverse(); alert(pets); java_array

Fordi vi har sorteret arrayet i det forrige trin, kan du se, at vi nu har et array, der både er sorteret og omvendt.

For hver

Når vi arbejder med arrays, giver JavaScript os en praktisk måde at loope over arrayelementerne med “.forEach()”. Hvis vi virkelig vil, kan vi stadig bruge en almindelig for-løkke til at loope over et array. Faktisk lad os først se, hvordan man konstruerer en for-løkke til at loope over et array, så vil vi se brugen af forEach().

1
2
3
4
// dette vil advare os 4 gange om at fodre vores kæledyr
for (let a = 0; a < pets.length; a++) {
    alert("Tid til at fodre mit kæledyr");
}
java_array

Vi kan også opnå det samme resultat ved at bruge forEach.

1
pets.forEach(alert("Tid til at fodre mit kæledyr"));
java_array

Når vi sammenligner brugen af for-løkker eller forEach, afhængigt af dine præferencer og din specifikke situation, kan du foretrække at bruge en af dem frem for den anden. I essensen opnår de begge de samme resultater med forskellige stilarter i koden. ForEach kan være relativt lettere og spare dig en linje kode at læse og skrive, men det vil i sidste ende være dit valg. Du behøver ikke at træffe et sådant valg lige nu og holde dig til det. Mens du skriver kode, kan du eksperimentere med at løse det samme problem ved hjælp af forskellige tilgange, mens du bevæger dig i din programmeringsrejse.

Inkluderer i arrays

Vi kan også tjekke, om et element findes inde i et java array. Et eksempel på en virkelig anvendelse af denne metode ville være, om en privat begivenhed inkluderer en persons navn på invitationslisten. Den faktiske implementering er også ret ligetil. Vi skriver først navnet på arrayet, i dette tilfælde arbejder vi med kæledyr arrayet. Så sætter vi et punktum for at få adgang til forskellige arrayegenskaber og metoder, så skriver vi “includes”, åbner og lukker parenteser, og skriver navnet på det element, vi vil tjekke indeni. Her er et eksempel, der tjekker et element, vi ved eksisterer i arrayet:

1
alert(pets.includes("dogs"));
java_array

Hvis vi også prøver det samme med et element, vi ved ikke eksisterer i java arrayet, forventer vi at modtage false som svar. Lad os også se det tilfælde med et eksempel:

alert(pets.includes("puppy")); [/code> java_array

Da vi ikke havde nogen hvalp i kæledyr arrayet, får vi false, som vi forventede. I den næste tutorial vil vi se et andet stort koncept i både programmeringsverdenen og i JavaScript.

Robert Whitney

JavaScript-ekspert og instruktør, der coacher IT-afdelinger. Hans hovedmål er at hæve teamproduktiviteten ved at lære andre, hvordan man effektivt samarbejder, mens man koder.

View all posts →