JavaScript metodai ir daugiau. 9 dalis JavaScript kurso nuo pradedančiųjų iki pažengusiųjų per 10 tinklaraščio įrašų

Šis yra devintas JavaScript tinklaraščio įrašų serijos, kuri nuves jus nuo pradedančiojo iki pažengusiojo, dalis. Šį kartą mes išnagrinėsime šias temas: JavaScript metodai, numatytosios parametrų reikšmės, Date objektas JavaScript ir rodyklės funkcija. Šios serijos pabaigoje jūs žinosite visas pagrindines žinias, kurių reikia, kad pradėtumėte programuoti JavaScript. Jei dar nesate perskaitę ankstesnio tinklaraščio įrašo apie JavaScript objektus, galite tai padaryti čia. Be jokių papildomų kalbų, pradėkime devintąjį mokymą.

JavaScript metodai ir daugiau – turinys:

1. Numatytosios parametrų reikšmės
2. Date objektas JavaScript
3. Map() metodas
4. Filter() metodas
5. Rodyklės funkcija

Iki šiol mes matėme daug koncepcijų ir temų JavaScript, tačiau vis dar yra keletas dažnai naudojamų, kurių neatradome. Šiame mokyme mes pamatysime, apie ką jos visos. Pirmasis yra numatytosios parametrų reikšmės JavaScript.

Numatytosios parametrų reikšmės

Funkcijos yra naudojamos labai dažnai programavime, ir kai kažkas naudojama taip dažnai, yra ne tik tokios struktūros kaip React, kurios pasinaudoja JavaScript funkcijomis, bet netgi toliau optimizuojamos, kad būtų galima dar daugiau gauti iš JavaScript funkcijų. Viena iš pagrindinių funkcijų, kurias turime funkcijose, vadinama numatytosiomis parametrų reikšmėmis. Numatytieji parametrai leidžia mums rašyti saugesnį kodą, kuris gali daryti saugias prielaidas apie vartotojo įvestį. Tai taip pat naudinga vartotojui, suteikiant jam numatytąjį nustatymą, kuris gali palengvinti pasirinkimą iš jų galimybių. Pažvelkime į keletą pavyzdžių.

// tarkime, kad kuriate svetainę kavos parduotuvei
// ir dauguma žmonių nori gauti vidutinio dydžio americano
// žinodami tai, norite palengvinti žmonėms
// užsisakyti savo kavą su mažiau vargo
function orderCoffee(typeOfCoffee="americano", sizeOfCoffee="medium", numberOfCoffee=1){
    return (numberOfCoffee + " " + sizeOfCoffee + " dydžio " + typeOfCoffee + " ruošiamas. ");
}
console.log("Numatytas užsakymas:");
console.log(orderCoffee());
// tokiu būdu, kai vidutinis klientas užsisako internetu, 
// jam bus daug lengviau užsisakyti savo kasdienę kavą
// tiek, kad jis galės užsisakyti ją vienu mygtuko paspaudimu
// alternatyviai žmonės taip pat gali pritaikyti savo kavą
// keisdami įvestis
console.log("Pritaikytas užsakymas:");
console.log(orderCoffee("latte", "large", 2));
console.log("Kitas pritaikytas užsakymas:");
console.log(orderCoffee("macchiato", "small", 1));
// taip pat galima keisti tik dalį įvesties
// ir pasinaudoti numatytosiomis parametrų reikšmėmis 
// likusiems įvesties laukams
console.log("Iš dalies pritaikytas užsakymas:");
console.log(orderCoffee("iced coffee"));

Vykdant aukščiau pateiktą kodą, gauname šį išvestį:

Date objektas JavaScript

Date objektas JavaScript yra gana dažnai naudojamas, ypač žiniatinklio kūrime. Mes galime naudoti Date objektą, kad atliktume laiko jautrias funkcijas, tokias kaip ekrano nustatymų keitimas į tamsų režimą, šviesų režimą ar bet kurį kitą režimą, kurį vartotojas gali pageidauti. Taip pat galime naudoti datos informaciją, kaip reikia, projekte, su kuriuo dirbame. Štai keletas Date objekto veikimo pavyzdžių:

// pirmas žingsnis yra sukurti datos objekto instanciją
// tai galime padaryti parašydami šį kodą ir 
// priskirdami jį pasirinktam kintamajam arba konstantai
let today = new Date();
console.log("Mes esame metais: " + today.getFullYear());
console.log("Mes taip pat galime gauti mėnesį skaičiumi:");
console.log(today.getMonth());
console.log("Taip pat galime gauti dienos valandą taip:");
console.log(today.getHours());
console.log("Mes taip pat galime gauti tikslius minutes kartu su sekundėmis");
console.log(today.getMinutes());
console.log(today.getSeconds());
// kai turime šiuos skaičius, galime juos naudoti kaip norime
// jei norime, galime juos rodyti arba priimti sprendimus remdamiesi jais.
// jei norime rodyti mėnesį su pavadinimu 
// o ne skaičiumi, tai taip pat galime pasiekti
// su šiuo kodu
const months = ["Sausis", "Vasaris", "Kovas", "Balandis", "Gegužė", "Birželis", "Liepa", "Rugpjūtis", "Rugsėjis", "Spalis", "Lapkritis", "Gruodis"];
console.log("Mes esame " + months[today.getMonth()] + " mėnesį.");
// ką tik padarėme, tai sukurti masyvą, kad saugotume mėnesių pavadinimus
// ir tada pasirinkti teisingą mėnesį naudojant indeksą
// pateiktą .getMonth() metodu.
// jei norėtume įjungti tamsų režimą po 8 valandos vakaro,
// galėtume tai padaryti su šiuo kodu
// viena iš pirmųjų dalykų, kuriuos turėtume prisiminti, yra tai, kad
// valandos pateikiamos 24 valandų formatu
// tai reiškia, kad 8 valanda vakaro bus 20 valandų
// taip pat galime naudoti trumpąjį būdą 
// ir sujungti naujo datos objekto sukūrimą
// su get hours metodu
let timeOfDay = new Date().getHours();
if (timeOfDay >= 20) {
    console.log("Įjungiamas tamsus režimas...");
} else {
    console.log("Neįjungti tamsaus režimo");
}
// kadangi dabartinis laikas yra po 8 valandos vakaro,
// šiuo atveju tikimės, kad tamsus režimas bus įjungtas.
// tai taip pat yra rezultatas, kurį gauname, kaip matome iš
// konsolės išvesties.

Vykdant aukščiau pateiktą kodą, gausime šiuos konsolės įrašus:

Map() metodas

Map metodas yra labai naudingas metodas, kuris gali sutaupyti jums daug kodo eilučių, ir priklausomai nuo to, kaip jį naudojate, gali padaryti jūsų kodą daug švaresnį. Jis iš esmės pakeičia for ciklo naudojimą, kai naudojate jį iteruoti per masyvą. Štai keletas map() metodo pavyzdžių.

// sukurkime masyvą, kurį naudosime map
let someNumbers = [1, 2, 3, 4, 5];
// taip pat sukurkime funkcijas, kurias 
// pateiksime map metodui
function doubleNums(num1){
    return num1 * 2;
}
function squareNums(num1){
    return num1 * num1;
}
function add100(num1){
    return num1 + 100;
}
console.log("Dvigubų skaičių masyvas:");
console.log(someNumbers.map(doubleNums));
console.log("Kvadratinių skaičių masyvas:");
console.log(someNumbers.map(squareNums));
console.log("100 pridėta prie kiekvieno elemento skaičių masyve:");
console.log(someNumbers.map(add100));
// map() metodas iteruos per kiekvieną
// elementą nurodytame masyve ir taikys 
// pateiktą funkciją
// atkreipkite dėmesį, kad mes neįtraukiame skliaustų
// po funkcijų pavadinimais, tai iškviestų funkciją
// vietoj to mes perduodame funkcijos pavadinimą, 
// ir map() metodas jas iškviečia, kai to reikia

Vykdant aukščiau pateiktą kodą, gausime šiuos konsolės įrašus:

Filter() metodas

Filter() metodas, kartu su map() metodu, yra abu gana įprasti JavaScript metodai. Jie labai panašūs į map() metodą, kurį ką tik matėme. Su map() metodu galime perduoti bet kurią funkciją, ir ta funkcija bus taikoma kiekvienam elemento masyve. Su filter() metodu mes perduosime filtravimo kriterijus, o filter metodas iteruos per visus elementus masyve ir grąžins naują masyvą, kuriame liks tik tie elementai, kurie atitinka kriterijus. Pažvelkime į keletą pavyzdžių:

// pirmiausia sukurkime masyvą 
// kad galėtume taikyti filter() metodą
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("Lyginiai skaičiai iš sąrašo:");
console.log(someNumbers.filter(checkEven));
console.log("Nelyginiai skaičiai iš sąrašo:");
console.log(someNumbers.filter(checkOdd));
console.log("Skaičiai virš 13 iš masyvo:");
console.log(someNumbers.filter(over13));
console.log("Skaičiai, dalinami iš 5 iš masyvo:");
console.log(someNumbers.filter(divisibleByFive));

Vykdant aukščiau pateiktą kodą, gausime šiuos konsolės įrašus:

Rodyklės funkcija

Prisiminkite, kai sakėme, kad funkcijos yra labai dažnos JavaScript ir kad joms yra padaryta daug optimizacijų, kad būtų galima gauti dar našesnį ar švaresnį kodą? Na, rodyklės funkcijos yra viena iš jų. Rodyklės funkcijos kartais taip pat vadinamos storomis rodyklėmis. Jos iš esmės suteikia daug trumpesnį būdą rašyti jūsų funkcijas. Jos taip pat labai dažnai naudojamos su JavaScript metodais, kuriuos ką tik matėme. Pažvelkime į juos su keletu pavyzdžių:

// JavaScript suteikia kelis lygius 
// kodo sutrumpinimo su rodyklės funkcijomis, priklausomai nuo jūsų tikslaus kodo
// Iš esmės ilgiausias būdas, kaip galime rašyti funkciją, yra 
// būdas, kuriuo mes visada jas rašome, nenaudodami rodyklės funkcijų
// pradėkime su masyvu, kad taikytume rodyklės funkcijas
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("Originalus masyvas:");
console.log(someNumbers);
// ankstesniuose pavyzdžiuose mes taikėme daug funkcijų
// po jų sukūrimo kaip įprastų pavadintų funkcijų
// Šiame pavyzdyje mes taikysime tiksliai tas pačias transformacijas
// kad galėtumėte pamatyti abu kraštutinius kodo ilgius
// padvigubinkite kiekvieną skaičių masyve:
console.log("Padvigubinkite kiekvieną skaičių masyve:")
console.log(someNumbers.map(num => num * 2));
// kvadratu kiekvieną skaičių masyve:
console.log("Kvadratu kiekvieną skaičių masyve:")
console.log(someNumbers.map(num => num * num));
// pridėkite 100 prie kiekvieno skaičiaus masyve:
console.log("Pridėkite 100 prie kiekvieno skaičiaus masyve:")
console.log(someNumbers.map(num => num + 100));
// Išlaikykite tik lyginius skaičius masyve:
console.log("Išlaikykite tik lyginius skaičius masyve:")
console.log(someNumbers.filter(num => num % 2 == 0));
// Išlaikykite tik nelyginius skaičius masyve:
console.log("Išlaikykite tik nelyginius skaičius masyve:")
console.log(someNumbers.filter(num => num % 2 == 1));
// Išlaikykite tik skaičius, kurie dalijasi iš 5:
console.log("Išlaikykite tik skaičius, kurie dalijasi iš 5:")
console.log(someNumbers.filter(num => num % 5 == 0));
// Išlaikykite tik skaičius, kurie yra didesni nei 13:
console.log("Išlaikykite tik skaičius, kurie yra didesni nei 13:")
console.log(someNumbers.filter(num => num > 13));

Vykdant aukščiau pateiktą kodą, gausime šiuos konsolės įrašus:

Kitame mokyme mes apžvelgsime, ką matėme, ir pamatysime, kas laukia toliau.