ECMAScript 2017

JavaScript の命名規約は ES1、ES2、ES3、ES5、ES6 から始まります。

しかし、ECMAScript 2016 と 2017 は ES7 と ES8 と呼ばれませんでした。

2016年以降、新しいバージョンは年を名前としています（ECMAScript 2016/2017/2018）。

ECMAScript 2017 の新しい機能

本章では ECMAScript 2017 の新しい機能について紹介します：

  • JavaScript 文字列のフィルタリング
  • JavaScript Object.entries
  • JavaScript Object.values
  • JavaScript アシスト機能
  • JavaScript 共有メモリ

JavaScript 文字列のフィルタリング

ECMAScript 2017 では、2つの String メソッドが追加されました：padStart および padEnd、文字列の先頭と末尾にフィルタリングを行うことをサポートするために。

インスタンス

let str = "5";
str = str.padStart(4,0);
// 結果は： 0005

自分で試してみる

インスタンス

let str = "5";
str = str.padEnd(4,0);
// 結果は： 5000

自分で試してみる

Internet Explorerは文字列のフィルリングをサポートしていません。

FirefoxおよびSafariが最初にJavaScript文字列のフィルリングをサポート

Chrome IE Firefox Safari Opera
Chrome 57 Edge 15 Firefox 48 Safari 10 Opera 44
2017年3月 2017年4月 2016年8月 2016年9月 2017年3月

JavaScriptオブジェクトエントリを追加しました

ECMAScript 2017では、オブジェクトに新しい Object.entries メソッド。

Object.entries()メソッドは、オブジェクト内のキー/値ペアの配列を返します：

インスタンス

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

自分で試してみる

Object.entries()を使うことで、オブジェクトをループ内で簡単に使用できます：

インスタンス

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

自分で試してみる

Object.entries()を使うことで、オブジェクトをマップに変換することも簡単になります：

インスタンス

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

自分で試してみる

ChromeおよびFirefoxが最初にサポート Object.entries のブラウザ：

Chrome IE Firefox Safari Opera
Chrome 47 Edge 14 Firefox 47 Safari 10.1 Opera 41
2016年6月 2016年8月 2016年6月 2017年3月 2016年10月

JavaScriptオブジェクトの値

Object.values 同様に Object.entriesですが、オブジェクトの値を一次元配列で返します：

インスタンス

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

自分で試してみる

FirefoxおよびChromeが最初にサポート Object.values のブラウザ：

Chrome IE Firefox Safari Opera
Chrome 54 Edge 14 Firefox 47 Safari 10.1 Opera 41
2016年10月 2016年8月 2016年6月 2017年3月 2016年10月

JavaScript アシンク関数

タイムアウトを待つ

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

自分で試してみる

Firefox と Chrome はアシンクロナス JavaScript ファンクションをサポートする最初のブラウザです：

Chrome IE Firefox Safari Opera
Chrome 55 Edge 15 Firefox 52 Safari 11 Opera 42
2016年12月 2017年4月 2017年3月 2017年9月 2016年12月