Jakie są funkcje strzałek w JavaScript

Jedną z najlepszych funkcji, które zapewnił nam Modern JavaScript funkcja strzałki oznaczone przez „=>". Znany również jako „gruba strzałka”Wyposażony w różne korzyści w programowaniu. Jest wyposażony w wiązanie „to”, a użycie ich sprawia, że ​​kod wygląda bardziej zorganizowany i krótszy.

Funkcje te są powodem, dla którego funkcje strzałek są ściśle preferowane od innych rodzajów deklaracji funkcji. Ale z tymi dodatkami również pojawiają się również pewne wady.

W tym artykule dowiemy się, jak pisać funkcje za pomocą funkcji strzałek w JavaScript i jak przekonwertować swoje proste funkcje na funkcje strzałek. Ale przed wskoczeniem do tego zrozummy kilka podstawowych pojęć na temat funkcji strzałek w JavaScript.

Funkcje strzałek w JavaScript

ES6 zapewnił nam jedną z najważniejszych i najważniejszych funkcji, która jest funkcją strzałki, która pomaga w deklaracji funkcji w prostszy sposób i zmniejsza linie kodu. Składnia funkcji strzałki jest wspomniana poniżej:

Składnia:

Niech funkcjaName = (p1, p2,… pn) =>
sprawozdania)

Tutaj,

• Nazwa funkcji: Nazwa funkcji
• P1, P2,… . pn: Są to parametry funkcji
• sprawozdania): Linie kodu JavaScript wewnątrz ciała funkcji.

Korzystając z nich, możemy przekonwertować nasz złożony kod na bardziej precyzyjną i kompaktową wersję. Poniżej znajdują się niektóre z funkcji, które zapewnia:

Niejawny zwrot

Dzięki temu użycie wszelkiego rodzaju nawiasów, funkcji lub słów kluczowych zwrotnych staje się opcjonalne, umożliwiając niejawny zwrot. Oto przykład:

// Funkcja strzałek
przykład.onClick = (x, y, z) => to.Zrób coś()
// równoważne prostej funkcji
przykład.onClick = funkcja (x, y, z)
Zwróć to.Zrób coś();
.wiązać (this);

Dzięki użyciu funkcji strzałek po prostu pozwala tylko na jedno wyrażenie i zwraca je w sposób domyślny.

„To” wiązanie : Automatycznie wiąże słowo kluczowe „to” z kodem otoczonym funkcjami strzałki. Na przykład:

var x = to;
przykład.onClick = function ()
X.Zrób coś();
;

Do

przykład.onClick = () => to.Zrób coś()

Ponadto zapewnia krótszą, prostszą i bardziej kompaktową wersję kodu.

Jak używać funkcji strzałek w JavaScript

W JavaScript możemy używać funkcji strzałek z pojedynczym, wieloma lub nawet bez parametrów. Są przydatne do jednej liniowej akcji, zmniejszając kod wielu linii w mniej linii, a tym samym oszczędzające miejsce. Zrozummy to przy przykładowym:

Funkcja strzałki JavaScript bez parametrów

Poniższa składnia jest używana, gdy funkcja strzałki działa z zerowymi parametrami.

Składnia:

() => instrukcja (s)

Tutaj stwierdzenie jest organem funkcji zawierającej wiersze kodu.

Przykład:

Let Print = () => konsola.log („Hello”);
wydrukować();

W powyższym przykładzie po prostu drukujemy „Hello” za pomocą funkcji strzałki. Jak widać, funkcje strzałek nie mają żadnej nazwy, więc są również znane jako funkcje anonimowe. Ostatecznie nie możemy ich ponownie zadzwonić ani ponownie wykorzystywać w razie potrzeby, ponieważ nie mają one żadnej nazwy, ale jeśli musimy zadzwonić lub ponownie wykorzystywać funkcje strzałek, musimy je przypisać do zmiennej, a następnie wywołać przy użyciu tej nazwy zmiennej.

Tutaj przypisaliśmy go do zmiennej „wydrukuj” i nazwaliśmy zmienną w drugiej linii.

Wyjście:

Funkcja strzałki JavaScript z pojedynczym parametrem

W przypadku pojedynczego parametru stosuje się następującą składnię:

Składnia:

(p) => instrukcja (s)

Lub możesz usunąć nawiasy i przepisać je jak:

p => instrukcja (s)

Tutaj stwierdzenie jest organem funkcji zawierającej wiersze kodu i P to parametr przekazany.

Przykład:
W tym przykładzie funkcja strzałki jest używana jako argument metody MAP (), która przekształca tablicę ciągów w tablicę zawierającą długość ciągu:

Let Days = [„Monday”, „Wtorek”, „środa”];
Niech długości = dni.Mapa (dni => dni.długość);
konsola.log (długości);

Wyjście:

Funkcja strzałki JavaScript z wieloma parametrami

Podczas przekazywania dwóch lub więcej parametrów jest używana następująca:

Składnia:

(P1, P2,…, pn) => Instrukcja;

Tutaj stwierdzenie jest organem funkcji zawierającej wiersze kodu i P to parametr przekazany. W tym „=> instrukcja” jest równoważne:

=> return instrukcja;

W poniższym przykładzie stosuje się metodę sort () bez użycia funkcji strzałki, do sortowania liczb w kolejności malejącej:

Niech num = [3,1,5];
num.sort (funkcja (a, b)
zwrot B - a;
);
konsola.log (num);

Można to przekształcić w funkcję strzałki

Niech num = [3,1,5];
num.sort ((a, b) => b - a);
konsola.log (num);

W powyższym przykładzie funkcja ma jedno wyrażenie „B-A”, więc po prostu zwraca wynik wyrażenia. Ale w przypadku składni blokowej musisz wspomnieć o słowach kluczowych.

Wyjście:

W ten sposób możemy przekształcić dowolną funkcję w funkcję strzałki. Istnieją jednak dwa punkty, o których należy pamiętać podczas pracy z funkcjami strzałek:

• Funkcja strzałek nie powinna być używana do tworzenia metod wewnętrznych obiektów
• Funkcje strzałek nie mogą być używane jako konstruktor.

Wniosek

Funkcje strzałek są najłatwiejszym sposobem deklarowania dowolnych funkcji i zmniejsza linie kodów, bez wpływu na funkcjonalność kodu. W tym artykule dowiedzieliśmy się, że funkcje strzałek są niezwykle przydatne, jak konwertują złożoną składnię i długą linię kodu na bardziej kompaktowy i prostszy kod. Ponadto nazwanie funkcji strzałek nie jest konieczne, chyba że wywołasz lub ponownie użyjesz funkcji.

Początkowo funkcje strzałek mogą wydawać się trudne, ale z czasem, jak rozumiesz koncepcję, stają się łatwiejsze i wygodne do wdrożenia. Stąd przekształcenie kodu na mniej linii z prostszą logiką.