Dette er del 9 af JavaScript blogindlæg serien, der vil tage dig fra nybegynder til avanceret. Denne gang vil vi udforske følgende emner: JavaScript metoder, standard parameter værdier, Date objektet i JavaScript og pilfunktionen. 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. Hvis du ikke har læst det tidligere blogindlæg om JavaScript objekter, kan du gøre det her. Uden videre, lad os komme i gang med den niende tutorial.

JavaScript metoder og mere – indholdsfortegnelse:

  1. Standard parameter værdier
  2. Date objektet i JavaScript
  3. Map() metode
  4. Filter() metode
  5. Pilfunktion

Indtil nu har vi set mange koncepter og emner i JavaScript, men der er stadig nogle almindeligt anvendte, som vi ikke har opdaget. I denne tutorial vil vi se, hvad de handler om. Den første er standard parameter værdier i JavaScript.

Standard parameter værdier

Funktioner bruges ekstremt ofte i programmering, og når noget bruges så ofte, er der ikke kun rammer som React, der udnytter JavaScript funktioner, men der er endda yderligere optimeringer udviklet for at få endnu mere ud af JavaScript funktioner. En af de vigtigste funktioner, vi har i funktioner, kaldes standard parameter værdier. Standard parametre giver os mulighed for at skrive sikrere koder, der kan lave sikre antagelser om brugerinput. Dette gavner også brugeren ved at give dem en standardindstilling, der kan gøre det lettere at vælge blandt deres muligheder. Lad os se nogle eksempler på det.

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// antag, at du udvikler en hjemmeside for en kaffebar
// og de fleste mennesker ønsker at få en mellemstor americano
// ved at vide dette vil du gøre det lettere for folk at
// bestille deres kaffe med mindre besvær
function orderCoffee(typeOfCoffee="americano", sizeOfCoffee="medium", numberOfCoffee=1){
    return (numberOfCoffee + " " + sizeOfCoffee + " størrelse " + typeOfCoffee + " bliver forberedt. ");
}
console.log("Standard bestilling:");
console.log(orderCoffee());
// på denne måde, når en gennemsnitlig kunde bestiller online,
// vil det være meget lettere for dem at bestille deres daglige kaffe
// så meget, at de vil kunne bestille det med en enkelt knap
// alternativt kan folk også tilpasse deres kaffe
// ved at ændre input
console.log("Tilpasset bestilling:");
console.log(orderCoffee("latte", "large", 2));
console.log("En anden tilpasset bestilling:");
console.log(orderCoffee("macchiato", "small", 1));
// det er også muligt at ændre kun en del af input
// og udnytte standard parametrene
// for resten af inputfelterne
console.log("Delvist tilpasset bestilling:");
console.log(orderCoffee("iced coffee"));

At køre koden ovenfor giver os følgende output:

javascript_methods

Date objektet i JavaScript

Date objektet i JavaScript er ret almindeligt anvendt, især i webudvikling. Vi kan bruge Date objektet til at udføre tidsfølsomme funktioner som at ændre visningsindstillingerne til mørk tilstand, lys tilstand eller enhver anden tilstand, som brugeren måtte foretrække. Vi kan også bruge date informationen efter behov inde i det projekt, vi arbejder på. Her er nogle eksempler på Date objektet i aktion:

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// det første skridt er at oprette en date objekt instans
// vi kan gøre dette ved at skrive følgende og
// sætte det til en variabel eller konstant af vores valg
let today = new Date();
console.log("Vi er i år: " + today.getFullYear());
console.log("Vi kan også få måned i nummer:");
console.log(today.getMonth());
console.log("Også kan vi få timen på dagen sådan her:");
console.log(today.getHours());
console.log("Vi kan også få de præcise minutter sammen med sekunderne");
console.log(today.getMinutes());
console.log(today.getSeconds());
// når vi har disse tal, kan vi bruge dem som vi vil
// hvis vi vil, kan vi vise dem eller træffe beslutninger baseret på dem.
// hvis vi vil vise måned med et navn
// i stedet for et nummer, kan vi også opnå det
// med følgende
const months = ["Januar", "Februar", "Marts", "April", "Maj", "Juni", "Juli", "August", "September", "Oktober", "November", "December"];
console.log("Vi er i måneden " + months[today.getMonth()]);
// hvad vi lige har gjort var at oprette et array til at gemme månedsnavne
// og derefter vælge den korrekte måned ved hjælp af en indeksværdi
// givet af .getMonth() metoden.
// hvis vi ønskede at tænde for mørk tilstand efter kl. 20,
// kunne vi gøre det med følgende kode
// en af de første ting, vi skal huske er, at
// timer gives i 24-timers format
// det betyder, at kl. 20 vil betyde 20 som timer
// vi kan også bruge en kortere måde
// og kombinere oprettelsen af det nye date objekt
// med get hours metoden
let timeOfDay = new Date().getHours();
if (timeOfDay >= 20) {
    console.log("Tænder for mørk tilstand...");
} else {
    console.log("Tænd ikke for mørk tilstand");
}
// da den nuværende tid er over kl. 20,
// i dette tilfælde forventer vi at få tændt for mørk tilstand.
// hvilket også er det resultat, vi får, som vi kan se fra
// konsol output.

At køre koden ovenfor vil give os følgende konsol logs:

javascript_methods

Map() metode

Map metoden er en meget nyttig metode, der kan spare dig for mange linjer kode, og afhængigt af hvordan du bruger den, kan den gøre din kode meget renere. Den erstatter i det væsentlige brugen af en for-løkke, når du bruger den til at loope over et array. Her er nogle eksempler på map() metoden.

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// lad os oprette et array, vi vil bruge til mapping
let someNumbers = [1, 2, 3, 4, 5];
// lad os også oprette de funktioner, vi vil
// give til map metoden
function doubleNums(num1){
    return num1 * 2;
}
function squareNums(num1){
    return num1 * num1;
}
function add100(num1){
    return num1 + 100;
}
console.log("Doblede tal array:");
console.log(someNumbers.map(doubleNums));
console.log("Kvadrerede tal array:");
console.log(someNumbers.map(squareNums));
console.log("100 tilføjet til hver af elementerne i tal arrayet:");
console.log(someNumbers.map(add100));
// map() metoden vil loope over hver af de
// elementer i et givet array og anvende den
// angivne funktion
// bemærk, at vi ikke inkluderer parenteser
// efter funktionsnavnene, dette ville kalde funktionen
// i stedet passer vi funktionsnavnet,
// og map() metoden kalder dem, når den har brug for det

At køre koden ovenfor vil give os følgende konsol logs:

javascript_methods

Filter() metode

Filter() metoden, sammen med map() metoden, er begge ret almindelige JavaScript metoder. De er meget lig map() metoden, vi lige har set. Med map() metoden kan vi passere enhver funktion, og den funktion anvendes på hvert af elementerne i et array. Med filter() metoden vil vi passere et filterkriterium, og filtermetoden vil loope over alle elementerne i et array, og det vil returnere et nyt array, hvor kun de elementer, der opfylder kriteriet, vil forblive. Lad os se nogle eksempler på det:

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// lad os først oprette et array
// til at anvende filter() metoden
let someNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21];
function checkEven(num1){
    if (num1 % 2 == 0){
        return num1;
    }
}
function checkOdd(num1){
    if (num1 % 2 == 1){
        return num1;
    }
}
function over13(num1){
    if (num1 > 13){
        return num1;
    }
}
function divisibleByFive(num){
    if (num % 5 == 0){
        return num;
    }
}
console.log("Lige tal fra listen:");
console.log(someNumbers.filter(checkEven));
console.log("Ulige tal fra listen:");
console.log(someNumbers.filter(checkOdd));
console.log("Tal over 13 fra arrayet:");
console.log(someNumbers.filter(over13));
console.log("Tal der er delelige med 5 fra arrayet:");
console.log(someNumbers.filter(divisibleByFive));
At køre koden ovenfor vil give os følgende konsol logs: javascript_methods

Pilfunktion

Husk, da vi sagde, at funktioner er ekstremt almindelige i JavaScript, og der er mange optimeringer, der er lavet for at få dem til at være endnu mere effektive eller have renere kode? Nå, pilfunktioner er en af dem. Pilfunktioner kaldes nogle gange også for den fede pil. De giver i det væsentlige en meget kortere måde at skrive dine funktioner på. De bruges også meget ofte med de JavaScript metoder, vi lige har set. Lad os se dem med nogle eksempler:

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// JavaScript giver flere niveauer af
// kodeforkortelse med pilfunktioner afhængigt af din præcise kode
// I det væsentlige er den længste måde, vi kan skrive en funktion på,
// den måde, vi altid skriver dem uden at bruge pilfunktioner
// lad os starte med et array for at anvende pilfunktionerne
let someNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21];
console.log("Original Array:");
console.log(someNumbers);
// i de tidligere eksempler har vi anvendt mange funktioner
// efter at have oprettet dem som almindelige navngivne funktioner
// I dette eksempel vil vi anvende de nøjagtige transformationer
// så du kan se begge ekstreme i kodelængde
// dobbelt hvert tal i arrayet:
console.log("Dobbelt hvert tal i arrayet:")
console.log(someNumbers.map(num => num * 2));
// kvadrer hvert tal i arrayet:
console.log("Kvadrer hvert tal i arrayet:")
console.log(someNumbers.map(num => num * num));
// tilføj 100 til hvert tal i arrayet:
console.log("Tilføj 100 til hvert tal i arrayet:")
console.log(someNumbers.map(num => num + 100));
// Behold kun de lige tal i arrayet:
console.log("Behold kun de lige tal i arrayet:")
console.log(someNumbers.filter(num => num % 2 == 0));
// Behold kun de ulige tal i arrayet:
console.log("Behold kun de ulige tal i arrayet:")
console.log(someNumbers.filter(num => num % 2 == 1));
// Behold kun de tal, der er delelige med 5:
console.log("Behold kun de tal, der er delelige med 5:")
console.log(someNumbers.filter(num => num % 5 == 0));
// Behold kun de tal, der er over 13:
console.log("Behold kun de tal, der er over 13:")
console.log(someNumbers.filter(num => num > 13));

At køre koden ovenfor vil give os følgende konsol logs:

javascript_methods

I den næste tutorial vil vi have et overblik over, hvad vi har set, og se hvad der er næste.

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 →

JavaScript Course From Beginner to Advanced in 10 blog posts:

  1. Hvordan kommer man i gang med at kode i JavaScript?
  2. Variabler og forskellige datatyper i JavaScript
  3. JavaScript grundlæggende
  4. Java-array
  5. JavaScript metoder og mere
  6. JavaScript-objekter
  7. Uddrag og kontrolstrukturer
  8. Resumé af JavaScript-kurset
  9. JavaScript-funktioner