Zjistěte, jak flexibilní mohou být funkce JavaScriptu a jak je můžete použít k vytvoření flexibilního, opakovaně použitelného kódu.

JavaScript je výkonný jazyk podporovaný většinou moderních prohlížečů a je to skvělá volba pro začátečníky.

Stejně jako mnoho jiných moderních programovacích jazyků podporuje JavaScript funkce, které vám umožňují izolovat blok kódu a znovu jej použít někde jinde. Můžete také použít funkce přiřadit proměnným a předat je jako parametry, jako jiné hodnoty.

Co jsou funkce vyššího řádu?

Nejjednodušší definice funkce vyššího řádu je funkce, která provádí operace s jinými funkcemi tak, že je přijímá jako parametry nebo je vrací. Funkce vyššího řádu se v funkční programovací paradigma. Pokud jste právě začínáte s JavaScriptem, funkce vyššího řádu mohou být trochu obtížně uchopitelné.

Zvažte následující příklad:

funkcepřeměnit(fn) {
nechat resultArray = [];

vrátit sefunkce (pole) {
pro (nechat i = 0; i < pole.délka; i++) {
resultArray.push (fn (pole[i]))
}

vrátit se výsledekPole
}
}

Ve výše uvedeném bloku kódu je přeměnit funkce je funkce vyššího řádu, která přijímá fn funkce jako parametr a vrací anonymní funkci, která přijímá pole jako parametr.

Účelem přeměnit funkcí je upravit prvky v poli. Nejprve kód definuje proměnnou výsledekPole a naváže jej na prázdné pole.

The přeměnit funkce vrací anonymní funkci, která prochází každý prvek v pole, pak předá prvek do fn funkce pro výpočet a vloží výsledek do výsledekPole. Po dokončení cyklu anonymní funkce vrátí hodnotu výsledekPole.

konst funkce1 = transformace((X) => X * 2)
řídicí panel.log (funkce1([ 2, 3, 4, 5, 6 ])) /* [ 4, 6, 8, 10, 12] */

Blok kódu výše přiřazuje anonymní funkci vrácenou souborem přeměnit funkce na konstantní proměnnou funkce1. fn vrací produkt X která je náhradou za pole[i].

Kód také předává pole jako parametr funkce1 a poté zaznamená výsledek do konzoly. Kratší způsob psaní by byl:

řídicí panel.log (transform((X) => X * 2)([ 2, 3, 4, 5, 6 ]))

JavaScript má vestavěnou funkci vyššího řádu, která v podstatě dělá to samé jako přeměnit, kterému se budeme věnovat později.

Doufejme, že začínáte chápat, jak fungují funkce vyššího řádu v JavaScriptu. Podívejte se na následující funkci a zjistěte, zda dokážete uhodnout, co dělá.

funkcefilterAndTransform(fn, arrayToBeFiltered, podmínka) {
nechat filterArray = [];

pro (nechat i = 0; i < arrayToBeFiltered.length; i++) {
-li (stav (arrayToBeFiltered[i])) {
nechat y = transformace (fn)([ arrayToBeFiltered[i] ])[0]
filterArray.push (y)
} jiný {
filterArray.push (arrayToBeFiltered[i])
}
}

vrátit se filterArray
}

Tento blok kódu definuje funkci, která dělá to, co byste mohli mít podezření – kontroluje prvky v poli, které splňují určitou podmínku, a transformuje je pomocí přeměnit() funkce. Chcete-li použít tuto funkci, udělejte něco takového:

filterAndTransform((X) => X * 2, [ 1, 2, 3, 4, 5 ], (x) => x % 20)

Na rozdíl od přeměnit funkce, The filterAndTransform funkce má dvě funkce jako parametry: fn a stav. The stav funkce zkontroluje, zda parametr prošel, zda je sudé číslo a vrátí hodnotu true. V opačném případě vrátí hodnotu false.

Li stav vyhodnotí na true (podmínka je splněna), teprve potom je přeměnit volaná funkce. Tato logika se může hodit, pokud pracujete s polem a chcete transformovat určité prvky. Pokud tento kód spustíte v konzole prohlížeče, měli byste obdržet následující odpověď:

[ 1, 4, 3, 8, 5 ]

Můžete vidět, že funkce transformuje pouze prvky, které splňují určitou podmínku, přičemž prvky, které podmínku nesplňují, ponechá tak, jak jsou.

Funkce vyššího řádu Array.map() v JavaScriptu

Metody pole jako map() jsou funkce vyššího řádu, které usnadňují manipulaci s poli. Zde je návod, jak to funguje.

nechat pole = [ 1, 2, 3, 4, 5 ];
nechat transformedArray = array.map((X) => X * 2);

Když se přihlásíte transformedArray v konzole prohlížeče byste měli získat stejný výsledek, jaký jste dostali s přeměnit dříve zmíněná funkce:

[ 2, 4, 6, 8, 10 ]

array.map() přebírá dva parametry, první parametr odkazuje na samotný prvek, zatímco druhý parametr odkazuje na index prvku (pozici v poli). S právě array.map() můžete dosáhnout stejných výsledků jako filterAndTransform funkce. Postup je následující:

nechat pole = [ 1, 2, 3, 4, 5 ];
nechat transformedArray = array.map((X) => X % 20? X * 2: X);

V bloku kódu výše funkce vrací součin aktuálního prvku a 2, pokud je prvek sudý. V opačném případě vrátí prvek nedotčený.

S vestavěným mapa se vám podařilo eliminovat potřebu několika řádků kódu, což má za následek mnohem čistší kód a menší pravděpodobnost výskytu chyb.

Funkce Array.filter() v JavaScriptu

Když vyvoláte filtr metoda na poli, ujistěte se, že návratová hodnota funkce, kterou do metody předáváte, je buď true, nebo false. The filtr metoda vrací pole obsahující prvky, které splňují zadanou podmínku. Zde je návod, jak jej používat.

funkcecheckFirstLetter(slovo) {
nechat samohlásky = "aeiou"

-li (samohlásky.zahrnuje(slovo[0].toLowerCase())) {
vrátit se slovo;
} jiný {
vrátit se;
}
}

nechat slova = [ "Ahoj", "z", "ten", "děti", "z", "planeta", "Země" ];
nechat výsledek = slova.filtr((X) => checkFirstLetter (x))

Blok kódu výše prochází přes slova pole a filtruje jakékoli slovo, jehož první písmeno je samohláska. Když spustíte kód a zalogujete se výsledek proměnné, měli byste získat následující výsledky:

[ 'z', 'Země' ];

Funkce Array.reduce() v JavaScriptu

The snížit() funkce vyššího řádu má dva parametry. Prvním parametrem je redukční funkce. Tato redukční funkce je zodpovědná za kombinaci dvou hodnot a vrácení této hodnoty. Druhý parametr je volitelný.

Definuje počáteční hodnotu, která se má předat funkci. Pokud chcete vrátit součet všech prvků v poli, můžete provést následující:

nechat a = [ 1, 2, 3, 4, 5];
nechat suma = 0;

pro (nechat i = 0; i < a.délka; i++) {
součet = součet + a[i];
}

řídicí panel.log (součet);

Pokud spustíte kód, součet by mělo být 15. Můžete také použít jiný přístup s snížit funkce.

nechat a = [ 1, 2, 3, 4, 5 ];
součet = a.snížit((c, n) => c + n);
řídicí panel.log (součet);

Výše uvedený blok kódu je mnohem čistší ve srovnání s předchozím příkladem. V tomto příkladu má redukční funkce dva parametry: C a n. C odkazuje na aktuální prvek while n odkazuje na další prvek v poli.

Když se kód spustí, funkce redukce prochází polem a ujistěte se, že k výsledku z předchozího kroku přidá aktuální hodnotu.

Síla funkcí vyššího řádu

Funkce v JavaScriptu jsou výkonné, ale funkce vyššího řádu posouvají věci na další úroveň. Jsou široce používány ve funkčním programování a umožňují vám snadno filtrovat, zmenšovat a mapovat pole.

Funkce vyššího řádu vám mohou pomoci napsat modulárnější a opakovaně použitelný kód při vytváření aplikací.