Java-array. Del 6 JavaScript-kurs från nybörjare till avancerad på 10 blogginlägg

Detta är del 6 av blogginläggsserien om JavaScript som tar dig från nybörjare till avancerad. I slutet av denna serie kommer du att känna till alla grunder du behöver för att börja koda i JavaScript. Utan vidare ado, låt oss börja med den sjätte handledningen.

Java-array – innehållsförteckning:

1. Arrayer – grundläggande information
2. Lägga till objekt i en java-array
3. Ta bort objekt från en array
4. Ta reda på längd i arrayer
5. Sortera arrayer
6. Vända element i arrayer
7. För varje
8. Inkluderar i arrayer

Denna handledning förutsätter att du har en kodningsmiljö redan inställd. Om du har följt de tidigare handledningarna bör du redan ha den öppen. Om du av någon anledning har stängt din inställning kan du hitta hela installationsanvisningarna i Del 4 av denna serie. I den handledningen går vi igenom hur du ställer in din Google Chrome Snippets-miljö för kodning.

Om du är ganska bekväm med att använda Google Chrome, här är ett snabbt sätt att ställa in för denna handledning, annars kan du kolla in Del 4 för hela uppsättningen steg-för-steg-instruktioner om hur du ställer in din kodningsmiljö.

Om du använder en Mac är kortkommandot för att öppna konsolen att trycka på “Option + Command + J”, efter att du har öppnat Chrome. Om du använder en Windows-enhet kan du använda kortkommandot “Control + Shift + J” för att öppna JavaScript-konsolen, när du har öppnat Chrome. Eller så kan du också gå till menyn högst upp och gå till Visa -> Utvecklare -> JavaScript-konsol. När du har öppnat konsolen kan du klicka på fliken “Källor”, som ligger precis bredvid “Konsol”. Nu bör du se Snippets. Du kan antingen fortsätta koda i en snippet du redan har börjat använda tidigare, eller så kan du skapa en ny Snippet genom att klicka på knappen “+ Ny snippet”. Så länge du har en kodningsinställning för denna handledning där du kan öva, är du redo att gå.

Java-array – grundläggande information

Arrayer används mycket i många programmeringsspråk och JavaScript är inget undantag. Och det är av en god anledning. Men du kanske undrar vad en array är till att börja med? Arrayer är i grunden en samling av relaterad data som kan nås och manipuleras med vissa definierade metoder. Låt oss se några exempel på en array för att få en mer komplett förståelse.

const numbersUntilTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const testAnswers = [true, true, false, false, true];
const pets = ["hundar", "katter", "fåglar", "fiskar"];

Vi kan använda en java-array för att lagra flera olika typer av data. Till exempel, i koden ovan har vi lagrat några nummer, booleaner samt strängdatatyp.

Vi kan skapa en java-array precis som vi skapar andra variabler, med antingen const eller let nyckelord på vänster sida och innehållet i arrayerna på höger sida av ekvationerna. En sak du bör vara uppmärksam på är att när vi skapar arrayer använder vi hakparenteser för att omge objekten, precis som vi gjorde i koden ovan. Vi separerar också varje objekt med ett kommatecken emellan, oavsett deras datatyp.

I denna handledning kommer vi att skriva kod på ett sätt så att du kan kopiera och klistra in allt i denna handledning, sekventiellt, eller skriva ut allt, i en JavaScript-snippet i Chrome, och det skulle fungera som förväntat givet att du följer ordningen. Till exempel, vad detta betyder för dig är att om vi definierar en variabel med const-nyckelordet en gång i handledningen, normalt kan du inte definiera en annan variabel med exakt samma namn igen. Det är därför, om du ska delvis kopiera och klistra in en del av koden, är det en bra idé att se till att du definierar dessa variabler i din kod också. Detta bör inte vara ett problem om du följer handledningen i den ordning den presenteras.

En av de första sakerna du bör veta om en java-array är att när du har skapat en array, behöver du komma åt dess element. Arrayer har något som kallas “numrerade index”, och vad detta betyder för dig i praktiken är att varje element som du skapar i JavaScript har ett nummer som är kopplat till det från vänster till höger, från noll till längden av java-arrayen minus ett.

Till exempel, i koden ovan för husdjur kan vi komma åt det första elementet “hundar” genom att skriva namnet på variabeln, öppna hakparenteser, sätta in indexet för objektet vi vill komma åt och stänga hakparentesen:

alert(pets[0]);

På samma sätt kommer högre nummer att utlösa visning av andra element i alert-rutan vi visar.

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

Eftersom vi hade 4 element i husdjursarrayen, och vi började indexen från 0, nås det sista objektet i arrayen med pets[3], vilket är 1 mindre än den totala längden av arrayen. Vid det här laget kanske du undrar, nu när vi kan skapa en array och komma åt ett objekt från den arrayen, hur är det med att göra ändringar i den arrayen? Hur är det med att lägga till nya objekt, ändra befintliga objekt eller ta bort objekt? Tja, låt oss ta det steg för steg och börja med att lägga till nya objekt i en array.

Lägga till objekt i en java-array

Det finns flera sätt vi kan lägga till olika objekt i en array. Om vi vet att vi vill lägga till det nya objektet i slutet av arrayen, kan vi använda “push”-metoden. Detta kallas också att trycka in ett nytt objekt i arrayen. Observera att det tryckta objektet kommer att hamna i slutet av arrayen. Till exempel:

pets.push("ormar");
// låt oss verifiera att vi har ormar som det sista objektet
// genom att visa arrayens innehåll
alert(pets);

Om vi vet att vi specifikt vill lägga till ett objekt i java-arrayen som det första elementet kan vi använda nyckelordet “unshift”. Låt oss se det med ett exempel:

// att köra denna kod kommer att flytta alla värden
// åt ena sidan och lägga till det första husdjuret av drake
pets.unshift(“drakar”); 
// låt oss verifiera detta genom att visa innehållet i arrayen
alert(pets);

Det är bra att vi kan lägga till objekt i slutet av arrayen eller i början av arrayen, men vad händer om jag av någon anledning vill injicera objekt i arrayen på specifika positioner. Låt oss säga att jag vill lägga till sköldpaddor på den tredje positionen. Är det ens möjligt? Ja, det är det. För att injicera ett objekt i en array kan vi definiera det precis som att skapa den delen av arrayen och tilldela ett värde till den specifika delen av arrayen. Glöm inte att använda indexvärdena när du sätter in värden. Från ett praktiskt perspektiv ser det ut så här:

pets[2] = "sköldpaddor";
// låt oss verifiera att vi har sköldpaddor som det tredje objektet
// genom att visa innehållet i arrayen
alert(pets);

Ta bort objekt från en array

Vid det här laget kanske du undrar, hur är det med att ta bort objekt från en array? Tja, det finns flera sätt för det också. Förmodligen det mest kända är att använda “pop”-metoden. Detta kommer, på ett sätt, att ta bort ditt sista objekt från en array. // detta kommer att ta bort det sista objektet i arrayen pets.pop(); // låt oss verifiera resultaten genom att visa arrayens innehåll alert(pets);

Som du kan se, med pop-metoden har vi tagit bort det sista husdjursobjektet av ormar från vår husdjursarray.

Ett annat sätt att ta bort objekt från en java-array är att använda nyckelordet “shift”. När vi använder shift kommer det första elementet att raderas och resten av indexvärdena kommer att anpassa sig till dem. Till exempel:

// detta kommer att ta bort det första objektet
// och flytta de andra objekten till sina nya indexvärden
// som kommer att vara ett lägre än de tidigare indexvärdena
pets.shift();
// låt oss också verifiera detta genom att visa arrayen
alert(pets);

Namnet “shift” kommer faktiskt från hur minnesallokeringen fungerar i datorminne. Så om det verkar relativt ointuitivt i början, är det helt okej också. För nu bör du veta att vi med hjälp av shift-metoden kan ta bort det första objektet från en array.

Ta reda på längd i arrayer

När vi hanterar arrayer i verkliga livet kan det finnas många gånger där vi vill räkna antalet arrayobjekt. Detta kan behövas på olika ställen, inklusive i att-göra-listor, deltagarlistor i skolan eller på jobbet, och så vidare. För att uppnå just det har vi en inbyggd array-egenskap som kallas “length” och den kommer att berätta för oss den totala längden av arrayen. Till exempel:

alert(pets.length);

Sortera arrayer

Att sortera arrayer är en ganska vanlig operation i JavaScript. Det finns olika specifika implementationer för att sortera objekt i JavaScript. Dessa specifika implementationer kallas generellt sorteringsalgoritmer. Olika sorteringsalgoritmer kan ge olika fördelar och nackdelar. Till exempel kan en sorteringsalgoritm väljas framför en annan eftersom den helt enkelt är mycket enklare att implementera i kod, jämfört med en annan, även om de kan visa något bättre prestanda. Du kanske har hört talas om olika sorteringsalgoritmer för optimerad prestanda. I denna handledning kommer vi att använda den inbyggda sorteringsmetoden som tillhandahålls av JavaScript. Sortering är ett ganska vanligt problem, särskilt inom webbutveckling. Till exempel, om du bygger en e-handelswebbplats behöver du implementera olika sorteringssituationer för dina användare att välja mellan. Även om det inte finns några strikta regler för vilka alternativ och möjligheter du bör erbjuda din publik, finns det ganska vanliga standarder som förväntas av dig som webbplatsbyggare. Till exempel, som användare, finns det en stor chans att du vill lista några butikselement i både stigande och fallande pris. När du implementerar sorteringen för dessa uppgifter bör du ha i åtanke hur du ska implementera det givet att användaren också kan begränsa sökresultaten till vissa andra kategorier, såsom t-shirts, hattar, väskor och så vidare. Vi kan sortera en array genom att lägga till “.sort()” i slutet av den.

pets.sort();
alert(pets);

Vända element i arrayer

Att vända en array är förmodligen mer vanligt att kombinera med sortering. I det här fallet, eftersom vi också kör dessa koder från topp till botten, tillämpar vi också vändningen efter att ha sorterat arrayen. Vi kan vända en array genom att lägga till “.reverse()” i slutet av den. pets.reverse(); alert(pets);

Eftersom vi har ordnat arrayen i föregående steg kan du se att vi nu har en array som både är sorterad och vänd.

För varje

När vi arbetar med arrayer ger JavaScript oss ett bekvämt sätt att loopa över arrayobjekten med “.forEach()”. Om vi verkligen vill kan vi fortfarande använda en vanlig for-loop för att loopa över en array. Faktum är att vi först ska se hur man konstruerar en for-loop för att loopa över en array, sedan kommer vi att se hur man använder forEach().

// detta kommer att varna oss 4 gånger att mata vårt husdjur
for (let a = 0; a < pets.length; a++) {
    alert("Dags att mata mitt husdjur");
}

Vi kan också uppnå samma resultat genom att använda forEach.

pets.forEach(alert("Dags att mata mitt husdjur"));

När vi jämför att använda for-loopar eller For each, beroende på dina preferenser och din specifika situation kan du föredra att använda en av dem framför den andra. I grunden uppnår de båda samma utdata med olika stilar i koden. ForEach kan vara relativt enklare och spara en rad kod att läsa och skriva, men det kommer i slutändan att vara ditt val. Du behöver inte göra ett sådant val just nu och hålla dig till det heller. När du skriver kod kan du experimentera med att lösa samma problem med olika tillvägagångssätt när du rör dig i din programmeringsresa.

Inkluderar i arrayer

Vi kan också kontrollera om ett objekt finns inuti en java-array. Ett exempel på en verklig användning av denna metod skulle vara om ett privat evenemang inkluderar en persons namn på inbjudningslistan. Den faktiska implementationen är också ganska enkel. Vi skriver först namnet på arrayen, i det här fallet arbetar vi med husdjursarrayen. Sedan sätter vi en punkt för att komma åt olika arrayegenskaper och metoder, sedan skriver vi “includes”, öppnar och stänger parenteser, och skriver namnet på objektet vi vill kontrollera inuti. Här är ett exempel som kontrollerar ett objekt vi vet finns i arrayen:

alert(pets.includes("hundar"));

Om vi också försöker samma sak med ett objekt vi vet inte finns i java-arrayen, förväntar vi oss att få false som svar. Låt oss också se det fallet med ett exempel:

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

Eftersom vi inte hade någon valp i husdjursarrayen får vi false som vi förväntade oss. I nästa handledning kommer vi att se ett annat stort koncept både i programmeringsvärlden och i JavaScript.