Tässä opetusohjelmassa opit JavaScript ES6: sta esimerkkien avulla.
JavaScript ES6 (tunnetaan myös nimellä ECMAScript 2015 tai ECMAScript 6 ) on JavaScriptin uudempi versio, joka otettiin käyttöön vuonna 2015.
ECMAScript on standardi, jota JavaScript-ohjelmointikieli käyttää. ECMAScript tarjoaa erittelyn siitä, miten JavaScript-ohjelmointikielen tulisi toimia.
Tässä opetusohjelmassa on lyhyt yhteenveto ES6: n yleisimmin käytetyistä ominaisuuksista, jotta voit aloittaa nopeasti ES6: ssa.
JavaScript anna
JavaScriptiä letkäytetään muuttujien ilmoittamiseen. Aikaisemmin muuttujat ilmoitettiin käyttämällä varavainsanaa.
Jos haluat lisätietoja letja välillä var, käy JavaScript let vs var.
Muuttujia käyttäen ilmoitetut muuttujat letovat lohkottuja . Tämä tarkoittaa, että niihin pääsee vain tietyssä korttelissa. Esimerkiksi,
// variable declared using let let name = 'Sara'; ( // can be accessed only inside let name = 'Peter'; console.log(name); // Peter ) console.log(name); // Sara
JavaScript-vakio
constLausuma käytetään julistaa vakioita JavaScript. Esimerkiksi,
// name declared with const cannot be changed const name = 'Sara';
Kun se on ilmoitettu, et voi muuttaa constmuuttujan arvoa .
JavaScript-nuolitoiminto
Vuonna ES6 versio, voit käyttää nuoli toimintoja luoda toiminnon ilmaisuja. Esimerkiksi
Tämä toiminto
// function expression let x = function(x, y) ( return x * y; )
voidaan kirjoittaa muodossa
// function expression using arrow function let x = (x, y) => x * y;
Lisätietoja nuolitoiminnoista on JavaScript-nuolitoiminnossa.
JavaScript-luokat
JavaScript-luokkaa käytetään objektin luomiseen. Luokka on samanlainen kuin konstruktoritoiminto. Esimerkiksi,
class Person ( constructor(name) ( this.name = name; ) )
Avainsanaa classkäytetään luokan luomiseen. Ominaisuudet määritetään konstruktoritoiminnossa.
Nyt voit luoda objektin. Esimerkiksi,
class Person ( constructor(name) ( this.name = name; ) ) const person1 = new Person('John'); console.log(person1.name); // John
Saat lisätietoja kursseista käymällä JavaScript-luokat.
Parametrien oletusarvot
ES6-versiossa voit välittää oletusarvot toimintoparametreista. Esimerkiksi,
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
Yllä olevassa esimerkissä, jos et välitä parametria parametrille y, se vie oletusarvoisesti 5 .
Lisätietoja oletusparametreista on JavaScript-funktion oletusparametrit.
JavaScript-mallikirjaimet
Mallin literaali on helpottanut muuttujien sisällyttämistä merkkijonoon. Esimerkiksi ennen kuin joudut tekemään:
const first_name = "Jack"; const last_name = "Sparrow"; console.log('Hello ' + first_name + ' ' + last_name);
Tämä voidaan saavuttaa mallipohjan kirjaimella seuraavasti:
const first_name = "Jack"; const last_name = "Sparrow"; console.log(`Hello $(first_name) $(last_name)`);
Lisätietoja mallilitraaleista on JavaScript Template Literal -sivulla.
JavaScriptin uudelleenjärjestely
Tuhoava syntaksin avulla on helpompaa määrittää arvoja uudelle muuttujalle. Esimerkiksi,
// 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
Käyttämällä ES6 destrukturointiainetta syntaksin, edellä koodi voidaan kirjoittaa:
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
Lisätietoja tuhoamisesta on JavaScript-uudelleenjärjestelyssä.
JavaScriptin tuonti ja vienti
Voit viedä toiminnon tai ohjelman ja käyttää sitä toisessa ohjelmassa tuomalla sen. Tämä auttaa tekemään uudelleenkäytettäviä komponentteja. Jos sinulla on esimerkiksi kaksi JavaScript-tiedostoa nimeltä contact.js ja home.js.
Vuonna contact.js tiedoston, voit viedäcontact() toiminto:
// export export default function contact(name, age) ( console.log(`The name is $(name). And age is $(age).`); )
Sitten, kun haluat käyttää contact()toimintoa toisessa tiedostossa, voit yksinkertaisesti tuoda toiminnon. Esimerkiksi home.js-tiedostossa:
import contact from './contact.js'; contact('Sara', 25); // The name is Sara. And age is 25
JavaScript-lupaukset
Lupauksia käytetään asynkronisten tehtävien käsittelemiseen. Esimerkiksi,
// 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 ), )
Lisätietoja lupauksista on JavaScript Promises -sivulla.
JavaScript Rest -parametri ja levitysoperaattori
Voit käyttää loput-parametria määrittelemättömän määrän argumentteja matriisina. Esimerkiksi,
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')
Välität muut argumentit … syntaksin avulla. Siksi nimi lepo parametri .
Käytät levisi syntaksin … kopioida kohteita yhdeksi array. Esimerkiksi,
let arr1 = ('one', 'two'); let arr2 = (… arr1, 'three', 'four', 'five'); console.log(arr2); // ("one", "two", "three", "four", "five")
Sekä loput parametri että hajautusoperaattori käyttävät samaa syntaksia. Levitysoperaattoria käytetään kuitenkin matriisien kanssa (iteroituvat arvot).
Jos haluat lisätietoja levitysoperaattorista, käy JavaScript Spread Operatorissa.
