Funkcje strzałek JavaScript mogą uczynić cię lepszym programistą

Reklama

JavaScript ES6 wprowadził ekscytujące zmiany w świecie tworzenia stron internetowych. Nowe dodatki do języka JavaScript przyniosły nowe możliwości.

Jedną z bardziej popularnych zmian było dodanie funkcji JavaScript do JavaScript. Funkcje strzałek to nowy sposób pisania wyrażeń funkcji JavaScript, który oferuje dwa różne sposoby tworzenia funkcji w aplikacji.

Funkcje strzałek wymagają nieco dostosowania, jeśli jesteś ekspertem w tradycyjnych funkcjach JavaScript. Zobaczmy, co to jest, jak działają i jakie korzyści przynoszą.

Jakie są funkcje strzałek JavaScript?

Funkcje strzałek to nowy sposób pisania wyrażeń funkcyjnych zawarte w wersji JavaScript ES6 Co to jest ES6 i co powinni wiedzieć programiści JavascriptES6 odnosi się do wersji 6 języka programowania ECMA Script (Javascript). Spójrzmy teraz na kilka głównych zmian, które ES6 wprowadza do JavaScript. Czytaj więcej . Są one podobne do wyrażeń funkcji JavaScript, których używasz, z pewnymi nieco innymi regułami.

Funkcje strzałek są zawsze funkcjami anonimowymi i mają różne reguły

toi mają prostszą składnię niż tradycyjne funkcje.

Te funkcje używają nowego tokena strzałki:

=>

Jeśli kiedykolwiek pracowałeś w Pythonie, te funkcje są bardzo podobne do Wyrażenia Lambda w języku Python Przewodnik dla początkujących dotyczący zrozumienia funkcji Lambda w języku PythonLambdy w Pythonie są jedną z najbardziej przydatnych, ważnych i interesujących funkcji, o których warto wiedzieć. Oto jak z nich korzystać i dlaczego są przydatne. Czytaj więcej .

Składnia tych funkcji jest nieco czystsza niż normalne. Należy pamiętać o kilku nowych zasadach:

• Słowo kluczowe funkcji zostało usunięte
• Zwracane słowo kluczowe jest opcjonalne
• Nawiasy klamrowe są opcjonalne

Jest wiele drobnych zmian do omówienia, więc zacznijmy od podstawowego porównania wyrażeń funkcji.

Jak korzystać z funkcji strzałek

Funkcje strzałek są łatwe w użyciu. Zrozumienie funkcji strzałek jest łatwiejsze w porównaniu z tradycyjnymi wyrażeniami funkcji.

Oto wyrażenie funkcyjne, które dodaje dwie liczby; najpierw za pomocą tradycyjnej metody funkcji:

 niech addnum = funkcja (num1, num2) {return num1 + num2; }; addnum (1,2); >>3

Jest to dość prosta funkcja, która pobiera dwa argumenty i zwraca sumę.

Oto wyrażenie zmienione na funkcję strzałki:

niech addnum = (num1, num2) => {return num1 + num2;}; addnum (1,2); >>3

Składnia funkcji jest całkiem inna przy użyciu funkcji strzałki. Słowo kluczowe funkcji zostało usunięte; token strzałki informuje JavaScript, że piszesz funkcję.

Nawiasy klamrowe i słowo kluczowe return nadal tam są. Są one opcjonalne z funkcjami strzałek. Oto jeszcze prostszy przykład tej samej funkcji:

niech addnum = (num1, num2) => num1 + num2;

Słowo kluczowe return i nawiasy klamrowe zniknęły. Pozostaje bardzo czysta funkcja jednowierszowa, która stanowi prawie połowę kodu w porównaniu z funkcją oryginalną. Otrzymujesz ten sam wynik przy znacznie mniej napisanym kodzie.

Funkcje strzałek to coś więcej. zanurkujmy głębiej, abyś lepiej wyczuł, co mogą zrobić.

Funkcje funkcji strzałek

Funkcje strzałek mają wiele różnych zastosowań i funkcji.

Regularne funkcje

Funkcje strzałek mogą używać jednego lub więcej argumentów. Jeśli używasz dwóch lub więcej argumentów, musisz zawrzeć je w nawiasach. Jeśli masz tylko jeden argument, nie musisz używać nawiasów.

niech kwadrat = x => x * x kwadrat (2); >>4

Funkcji strzałek można używać bez argumentów. Jeśli nie używasz żadnych argumentów w swojej funkcji, musisz użyć pustego nawiasu.

let helloFunction = () => Console.log („Witaj czytniku!”); helloFunction (); >> Witaj czytelniku!

Takie proste funkcje wykorzystują znacznie mniej kodu. Wyobraź sobie, o ile łatwiej kompleks projekt jak pokaz slajdów JavaScript Jak zbudować pokaz slajdów JavaScript w 3 łatwych krokachDzisiaj pokażę ci, jak zbudować pokaz Javacript od zera - wskoczmy od razu! Czytaj więcej staje się, gdy masz prostszy sposób na pisanie funkcji.

Korzystanie z tego

Pojęcie to jest najtrudniejszą częścią korzystania z JavaScript. Funkcje strzałek sprawiają to łatwiejszy w użyciu.

Podczas korzystania z funkcji strzałek to zostanie zdefiniowany przez funkcję zamykającą. Może to powodować problemy, które pojawiają się podczas tworzenia zagnieżdżonych funkcji i potrzeb to zastosować do swojej głównej funkcji

Oto popularny przykład, który pokazuje obejście, którego musisz używać z normalnymi funkcjami.

funkcja Person () {var that = this; // Musisz przypisać „to” nowej zmiennej that.age = 0; setInterval (funkcja growUp () {that.age ++; }, 1000); }

Przypisywanie wartości to na zmienną czyni ją czytelną, gdy wywołujesz funkcję wewnątrz głównej funkcji. Jest to bałagan, oto lepszy sposób na zrobienie tego za pomocą funkcji strzałek.

funkcja Person () {this.age = 0; setInterval (() => {this.age ++; // Teraz możesz użyć „tego” bez zadeklarowania nowej zmiennej}, 1000); }

Chociaż są one doskonałe do funkcji, nie należy ich używać do tworzenia metod wewnątrz obiektu. Funkcje strzałek nie używają właściwego zakresu to.

Oto prosty obiekt, który tworzy metodę wewnątrz za pomocą funkcji strzałki. Metoda powinna zmniejszyć polewy zmienna jeden po wywołaniu. Zamiast tego w ogóle nie działa.

niech pizza = { polewy: 5, removeToppings: () => {this.toppings--; } } // Obiekt pizzy z 5 dodatkami. > pizza. >> {polewy: 5, removeToppings: f} pizza.removeToppings (); // Metoda nie zrobi nic z obiektem> pizza. >> {polewy: 5, removeToppings: f} // Nadal ma 5 polew.

Praca z tablicami

Za pomocą funkcji strzałek można uprościć kod używany do pracy z metodami tablicowymi. Tablice i metody tablicowe są bardzo ważnymi częściami JavaScript 5 metod tablic JavaScript, które powinieneś dziś opanowaćChcesz zrozumieć tablice JavaScript, ale nie możesz się z nimi zmierzyć? Sprawdź nasze przykłady tablic JavaScript w celu uzyskania wskazówek. Czytaj więcej więc będziesz ich często używać.

Istnieje kilka przydatnych metod, takich jak mapa Metoda, która uruchamia funkcję na wszystkich elementach tablicy i zwraca nową tablicę.

niech myArray = [1,2,3,4]; myArray.map (funkcja (element) { element zwrotny + 1; }); >> [2,3,4,5]

Jest to dość prosta funkcja, która dodaje jedną do każdej wartości w tablicy. Możesz napisać tę samą funkcję z mniejszym kodem, używając funkcji strzałki.

niech myArray = [1,2,3,4]; myArray.map (element => { element zwrotny + 1; }); >> [2,3,4,5]

Teraz jest o wiele łatwiej czytać.

Tworzenie literałów obiektowych

Funkcje strzałek mogą służyć do tworzenia literałów obiektowych w JavaScript. Zwykłe funkcje mogą je tworzyć, ale są trochę dłużej.

let createObject = funkcja createName (pierwszy, ostatni) {return {first: first, last: last}; };

Możesz zrobić ten sam obiekt za pomocą funkcji strzałki, używając mniej kodu. Za pomocą notacji strzałek trzeba zawijać treść funkcji w nawiasach. Oto ulepszona składnia z funkcjami strzałek.

let createArrowObject = (first, last) => ({first: first, last: last});

Funkcje strzałek JavaScript i nie tylko

Znasz już różne sposoby, w jakie funkcje strzałek JavaScript ułatwiają Ci pracę jako programista. Skracają składnię, dają większą kontrolę przy użyciu to, ułatwia tworzenie obiektów i daje nowy sposób pracy z metodami tablicowymi.

Wprowadzenie funkcji strzałek wraz z wieloma innymi funkcjami w JavaScript ES6 pokazuje, jak ważny jest JavaScript w tworzeniu stron internetowych. Jest jednak o wiele więcej do zrobienia.

Chcesz dowiedzieć się więcej o JavaScript? Nasz Ściągawka JavaScript The Ultimate JavaScript ŚciągawkaSkorzystaj z szybkiego odświeżania elementów JavaScript za pomocą tego ściągawki. Czytaj więcej zapewnia cenne informacje i więcej informacji jak działa JavaScript Co to jest JavaScript i jak działa?Jeśli uczysz się tworzenia stron internetowych, oto co powinieneś wiedzieć o JavaScript i jak działa on z HTML i CSS. Czytaj więcej może sprawić, że będziesz lepszym programistą.