ECMAScript 2017

JavaScriptin nimisäännöt alkavat ES1, ES2, ES3, ES5 ja ES6.

Mutta ECMAScript 2016 ja 2017 eivät ole kutsuttu ES7 ja ES8.

Vuodesta 2016 lähtien uudet versiot on nimetty vuosin (ECMAScript 2016/2017/2018).

ECMAScript 2017:n uudet ominaisuudet

Tämä luku esittelee ECMAScript 2017:n uudet ominaisuudet:

  • JavaScript-merkkijonon täyttäminen
  • JavaScript Object.entries
  • JavaScript Object.values
  • JavaScript:n asynkroniset funktiot
  • JavaScript jaetun muistin

JavaScript-merkkijonon täyttäminen

ECMAScript 2017 lisäsi kaksi uutta String-metodia:padStart ja padEndtukeakseen täyttämistä merkkijonon alussa ja lopussa.

esimerkki

let str = "5";
str = str.padStart(4,0);
// Tuloksena: 0005

Kokeile itse

esimerkki

let str = "5";
str = str.padEnd(4,0);
// Tulos on: 5000

Kokeile itse

Internet Explorer ei tue merkkijonon täyttämistä.

Firefox ja Safari olivat ensimmäiset tukemaan JavaScript-merkkijonon täyttämistä selaimet:

Chrome IE Firefox Safari Opera
Chrome 57 Edge 15 Firefox 48 Safari 10 Opera 44
Maaliskuussa 2017 Huhtikuussa 2017 2016 elokuu 2016 syyskuu Maaliskuussa 2017

JavaScript-objektin kohteita

ECMAScript 2017 lisäsi uusia Object.entries menetelmä.

Object.entries() palauttaa objektin avain-arvo-pareja taulukon:

esimerkki

const person = {
  firstName : "Bill",
  lastName : "Gates",
  age : 50,
  eyeColor : "blue"
};
document.getElementById("demo").innerHTML = Object.entries(person);

Kokeile itse

Object.entries() tekee objektin käyttämisestä silmukassa yksinkertaisempaa:

esimerkki

const fruits = {Bananas:300, Oranges:200, Apples:500};
let text = "";
for (let [fruit, value] of Object.entries(fruits)) {
text += fruit + ": " + value + "
";
}

Kokeile itse

Object.entries() tekee objektin muuntamisesta mappauksen yksinkertaisempaa:

esimerkki

const fruits = {Bananas:300, Oranges:200, Apples:500};
const myMap = new Map(Object.entries(fruits));

Kokeile itse

Chrome ja Firefox olivat ensimmäiset tukemaan Object.entries selaimet:

Chrome IE Firefox Safari Opera
Chrome 47 Edge 14 Firefox 47 Safari 10.1 Opera 41
2016 heinäkuu 2016 elokuu 2016 heinäkuu Maaliskuussa 2017 Syyskuussa 2016

JavaScript-objektin arvoihin

Object.values samankaltainen Object.entriesmutta palauttaa yksisuuntaisen taulukon objektin arvoista:

esimerkki

const person = {
  firstName : "Bill",
  lastName : "Gates",
  age : 50,
  eyeColor : "blue"
};
document.getElementById("demo").innerHTML = Object.values(person);

Kokeile itse

Firefox ja Chrome olivat ensimmäiset tukemaan Object.values selaimet:

Chrome IE Firefox Safari Opera
Chrome 54 Edge 14 Firefox 47 Safari 10.1 Opera 41
Syyskuussa 2016 2016 elokuu 2016 heinäkuu Maaliskuussa 2017 Syyskuussa 2016

JavaScript Async-funktiot

Odota aikaa

async function myDisplay() {
  let myPromise = new Promise(function(myResolve, myReject) {
    setTimeout(function() { myResolve("I love You !!"); }, 3000);
  });
  document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();

Kokeile itse

Firefox ja Chrome ovat ensimmäisiä selaimia, jotka tukevat asynkronisia JavaScript-funktioita:

Chrome IE Firefox Safari Opera
Chrome 55 Edge 15 Firefox 52 Safari 11 Opera 42
Joulukuussa 2016 Huhtikuussa 2017 Maaliskuussa 2017 Syyskuussa 2017 Joulukuussa 2016