W tym samouczku nauczysz się JavaScript ES6 na podstawie przykładów.
JavaScript ES6 (znany również jako ECMAScript 2015 lub ECMAScript 6 ) to nowsza wersja JavaScript, która została wprowadzona w 2015 roku.
ECMAScript to standard używany w języku programowania JavaScript. ECMAScript zapewnia specyfikację tego, jak powinien działać język programowania JavaScript.
Ten samouczek zawiera krótkie podsumowanie często używanych funkcji ES6, dzięki czemu można szybko rozpocząć korzystanie z ES6.
JavaScript niech
JavaScript letjest używany do deklarowania zmiennych. Wcześniej zmienne deklarowano za pomocą varsłowa kluczowego.
Aby dowiedzieć się więcej o różnicy między leti var, odwiedź JavaScript let vs var.
Zmienne zadeklarowane przy użyciu letmają zasięg blokowy . Oznacza to, że są dostępne tylko w określonym bloku. Na przykład,
// variable declared using let let name = 'Sara'; ( // can be accessed only inside let name = 'Peter'; console.log(name); // Peter ) console.log(name); // Sara
JavaScript stała
constZestawienie służy do deklarowania stałych w JavaScript. Na przykład,
// name declared with const cannot be changed const name = 'Sara';
Po zadeklarowaniu nie możesz zmienić wartości constzmiennej.
Funkcja strzałki JavaScript
W wersji ES6 można używać funkcji strzałek do tworzenia wyrażeń funkcyjnych. Na przykład
ta funkcja
// function expression let x = function(x, y) ( return x * y; )
można zapisać jako
// function expression using arrow function let x = (x, y) => x * y;
Aby dowiedzieć się więcej o funkcjach strzałek, odwiedź stronę Funkcja strzałek JavaScript.
Klasy JavaScript
Klasa JavaScript służy do tworzenia obiektu. Klasa jest podobna do funkcji konstruktora. Na przykład,
class Person ( constructor(name) ( this.name = name; ) )
Słowo kluczowe classsłuży do tworzenia klasy. Właściwości są przypisywane w funkcji konstruktora.
Teraz możesz stworzyć obiekt. Na przykład,
class Person ( constructor(name) ( this.name = name; ) ) const person1 = new Person('John'); console.log(person1.name); // John
Aby dowiedzieć się więcej o zajęciach, odwiedź stronę Zajęcia JavaScript.
Domyślne wartości parametrów
W wersji ES6 można przekazać wartości domyślne w parametrach funkcji. Na przykład,
function sum(x, y = 5) ( // take sum // the value of y is 5 if not passed console.log(x + y); ) sum(5); // 10 sum(5, 15); // 20
W powyższym przykładzie, jeśli nie przekażesz parametru for y, domyślnie zajmie to 5 .
Aby dowiedzieć się więcej o parametrach domyślnych, odwiedź stronę Parametry domyślne funkcji JavaScript.
Literały szablonów JavaScript
Literał szablonu ułatwił umieszczanie zmiennych w ciągu. Na przykład, zanim musiałeś zrobić:
const first_name = "Jack"; const last_name = "Sparrow"; console.log('Hello ' + first_name + ' ' + last_name);
Można to osiągnąć za pomocą literału szablonu przez:
const first_name = "Jack"; const last_name = "Sparrow"; console.log(`Hello $(first_name) $(last_name)`);
Aby dowiedzieć się więcej o literałach szablonów, odwiedź stronę Literał szablonu JavaScript.
Destrukturyzacja JavaScript
Składnia destrukturyzująca ułatwia przypisywanie wartości do nowej zmiennej. Na przykład,
// before you would do something like this const person = ( name: 'Sara', age: 25, gender: 'female' ) let name = person.name; let age = person.age; let gender = person.gender; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
Korzystając ze składni niszczenia ES6 , powyższy kod można zapisać jako:
const person = ( name: 'Sara', age: 25, gender: 'female' ) let ( name, age, gender ) = person; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
Aby dowiedzieć się więcej o destrukturyzacji, odwiedź stronę Destrukturyzacja JavaScript.
Import i eksport JavaScript
Możesz wyeksportować funkcję lub program i użyć go w innym programie, importując go. Pomaga to w tworzeniu elementów wielokrotnego użytku. Na przykład, jeśli masz dwa pliki JavaScript o nazwach contact.js i home.js.
W contact.js pliku, można eksportować do contact()funkcji:
// export export default function contact(name, age) ( console.log(`The name is $(name). And age is $(age).`); )
Następnie, jeśli chcesz użyć contact()funkcji w innym pliku, możesz po prostu zaimportować funkcję. Na przykład w pliku home.js:
import contact from './contact.js'; contact('Sara', 25); // The name is Sara. And age is 25
Obietnice JavaScript
Obietnice są używane do obsługi zadań asynchronicznych. Na przykład,
// returns a promise let countValue = new Promise(function (resolve, reject) ( reject('Promise rejected'); )); // executes when promise is resolved successfully countValue.then( function successValue(result) ( console.log(result); // Promise resolved ), )
Aby dowiedzieć się więcej o obietnicach, odwiedź JavaScript Promises.
Parametr reszty JavaScript i operator rozprzestrzeniania
Możesz użyć parametru rest, aby przedstawić nieograniczoną liczbę argumentów jako tablicę. Na przykład,
function show(a, b,… args) ( console.log(a); // one console.log(b); // two console.log(args); // ("three", "four", "five", "six") ) show('one', 'two', 'three', 'four', 'five', 'six')
Pozostałe argumenty przekazujesz używając … składni. Stąd nazwa parametru rest .
Używasz składni rozkładówek … do kopiowania elementów do pojedynczej tablicy. Na przykład,
let arr1 = ('one', 'two'); let arr2 = (… arr1, 'three', 'four', 'five'); console.log(arr2); // ("one", "two", "three", "four", "five")
Zarówno parametr rest, jak i operator spreadu używają tej samej składni. Jednak operator spreadu jest używany w przypadku tablic (wartości iterowalnych).
Aby dowiedzieć się więcej o operatorze spreadu, odwiedź stronę Operator spreadu w języku JavaScript.
