JavaScript ES6

ECMAScript 6とは何ですか？

ECMAScript 6はES6およびECMAScript 2015と呼ばれます。

一部の人々はそれをJavaScript 6と呼びます。

この章では、ES6のいくつかの新しい機能について紹介します。

  • JavaScript let
  • JavaScript const
  • べき乗 (**)
  • デフォルトパラメータ値
  • Array.find()
  • Array.findIndex()

ES6（ECMAScript 2015）のブラウザサポート

Safari 10とEdge 14は、最初に完全にES6をサポートしたブラウザです：

Chrome 58 Edge 14 Firefox 54 Safari 10 Opera 55
Jan 2017 Aug 2016 Mar 2017 Jul 2016 Aug 2018

JavaScript let

let文は、ブロックスコープ内で変数を宣言することができます。

インスタンス

var x = 10;
// ここではxは10です
{ 
  let x = 2;
  // ここではxは2です
}
// ここではxは10です

自分で試してみる

JavaScript const

const ステートメントは、定数（定数値を持つJavaScript変数）を宣言することができます。

定数は let 変数であり、値を変更することはできません。

インスタンス

var x = 10;
// ここではxは10です
{ 
  const x = 2;
  // ここではxは2です
}
// ここではxは10です

自分で試してみる

私たちの JavaScript Let / Const に関する詳細は、 let および const の内容です。

指数演算子

べき乗演算子（**）は、最初の操作数を第二の操作数のべきにします。

インスタンス

var x = 5;
var z = x ** 2;          // 結果は25です

自分で試してみる

x ** y の結果は Math.pow(x,y) 同じ：

インスタンス

var x = 5;
var z = Math.pow(x,2);   // 結果は25です

自分で試してみる

デフォルトパラメータ値

ES6 関数の引数にデフォルト値を設定することができます。

インスタンス

function myFunction(x, y = 10) {
  // yは未指定の場合またはundefinedの場合は10です
  return x + y;
}
myFunction(5); // 15が返されます

自分で試してみる

Array.find()

find() テスト関数を通じて最初の配列要素の値を返すメソッドです。

この例では、最初の18より大きな要素（の値）を（返）します：

インスタンス

var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

自分で試してみる

この関数は 3 つの引数を受け取ります：

  • 項目値
  • 項目インデックス
  • 配列自体

Array.findIndex()

findIndex() テスト関数を通じて最初の配列要素のインデックスを返すメソッドです。

この例では、18 より大きな最初の要素のインデックスを決定します：

インスタンス

var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

自分で試してみる

この関数は 3 つの引数を受け取ります：

  • 項目値
  • 項目インデックス
  • 配列自体

新しい数字属性

ES6 は以下の属性を Number オブジェクトに追加しました：

  • EPSILON
  • MIN_SAFE_INTEGER
  • MAX_SAFE_INTEGER

インスタンス

var x = Number.EPSILON;

自分で試してみる

インスタンス

var x = Number.MIN_SAFE_INTEGER;

自分で試してみる

インスタンス

var x = Number.MAX_SAFE_INTEGER;

自分で試してみる

新しい数字メソッド

ES6 は Number オブジェクトに 2 つの新しいメソッドを追加しました：

  • Number.isInteger()
  • Number.isSafeInteger()

Number.isInteger() メソッド

引数が整数の場合、 Number.isInteger() メソッドは trueオブジェクトメソッド

インスタンス

Number.isInteger(10);        // 真を返します
Number.isInteger(10.5);      // 偽を返します

自分で試してみる

Number.isSafeInteger() メソッド

安全整数は、双精度数として正確に表現できる整数です。

引数が安全整数の場合、 Number.isSafeInteger() メソッドは trueオブジェクトメソッド

インスタンス

Number.isSafeInteger(10);    // 真を返します
Number.isSafeInteger(12345678901234567890);  // 偽を返します

自分で試してみる

安全整数とは、-(253 - 1) から +(253 - 1) までのすべての整数を指します。

これは安全です：9007199254740991。これは安全ではありません：9007199254740992。

新しいグローバルメソッド

ES6 は 2 つの新しいグローバル数字メソッドを追加しました：

  • isFinite()
  • isNaN()

isFinite() メソッド

引数が Infinity または NaN、それではグローバル isFinite() メソッドは false を返します。

そうでない場合は true を返します：

インスタンス

isFinite(10/0);       // 偽を返します
isFinite(10/1);       // 真を返します

自分で試してみる

isNaN() メソッド

引数が NaN、それではグローバル isNaN() メソッドは true。それ以外の場合、 false：

インスタンス

isNaN("Hello");       // true を返します

自分で試してみる

アロー関数（Arrow Function）

アロー関数は短い構文で関数式を記述するために使用できます。

必要ありません function キーワード、return キーワードおよび大括弧オブジェクトメソッド

インスタンス

// ES5
var x = function(x, y) {
   return x * y;
}
// ES6
const x = (x, y) => x * y;

自分で試してみる

アロー関数には独自の thisアロー関数は定義には向いていません。。オブジェクトメソッド

。アロー関数は昇格されません。使用する前に前

を使用して定義します。 const 比べて使用 var より安全です、なぜなら関数式は常に定数値であるためです。

関数が単一の文である場合、省略することができます return キーワードと大括弧。したがって、それらを保持することは良い習慣かもしれません：

インスタンス

const x = (x, y) => { return x * y };

自分で試してみる