JavaScript ES6 wprowadza nową składnię i nowe niesamowite funkcje, aby Twój kod był bardziej nowoczesny i czytelny. Pozwala pisać mniej kodu i robić więcej. ES6 wprowadza nas w wiele wspaniałych funkcji, takich jak funkcje strzałek, ciągi szablonów, niszczenie klas, moduły… i wiele innych. Zobaczmy.

const i let

const jest nowym słowem kluczowym w ES6 do deklarowania zmiennych. const jest bardziej wydajny niżvar. Raz użyta zmienna nie może zostać ponownie przypisana., Innymi słowy, jest to zmienna niezmienna, z wyjątkiem sytuacji, gdy jest używana z obiektami.

jest to naprawdę przydatne do kierowania selektorów. Na przykład, gdy mamy Pojedynczy przycisk wywołujący zdarzenie lub gdy chcesz wybrać element HTML w JavaScript, użyj constzamiast var. Dzieje się tak dlatego, że var jest 'hoisted'. Zawsze lepiej jest użyć const, gdy nie chcesz ponownie przypisać zmiennej .,

w powyższym kodzieconst nie zmieni się i nie można go ponownie przypisać. Jeśli spróbujesz nadać mu nową wartość, zwróci ci błąd.

let można ponownie przypisać i przyjąć nową wartość. Tworzy zmienną zmienną.

let jest taki sam jakconst w tym, że oba są zablokowane-zakres. Oznacza to, że zmienna jest dostępna tylko w jej zakresie.,

funkcje strzałek

funkcja strzałek jest naprawdę niesamowita i sprawia, że Twój kod jest bardziej czytelny, bardziej uporządkowany i wygląda jak nowoczesny kod. Zamiast tego:

Użyj tego:

jak widzisz, funkcja strzałki wydaje się bardziej czytelna i czysta! Nie musisz już używać starej składni.

Możesz również użyć funkcji strzałek zmap,filter Ireduce wbudowanymi funkcjami.,

funkcja mapy ze strzałkami wygląda bardziej czytelnie niżmap w ES5. Dzięki ES6 możesz pisać krótszy i inteligentniejszy kod. Możesz użyć tego samego z filter I reduce.

literały szablonów

literały szablonów lub ciągi szablonów są całkiem fajne. Nie musimy używać operatora plus (+) do łączenia łańcuchów lub gdy chcemy użyć zmiennej wewnątrz łańcucha.,

stara składnia:

Nowa składnia ES6:

takie proste! To naprawdę ogromna różnica między starą składnią a ES6. Podczas grania strunami, literalny ciąg w ES6 wygląda bardziej zorganizowany i dobrze zorganizowany niż ES5.

domyślne parametry

kiedy pracuję w PHP, zwykle używam domyślnych parametrów. Pozwalają one na wcześniejsze zdefiniowanie parametru.,

tak więc, gdy zapomnisz napisać parametr, nie zwróci on niezdefiniowanego błędu, ponieważ parametr jest już zdefiniowany domyślnie. Więc gdy uruchomisz swoją funkcję z pominiętym parametrem, pobierze ona wartość domyślnego parametru t I nie zwróci błędu!

spójrz na ten przykład:

powyższa funkcja zwraca niezdefiniowaną, ponieważ zapomnieliśmy podać jej drugi parametr age.,

ale jeśli użyliśmy parametru domyślnego, nie zwróci on undefined i użyje jego wartości, gdy zapomnimy przypisać parametr!

jak widzisz, funkcja zwraca wartość, mimo że pominęliśmy drugi parametr. Teraz z domyślnym parametrem możemy poradzić sobie z błędem z góry.

zniszczenie tablicy i obiektu

zniszczenie ułatwia przypisanie wartości tablicy lub obiektu do nowej zmiennej.,

stara składnia:

z ES6 składnia:

z ES5 musimy przypisać każdą wartość do każdej zmiennej. W ES6 po prostu umieszczamy nasze wartości w nawiasach klamrowych, aby uzyskać dowolną właściwość obiektu.

Uwaga: Jeśli przypisasz zmienną, która nie jest identyczna z nazwą właściwości, zwróci ona undefined. Na przykład, jeśli nazwa właściwości to name I przypisujemy ją do zmiennej username, zwróci ona undefined.,

zawsze musimy nazwać zmienną tak samo jak nazwę właściwości. Ale jeśli chcemy zmienić nazwę zmiennej, możemy zamiast tego użyć dwukropka :.

dla tablicy używamy tej samej składni co obiekt. Musimy tylko zastąpić nawiasy klamrowe nawiasami kwadratowymi.

Importuj i eksportuj

Korzystanie z importI export sprawia, że aplikacja JavaScript jest bardziej wydajna., Pozwalają one na tworzenie oddzielnych i wielokrotnego użytku komponentów.

Jeśli znasz dowolny Framework MVC JavaScript, zobaczysz, że używająimport Iexport do obsługi komponentów przez większość czasu. Więc jak one naprawdę działają?

To proste! export pozwala na eksport modułu do użycia w innym komponencie JavaScript. Używamy import aby zaimportować ten moduł do użycia go w naszym komponencie.

na przykład mamy dwa pliki., Pierwszy nosi nazwę detailComponent.js, a drugi nazwę homeComponent.js.

WdetailComponent.js zamierzamy wyeksportować funkcjędetail.

a jeśli chcemy użyć tej funkcji w homeComponent.js, użyjemy tylko import.

jeśli chcemy zaimportować więcej niż jeden moduł, umieszczamy go w nawiasach klamrowych.,

fajne, prawda?!

obietnice

obietnice to nowa funkcja ES6. Jest to metoda zapisu kodu asynchronicznego. Może być używana, gdy na przykład chcemy pobrać dane z API lub gdy mamy funkcję, która wymaga czasu. Obietnice ułatwiają rozwiązanie problemu, więc stwórzmy naszą pierwszą obietnicę!

jeśli zalogujesz swoją konsolę, zwróci ona obietnicę. Tak więc, jeśli chcemy wykonać funkcję po pobraniu danych, użyjemy obietnicy., Obietnica wymaga dwóch parametrów: resolve I reject aby obsłużyć oczekiwany błąd.

Uwaga: funkcja fetch sama zwraca obietnicę!

const url='https://jsonplaceholder.typicode.com/posts';
const getData=(url)=>{return fetch(url);}
getData(url).then(data=> data.json()).then(result=> console.log(result));

jeśli zalogujesz konsolę, zwróci ona tablicę danych.

parametr Rest i operator spreadu

parametry rest są używane do uzyskania argumentu tablicy i zwrócenia nowej tablicy.,

operator spread ma taką samą składnię jak parametr rest, ale operator spread pobiera samą tablicę, a nie tylko argumenty. Możemy użyć parametru Spread, aby uzyskać wartości tablicy, zamiast używać pętli for lub jakiejkolwiek innej metody.

klasy

klasy są rdzeniem programowania obiektowego (OOP). Sprawiają, że Twój kod jest bezpieczniejszy i hermetyzowany. Używanie klas nadaje Twojemu kodowi ładną strukturę i utrzymuje jego orientację.,

aby utworzyć klasę, użyj słowa kluczowegoclass po którym następuje nazwa klasy z dwoma nawiasami klamrowymi.

teraz możemy uzyskać dostęp do metod i właściwościclassużywając słowa kluczowegonew.

class myClass{ constructor(name,age){ this.name=name; this.age=age;}}const Home= new myClass("said",20);console.log(Home.name)// said

aby dziedziczyć z innej klasy, użyj słowa kluczowegoextends, po którym następuje nazwa klasy, z której chcesz dziedziczyć.,

możesz dowiedzieć się więcej o zajęciach tutaj.

ES6 ma inne niesamowite funkcje — możesz je poznać tutaj.

podsumowanie

mam nadzieję, że ten artykuł okazał się przydatny i mam nadzieję, że udało mi się przedstawić wam niektóre funkcje ES6. Jeśli tak, zapisz się na tę listę mailingową, aby dowiedzieć się więcej o tematach Front-end. Dziękuję za poświęcony czas.

nawiasem mówiąc, ostatnio pracowałem z silną grupą inżynierów oprogramowania dla jednej z moich aplikacji mobilnych., Organizacja była świetna, a produkt został dostarczony bardzo szybko, znacznie szybciej niż inne firmy i freelancerzy, z którymi pracowałem, i myślę, że mogę szczerze polecić je do innych projektów. Wyślij mi maila, jeśli chcesz się skontaktować — [email protected].