Top 10 funkcji ES6 na przykładzie

Chociaż specyfikacja ES6 nie jest super-miękka, myślę, że wielu deweloperów nadal nie są zaznajomieni z nim., Głównym powodem jest prawdopodobnie słabe wsparcie w przeglądarkach internetowych tuż po wydaniu specyfikacji. Obecnie specyfikacja ma ponad 2 lata, a wiele nowoczesnych przeglądarek internetowych działa dobrze z ES6. Nawet jeśli ty (lub twoi klienci) nie używasz najnowszej wersji przeglądarki internetowej, możesz użyć transpilerów (takich jak Babel), które przekształcają źródła ES6 do źródeł ES5 podczas procesu budowania aplikacji. Oznacza to, że najwyższy czas zrobić krok do przodu i nauczyć się ES6.

w tym artykule postaram się w zwięzły sposób przedstawić najbardziej przydatne funkcje., Po samouczku, będziesz posiadać podstawowe umiejętności i być w stanie zastosować je w prawdziwym projekcie. Nie traktuj tego jako przewodnika ani Dokumentacji. Moim celem jest zachęcenie Cię do głębszego kopania i zapoznania się z ES6.

const i niech słowa kluczowe

const umożliwia definiowanie stałych (wreszcie!). let umożliwia definiowanie zmiennych. To świetnie, ale czy nie mamy już zmiennych w JavaScript? Tak, to prawda, ale zmienne zadeklarowane przez var mają zakres funkcji i są podnoszone do góry. Oznacza to, że zmienna może być użyta przed jej zadeklarowaniem., niech zmienne i stałe mają zakres blokowy (otoczony przez {}) i nie mogą być użyte przed deklaracją.

funkcje pomocnicze tablicy

pojawiły się nowe fajne funkcje pomocnicze, które ułatwiają pracę z tablicami JS w najbardziej użytecznych przypadkach. Ile razy zaimplementowałeś logikę: filtrowanie, sprawdzanie czy któryś lub wszystkie elementy spełniają warunek, czy konwersja elementów? Pewnie bardzo często. Teraz masz świetne funkcje językowe, które wykonają pracę za Ciebie., Oto, moim zdaniem, najcenniejsze funkcje:

forEach

wykonuje podaną funkcję dla każdego elementu tablicy, przekazując element tablicy jako argument.

map

tworzy nową tablicę zawierającą tę samą liczbę elementów, ale elementy wyjściowe są tworzone przez podaną funkcję. Po prostu konwertuje każdy element tablicy na coś innego.,

filtr

tworzy nową tablicę zawierającą podzbiór oryginalnej tablicy. Wynik ma te elementy, które przechodzą test realizowany przez podaną funkcję, która powinna zwracać true lub false.

find

znajduje pierwszy element, który przejdzie test zaimplementowany przez podaną funkcję, która powinna zwracać true lub false.,

każdy

sprawdza, czy każdy element tablicy przechodzi test zaimplementowany przez podaną funkcję, która powinna zwracać true lub false.

niektóre

sprawdza, czy jakikolwiek element tablicy przejdzie test zaimplementowany przez podaną funkcję, która powinna zwracać true lub false.,

reduce

stosuje funkcję przekazaną jako pierwszy parametr względem akumulatora i każdego elementu w tablicy (od lewej do prawej), zmniejszając ją do pojedynczej wartości. Wartość początkową akumulatora należy podać jako drugi parametr funkcji redukcji.

funkcje strzałek

implementacja bardzo prostych funkcji (takich jak wspomniana suma lub produkt) wymaga napisania dużej ilości kotłów., Czy jest na to jakieś lekarstwo? Tak, po prostu spróbuj funkcji strzałki!

funkcje strzałek mogą być również wbudowane. To naprawdę upraszcza Kod:

funkcje strzałek mogą być również bardziej złożone i mają wiele linii kodu:

klasy

który programista Javy nie przegapi klas podczas przełączania na projekt js?, Kto nie lubi jawnego dziedziczenia, jak w języku Java, zamiast pisać magiczny kod do dziedziczenia prototypowego? Chociaż niektórzy programiści js narzekali, klasy zostały wprowadzone w ES6. Nie zmieniają pojęcia dziedziczenia. Są tylko cukrem składniowym dla dziedziczenia prototypowego.

ulepszone literały obiektów

literały obiektów zostały ulepszone., Teraz możemy znacznie łatwiej:

• definiować pola z przypisaniem zmiennych o tej samej nazwie
• definiować funkcje
• definiować dynamiczne (obliczane) właściwości

ciągi szablonów