Robert Whitney
Detta är del 9 av blogginläggsserien om JavaScript som tar dig från nybörjare till avancerad. Denna gång kommer vi att utforska följande ämnen: JavaScript-metoder, standardparametervärden, Date-objektet i JavaScript och pilfunktioner. I slutet av denna serie kommer du att känna till alla grunder du behöver för att börja koda i JavaScript. Om du inte har läst det föregående blogginlägget om JavaScript-objekt kan du göra det här. Utan vidare ado, låt oss börja med den nionde handledningen.
JavaScript-metoder och mer – innehållsförteckning:
Hitintills har vi sett många koncept och ämnen i JavaScript, men det finns fortfarande några vanliga som vi inte har upptäckt. I denna handledning kommer vi att se vad de handlar om. Den första är standardparametervärden i JavaScript.
Standardparametervärden
Funktioner används extremt ofta i programmering, och när något används så här ofta finns det inte bara ramverk som React som utnyttjar JavaScript-funktioner, utan det finns även ytterligare optimeringar utvecklade för att få ännu mer ut av JavaScript-funktioner. En av de stora funktionerna vi har i funktioner kallas standardparametervärden. Standardparametrar gör att vi kan skriva säkrare kod som kan göra säkra antaganden om användarens inmatning. Detta gynnar också användaren genom att ge dem en standardinställning som kan göra det lättare att välja bland deras alternativ. Låt oss se några exempel på det.
// anta att du utvecklar en webbplats för ett kafé
// och de flesta vill ha en medelstor americano
// med detta i åtanke vill du göra det lättare för folk att
// beställa sitt kaffe med mindre krångel
function orderCoffee(typeOfCoffee="americano", sizeOfCoffee="medium", numberOfCoffee=1){
return (numberOfCoffee + " " + sizeOfCoffee + " storlek " + typeOfCoffee + " förbereds. ");
}
console.log("Standardbeställning:");
console.log(orderCoffee());
// på detta sätt, när en genomsnittlig kund beställer online,
// blir det mycket lättare för dem att beställa sitt dagliga kaffe
// så mycket så att de kommer att kunna beställa det med en enda knapp
// alternativt kan folk också anpassa sitt kaffe
// genom att ändra inmatningarna
console.log("Anpassad beställning:");
console.log(orderCoffee("latte", "large", 2));
console.log("En annan anpassad beställning:");
console.log(orderCoffee("macchiato", "small", 1));
// det är också möjligt att bara ändra en del av inmatningarna
// och utnyttja standardparametrarna
// för resten av inmatningsfälten
console.log("Delvis anpassad beställning:");
console.log(orderCoffee("iced coffee"));
Att köra koden ovan ger oss följande utdata:
Date-objektet i JavaScript
Date-objektet i JavaScript används ganska ofta, särskilt inom webbutveckling. Vi kan använda Date-objektet för att utföra tidskänsliga funktioner som att ändra visningsinställningarna till mörkt läge, ljust läge eller något annat läge som användaren kan föredra. Vi kan också använda datuminformationen efter behov i projektet vi arbetar med. Här är några exempel på Date-objektet i aktion:
// det första steget är att skapa en instans av ett datumobjekt
// vi kan göra detta genom att skriva följande och
// sätta det till en variabel eller konstant av vårt val
let today = new Date();
console.log("Vi är på året: " + today.getFullYear());
console.log("Vi kan också få månaden i nummer:");
console.log(today.getMonth());
console.log("Vi kan också få dagens timme så här:");
console.log(today.getHours());
console.log("Vi kan också få de exakta minuterna tillsammans med sekunderna");
console.log(today.getMinutes());
console.log(today.getSeconds());
// när vi har dessa nummer kan vi använda dem som vi vill
// om vi vill kan vi visa dem eller fatta beslut baserat på dem.
// om vi vill visa månaden med ett namn
// istället för ett nummer, kan vi också uppnå det
// med följande
const months = ["Januari", "Februari", "Mars", "April", "Maj", "Juni", "Juli", "Augusti", "September", "Oktober", "November", "December"];
console.log("Vi är i månaden " + months[today.getMonth()]);
// vad vi just gjorde var att skapa en array för att lagra månadsnamn
// och sedan välja rätt månad med hjälp av ett indexvärde
// som tillhandahålls av .getMonth() metoden.
// om vi ville slå på mörkt läge efter klockan 20,
// skulle vi kunna göra det med följande kod
// en av de första sakerna vi bör komma ihåg är att
// timmar anges i 24-timmarsformat
// det betyder att klockan 20 betyder 20 som timmar
// vi kan också använda ett kortfattat sätt
// och kombinera skapandet av det nya datumobjektet
// med metoden för att hämta timmar
let timeOfDay = new Date().getHours();
if (timeOfDay >= 20) {
console.log("Slår på mörkt läge...");
} else {
console.log("Slå inte på mörkt läge");
}
// eftersom den aktuella tiden är över klockan 20,
// förväntar vi oss i detta fall att få slå på mörkt läge.
// vilket också är resultatet vi får som vi kan se från
// konsolutdata.
Att köra koden ovan ger oss följande konsolutskrifter:
Map() metod
Map-metoden är en mycket användbar metod som kan spara dig många rader kod, och beroende på hur du använder den kan den göra din kod mycket renare. Den ersätter i grunden användningen av en for-loop när du använder den för att loopa över en array. Här är några exempel på map() metoden.
// låt oss skapa en array som vi kommer att använda för mappning
let someNumbers = [1, 2, 3, 4, 5];
// låt oss också skapa de funktioner vi kommer att
// tillhandahålla till map-metoden
function doubleNums(num1){
return num1 * 2;
}
function squareNums(num1){
return num1 * num1;
}
function add100(num1){
return num1 + 100;
}
console.log("Dubblerade nummer array:");
console.log(someNumbers.map(doubleNums));
console.log("Kvadrerade nummer array:");
console.log(someNumbers.map(squareNums));
console.log("100 tillagt till varje element i nummerarrayen:");
console.log(someNumbers.map(add100));
// map() metoden kommer att loopa över varje av de
// objekten i en given array och tillämpa den
// angivna funktionen
// notera att vi inte inkluderar parenteser
// efter funktionsnamnen, detta skulle kalla på funktionen
// istället passerar vi funktionsnamnet,
// och map() metoden kallar dem när den behöver
Att köra koden ovan ger oss följande konsolutskrifter:
Filter() metod
Filter() metoden, tillsammans med map() metoden är båda ganska vanliga JavaScript-metoder. De är mycket lika map() metoden vi just har sett. Med map() metoden kan vi skicka in vilken funktion som helst, och den funktionen tillämpas på varje av elementen i en array. Med filter() metoden kommer vi att skicka in ett filterkriterium och filtermetoden kommer att loopa över alla objekten i en array och den kommer att returnera en ny array där endast de objekt som uppfyller kriterierna kommer att finnas kvar. Låt oss se några exempel på det:
// låt oss först skapa en array
// för att tillämpa 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("Jämna nummer från listan:");
console.log(someNumbers.filter(checkEven));
console.log("Udda nummer från listan:");
console.log(someNumbers.filter(checkOdd));
console.log("Nummer över 13 från arrayen:");
console.log(someNumbers.filter(over13));
console.log("Nummer delbara med 5 från arrayen:");
console.log(someNumbers.filter(divisibleByFive));
Att köra koden ovan ger oss följande konsolutskrifter:
Pilfunktion
Kommer du ihåg när vi sa att funktioner är extremt vanliga i JavaScript och att det görs många optimeringar för att få dem att bli ännu mer prestandaeffektiva eller rena? Tja, pilfunktioner är en av dem. Pilfunktioner kallas ibland också för fet pil. De ger i grunden ett mycket kortare sätt att skriva dina funktioner. De används också mycket ofta med de JavaScript-metoder som vi just har sett. Låt oss se dem med några exempel:
// JavaScript erbjuder flera nivåer av // kodförkortning med pilfunktioner beroende på din exakta kod // I grunden är det längsta sättet vi kan skriva en funktion // det sätt vi alltid skriver dem utan att använda pilfunktioner // låt oss börja med en array för att tillämpa pilfunktionerna 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 tidigare exemplen har vi tillämpat många funktioner // efter att ha skapat dem som vanliga namngivna funktioner // I detta exempel kommer vi att tillämpa de exakta transformationerna // så att du kan se båda extremiteterna i kodlängd // dubblera varje nummer i arrayen: console.log("Dubblera varje nummer i arrayen:") console.log(someNumbers.map(num => num * 2)); // kvadrera varje nummer i arrayen: console.log("Kvadrera varje nummer i arrayen:") console.log(someNumbers.map(num => num * num)); // lägg till 100 till varje nummer i arrayen: console.log("Lägg till 100 till varje nummer i arrayen:") console.log(someNumbers.map(num => num + 100)); // Behåll endast de jämna numren i arrayen: console.log("Behåll endast de jämna numren i arrayen:") console.log(someNumbers.filter(num => num % 2 == 0)); // Behåll endast de udda numren i arrayen: console.log("Behåll endast de udda numren i arrayen:") console.log(someNumbers.filter(num => num % 2 == 1)); // Behåll endast de nummer som är jämnt delbara med 5: console.log("Behåll endast de nummer som är jämnt delbara med 5:") console.log(someNumbers.filter(num => num % 5 == 0)); // Behåll endast de nummer som är över 13: console.log("Behåll endast de nummer som är över 13:") console.log(someNumbers.filter(num => num > 13));
Att köra koden ovan ger oss följande konsolutskrifter:
I nästa handledning kommer vi att ha en översikt över vad vi har sett och se vad som kommer härnäst.
Robert Whitney
JavaScript-expert och instruktör som coachar IT-avdelningar. Hans huvudmål är att höja teamets produktivitet genom att lära andra hur man effektivt samarbetar medan man kodar.
