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

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

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 popularniejszych zmian było dodanie funkcji strzałek do JavaScript. Funkcje strzałek to nowy sposób pisania wyrażeń funkcji JavaScript, dający dwa różne sposoby tworzenia funkcji w aplikacji.



Funkcje strzałek wymagają trochę dostosowania, jeśli jesteś ekspertem w tradycyjnych funkcjach JavaScript. Rzućmy okiem na to, czym one są, jak działają i jakie przynoszą korzyści.





Czym są funkcje strzałek JavaScript?

Funkcje strzałek to nowy sposób pisania wyrażeń funkcyjnych, które były zawarte w wydaniu JavaScript ES6 . Są one podobne do wyrażeń funkcji JavaScript, których używałeś, z pewnymi nieco innymi regułami.

Funkcje strzałek są zawsze funkcjami anonimowymi, mają różne zasady



this

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

jak nagrywać rozmowę na iPhonie bez aplikacji?

Te funkcje wykorzystują nowy żeton strzałki:



=>

Jeśli kiedykolwiek pracowałeś w Pythonie, te funkcje są bardzo podobne do Wyrażenia lambda w Pythonie .

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



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

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

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 funkcyjnymi.

Oto wyrażenie funkcyjne, które dodaje dwie liczby; najpierw przy użyciu tradycyjnej metody funkcji:

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

To całkiem prosta funkcja, która pobiera dwa argumenty i zwraca sumę.

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

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

Składnia funkcji jest zupełnie 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 w przypadku funkcji strzałek. Oto jeszcze prostszy przykład tej samej funkcji:

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

Słowo kluczowe return i nawiasy klamrowe zniknęły. Pozostaje bardzo czysta jednowierszowa funkcja, która stanowi prawie połowę kodu niż oryginalna funkcja. Otrzymasz ten sam wynik przy znacznie mniej napisanym kodzie.

Jest więcej funkcji strzałek. zanurkujmy głębiej, aby lepiej wyczuć, co mogą zrobić.

Funkcje strzałek

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

uruchom Windows XP na Windows 10

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 umieścić je w nawiasach. Jeśli masz tylko jeden argument, nie musisz używać nawiasów.

let square = x => x * x
square(2);
>>4

Funkcje strzałek mogą być używane bez argumentów. Jeśli nie używasz żadnych argumentów w swojej funkcji, musisz użyć pustego nawiasu.

let helloFunction = () => Console.log('Hello reader!');
helloFunction();
>>Hello reader!

Proste funkcje, takie jak te, zużywają znacznie mniej kodu. Wyobraź sobie, o ile łatwiej jest kompleks projekt jak pokaz slajdów JavaScript staje się, gdy masz prostszy sposób pisania funkcji.

Korzystanie z tego

Pojęcie

this

wydaje się być najtrudniejszą częścią korzystania z JavaScript. Funkcje strzałek sprawiają, że

this

łatwiejszy w użyciu.

Kiedy używasz funkcji strzałek

this

zostanie zdefiniowana przez otaczającą funkcję. Może to powodować problemy, które pojawiają się podczas tworzenia zagnieżdżonych funkcji i potrzeb

this

zastosować do swojej głównej funkcji

Oto popularny przykład pokazujący obejście, którego należy użyć w przypadku zwykłych funkcji.

function Person() {
var that = this; //You have to assign 'this' to a new variable
that.age = 0;
setInterval(function growUp() {
that.age++;
}, 1000);
}

Przypisanie wartości

this

do zmiennej sprawia, że ​​jest czytelny, gdy wywołujesz funkcję wewnątrz swojej funkcji głównej. To jest bałagan, oto lepszy sposób na zrobienie tego za pomocą funkcji strzałek.

function Person(){
this.age = 0;
setInterval(() => {
this.age++; // Now you can use 'this' without a new variable declared
}, 1000);
}

Chociaż świetnie nadają się do funkcji, nie powinny być używane do tworzenia metod wewnątrz obiektu. Funkcje strzałek nie używają prawidłowego zakresu

this

.

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

czy możesz usunąć post na facebooku?
let pizza = {
toppings: 5,
removeToppings: () => {
this.toppings--;
}
}
//A pizza object with 5 toppings
>pizza
>>{toppings: 5, removeToppings: f}
pizza.removeToppings(); //The method will not do anything to the object
>pizza
>>{toppings: 5, removeToppings: f} //Still has 5 toppings

Praca z tablicami

Używając funkcji strzałek możesz uprościć kod używany do pracy z metodami tablicowymi. Tablice i metody tablicowe są bardzo ważnymi częściami JavaScript 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ę.

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

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

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

Teraz jest o wiele łatwiej czytać.

Tworzenie literałów obiektowych

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

let createObject = function createName(first,last) {
return {
first: first,
last: last
};
};

Możesz zrobić ten sam obiekt za pomocą funkcji strzałki, używając mniej kodu. Używając notacji strzałkowej, będziesz musiał umieścić 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 teraz kilka różnych sposobów, w jakie funkcje strzałek JavaScript ułatwiają życie programistom. Skracają składnię, dają większą kontrolę nad używaniem

this

, ułatwiają tworzenie obiektów i zapewniają nowy sposób pracy z metodami tablicowymi.

Wprowadzenie funkcji strzałek, wraz z wieloma innymi funkcjami, w JavaScript ES6 pokazuje, jak ważny stał się JavaScript w tworzeniu stron internetowych. Możesz zrobić o wiele więcej.

Chcesz dowiedzieć się więcej o JavaScript? Poznaj te frameworki JavaScript. Plus, nasz Ściągawka JavaScript dostarcza cennych informacji i dowiaduje się więcej o jak działa JavaScript może sprawić, że będziesz lepszym programistą.

Udział Udział Ćwierkać E-mail 6 dźwiękowych alternatyw: najlepsze darmowe lub tanie aplikacje do audiobooków

Jeśli nie masz ochoty płacić za audiobooki, oto kilka świetnych aplikacji, które pozwolą Ci ich słuchać bezpłatnie i legalnie.

Czytaj dalej Powiązane tematy
  • Programowanie
  • JavaScript
O autorze Antoniego Granta(40 opublikowanych artykułów)

Anthony Grant jest niezależnym pisarzem zajmującym się programowaniem i oprogramowaniem. Jest specjalistą w dziedzinie informatyki, zajmuje się programowaniem, Excelem, oprogramowaniem i technologią.

Więcej od Anthony'ego Granta

Zapisz się do naszego newslettera

Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!

Kliknij tutaj, aby zasubskrybować