ES6はECMAスクリプトプログラミング言語のバージョン6です。 ECMAスクリプトはJavaScriptの標準化された名称で、バージョン6は2011年にリリースされたバージョン5の次のリリースです。JavaScript言語を大幅に強化し、大規模なソフトウェア開発を容易にするための機能を追加しています。

2015年6月にECMAScriptまたはES6がリリースされました。その後、ECMAScript 2015と改名されました。Webブラウザによる言語全体のサポートはまだ完全ではありませんが、主要な部分はサポートされています。主要なウェブブラウザは、ES6の機能の一部をサポートしています。しかし、トランスパイラと呼ばれるソフトウェアを使用すれば、ES6のコードをES5に変換することが可能であり、その方が多くのブラウザでサポートされているため、より良い結果を得ることができます。

では、ES6がJavaScriptにもたらす主な変更点を見ていきましょう。

1 定数

ついに、定数の概念がJavaScriptに適用されたのです定数は、一度だけ（スコープごとに、以下で説明するスコープで）定義できる値です。同じスコープ内で再定義するとエラーが発生します。

c***t JOE = 4.0
JOE= 3.5
// の結果となる。Uncaught TypeError。c***tant 変数に代入する。

定数は、変数（var）が使えるところならどこでも使える。

c***ole.log("Value is: " + joe * 2)
// プリント数：8枚

2 ブロックスコープの変数と関数

21世紀へようこそ、JavaScript！ ES6やJava（C++）などを使って宣言された変数（上記の定数など）は、ブロックスコープのルールに従います（詳しくは、JavaScriptでの変数の宣言の仕方をご覧ください）。

このアップデート以前は、JavaScriptの変数は関数スコープでした。つまり、変数の新しいスコープが必要なときは、関数の中で宣言しなければならないのです。

この変数はブロックの終わりまで値を保持する。ブロックの後では、外部ブロックの値（もしあれば）が復元される。

{
x = "hello "とする。
{
x = "世界 "とする。
c***ole.log("inner block, x = " + x);
}
c***ole.log("outer block, x = " + x);
}
// プリント
インナーブロック、x=世界
外ブロック、x = hello

また、これらのブロックの中で定数を再定義することができます。

{
x = "hello "とする。
{
c***t x = 4.0;
c***ole.log("inner block, x = " + x);
トライ
x = 3.5
} catch(err) {
c***ole.error("inner block: " + err);
}
}
x = "世界"。
c***ole.log("outer block, x = " + x);
}
// プリント
インナーブロック、x=4
インナーブロックTypeErrorです。c***tant 変数に代入する。
外郭、x=世界

III.アロー関数

ES6では、JavaScriptにarrow関数が導入されました(この関数は従来の関数と似ていますが、よりシンプルな構文になっています)。次の例では、xはaという引数を取り、その増分を返す関数である。

var x = a => a + 1;
x(4) // 5を返す

この構文を使うと、関数内でパラメータを簡単に定義したり、渡したりすることができます。

forEach()を使用する。

[1, 2, 3, 4].forEach(a => c***ole.log(a + " => " + a*a))
// プリント
1 => 1
2 => 4
3 => 9
4 => 16

複数の引数を受け付ける関数は、括弧で囲んで定義します。

[22, 98, 3, 44, 67].sort((a, b) => a - b)
// を返します。
[3, 22, 44, 67, 98]

4 デフォルトの機能パラメータ

関数パラメータは，デフォルト値で宣言できるようになった．以下では，xは2つのパラメータa，bを持つ関数である．

var x = (a, b = 1) => a * b
x(2)
// 2を返す
x(2, 2)
// 4を返す

他の言語（C++やPythonなど）とは異なり、デフォルト値を持つ引数は、デフォルト値を持たない引数の前に表示されることがあります。なお、例として、この関数は戻り値を持つブロックとして定義されている。

var x = (a = 2, b) => { return a * b }

ただし、引数は左から右へマッチングされる。以下の最初の呼び出しでは、aがデフォルト値で宣言されているにもかかわらず、bが未定義値になっています。渡された引数は、bではなくaにマッチします。この関数は NaN を返す。

x(2)
// NaN を返す
x(1, 3)
// 3を返す

パラメータとして明示的にundefinedを渡した場合、そのパラメータが存在すればデフォルト値が使用されます。

x(undefined, 3)
// 6を返す

5rest 機能のパラメータ

関数を呼び出す際に、任意の数の引数を渡して、関数内で処理できるようにする必要がある場合があります。この必要性は、残りの関数の引数の構文で処理される。これは、以下に示す構文を使って、定義されたパラメータの後の残りのパラメータを捕捉する方法を提供するものである。これらの追加引数は配列に取り込まれる。

var x = function(a, b, ...args) { c***ole.log("a = " + a + ", b = " + b + ", " + args.length + " args left"); }
x(2, 3)
// プリント
a = 2, b = 3, 0 アーギュメント左
x(2, 3, 4, 5)
// プリント
a = 2, b = 3, 残り2アーギュメント

6 Stringテンプレート

文字列テンプレートとは、perlやshellなどの構文を使って文字列の中に変数や式 ** を入れたものです。文字列テンプレートは、バックスティック(`)で囲みます。一方、シングルクォート（'）やダブルクォート（"）は、通常の文字列を示します。テンプレート内の式は、${と}の間でマークされます。一例として

var name = "joe";
var x = `こんにちは ${name}`.
// "hello joe "を返す

もちろん、値には任意の式を用いることが可能である。

// define an arrow function
var f = a => a * 4
// パラメータの値を設定する
var v = 5
// そして，文字列テンプレート内で関数を評価します．
var x = `hello ${f(v)}` とする。
// "こんにちは20 "を返す

この文字列定義の構文は、複数行の文字列を定義する場合にも使用できる。

var x = `hello world
次の行`
// を返します。
ハローワールド
次の行

7 オブジェクトのプロパティ

ES6では、オブジェクトの作成構文が簡略化されています。

var x = "hello world", y = 25
var a = { x, y }.
//はES5と同等です。
{x: x, y: y}

計算された属性名もなかなか美しい。ES5以前のバージョンでは、計算された名前を使用してオブジェクトの属性を設定するには、次のようにする必要がある。

var x = "hello world", y = 25
var a = {x: x, y: y}.
a["joe" + y] = 4
// aは今。
{x: "hello world", y: 25, joe25: 4}.

という定義ですべてできるようになりました。

var a = {x, y, ["joe" + y]: 4}
// を返します。
{x: "hello world", y: 25, joe25: 4}.

もちろん、メソッドを定義するために、以下のような名前を使用することができます。

var a = {x, y, ["joe" + y]: 4, foo(v) { return v + 4 }}
a.foo(2)
// を返します。
6

8 形式クラス定義の構文

カテゴリー定義

最後に、JavaScriptは正式なクラス定義構文を取得します。すでに用意されているプロティタイプベースのクラスに構文を追加したに過ぎないが、コードの明快さを向上させるのに役立っている。つまり、これは新しいオブジェクトモデルを追加したりするものではありません。

class Circle {
c****tructor(radius){。
this.radius = radius
}
}
// 使う
var c = 新しい円(4)
// return: 円 {radius: 4}.

宣言方法

定義の仕方も非常にシンプルで、奇をてらったものはありません。

class Circle {
c****tructor(radius){。
this.radius = radius
}
computeArea() { return Math.PI * this.radius * this.radius }.
}
var c = 新しい円(4)
c.computeArea()
// リターン：50.26548245743669

受信者・受信機

また、ゲッターとセッターも用意され、構文が簡単に更新されました。Circleクラスをarea属性で再定義してみましょう。

class Circle {
c****tructor(radius){。
this.radius = radius
}
get area() { return Math.PI * this.radius * this.radius }.
}
var c = 新しい円(4)
// return: 円 {radius: 4}.
c.エリア
// リターン：50.26548245743669

半径を設定可能なプロパティとして定義できるようにするために、実際のフィールドを \u radius など、セッターと衝突しないように再定義する必要があります。そうでない場合は、スタックオーバーフローエラーが発生します。

以下のクラスが再定義されました。

class Circle {
c****tructor(radius){。
this._radius = 半径
}
get area() { return Math.PI * this._radius * this._radius }.
set radius(r) { this._radius = r }.
}
var c = 新しい円(4)
// return: 円 {_radius: 4}.
c.エリア
// リターン：50.26548245743669
c.radius = 6
c.エリア
// リターン：113.09733552923255

全体として、これはオブジェクト指向のJavaScriptに追加する素晴らしいものです。

承継

classキーワードでクラスを定義するだけでなく、extendsキーワードでスーパークラスから継承することもできます。この仕組みを例にとって見てみましょう。

class Ellipse {
c***tructor(width, height) { (幅, 高さ)
this._width = width;
this._height = height;
}
get area() { return Math.PI * this._width * this._height; }.
set width(w) { this._width = w; }.
set height(h) { this._height = h; }.
}
class Circle extends Ellipse {.
c****tructor(radius){。
super(radius,radius)です。
}
set radius(r) { super.width = r; super.height = r; }.
}
// 円を作る
var c = 新しい円(4)
// return: 円 {_width: 4, _height: 4}.
c.radius = 2
// c は現在：円形 {_width: 2, _height: 2} です。
c.エリア
// リターン：12.566370614359172
c.radius = 5
c.エリア
// リターン：78.53981633974483

JavaScript ES6の機能の一部を簡単にご紹介します。

次は、JavaScriptの重要な配列メソッドに慣れて、音声認識ロボットのアニメーションスクリプトを書きましょう!また、Vueという素晴らしいフロントエンドフレームワークを知ることができます。

写真提供：マイクロロギア/Depositphotos