ES6とは何ですか？Javascriptプログラマーが知っておくべきこと

ES6は、ECMAスクリプトプログラミング言語のバージョン6を指します。 ECMA ScriptはJavaScriptの標準化された名前であり、バージョン6は2011年にリリースされたバージョン5の次のバージョンです。これはJavaScript言語の主要な拡張機能であり、大規模なソフトウェア開発を容易にすることを目的とした多くの機能が追加されています。。

ECMAScript（ES6）は2015年6月に公開されました。その後、ECMAScript 2015に名前が変更されました。大部分はサポートされていますが、完全な言語のWebブラウザーサポートはまだ完了していません。主要なWebブラウザーは、ES6のいくつかの機能をサポートしています。ただし、として知られているソフトウェアを使用することは可能です プレーヤー ES6コードをES5に変換します。これは、ほとんどのブラウザーでより適切にサポートされています。

ここで、ES6がJavaScriptにもたらすいくつかの主要な変更を見てみましょう。

1.定数

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

const JOE = 4.0  
JOE= 3.5  
// results in: Uncaught TypeError: Assignment to constant variable.

変数を使用できる場所であればどこでも定数を使用できます（どこ）。

console.log('Value is: ' + joe * 2)  
// prints: 8

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

21世紀へようこそ、JavaScript！ ES6では、を使用して宣言された変数 させて （および上記の定数）Java、C ++などと同様にブロックスコープルールに従います（詳細については、JavaScriptで変数を宣言する方法を参照してください）。

この更新の前は、JavaScriptの変数は関数スコープでした。つまり、変数の新しいスコープが必要な場合は、関数内で宣言する必要がありました。

変数は、ブロックの終わりまで値を保持します。ブロックの後、外側のブロック（存在する場合）の値が復元されます。

古いハードドライブをどうするか

{  
 let x = 'hello';  
 {  
 let x = 'world';  
 console.log('inner block, x = ' + x);  
 }  
 console.log('outer block, x = ' + x);  
}  
// prints  
inner block, x = world  
outer block, x = hello

このようなブロック内で、定数を再定義することもできます。

{  
 let x = 'hello';  
 {  
 const x = 4.0;  
 console.log('inner block, x = ' + x);  
 try {  
 x = 3.5  
 } catch(err) {  
 console.error('inner block: ' + err);  
 }  
 }  
 x = 'world';  
 console.log('outer block, x = ' + x);  
}  
// prints  
inner block, x = 4  
inner block: TypeError: Assignment to constant variable.  
outer block, x = world

3.矢印関数

ES6が導入矢印関数 JavaScriptに。（これらは従来の関数に似ていますが、構文が単純です。）次の例では、 NS と呼ばれるパラメータを受け入れる関数ですに、およびその増分を返します。

var x = a => a + 1;  
x(4) // returns 5

この構文を使用すると、関数で引数を簡単に定義して渡すことができます。

で使用する forEach（） ：

[1, 2, 3, 4].forEach(a => console.log(a + ' => ' + a*a))  
// prints  
1 => 1  
2 => 4  
3 => 9  
4 => 16

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

[22, 98, 3, 44, 67].sort((a, b) => a - b)  
// returns  
[3, 22, 44, 67, 98]

4.デフォルトの関数パラメーター

関数パラメーターをデフォルト値で宣言できるようになりました。以下では、 NS 2つのパラメータを持つ関数ですにと NS 。 2番目のパラメーター NS デフォルト値は 1 。

var x = (a, b = 1) => a * b  
x(2)  
// returns 2  
x(2, 2)  
// returns 4

C ++やPythonなどの他の言語とは異なり、デフォルト値のあるパラメーターは、デフォルトのないパラメーターの前に表示される場合があります。この関数は、戻る実例としての価値。

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

ただし、引数は左から右に一致します。以下の最初の呼び出しでは、 NS 持っています 未定義 でも価値にデフォルト値で宣言されています。渡された引数はと一致しますにそれよりも NS 。関数は戻ります NaN 。

x(2)  
// returns NaN  
x(1, 3)  
// returns 3

明示的に渡す場合 未定義 引数として、デフォルト値がある場合はそれが使用されます。

x(undefined, 3)  
// returns 6

5.REST関数パラメーター

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

var x = function(a, b, ...args) { console.log('a = ' + a + ', b = ' + b + ', ' + args.length + ' args left'); }  
x(2, 3)  
// prints  
a = 2, b = 3, 0 args left  
x(2, 3, 4, 5)  
// prints  
a = 2, b = 3, 2 args left

6.文字列テンプレート

文字列テンプレートとは、perlやシェルなどの構文を使用して変数と式を文字列に補間することです。文字列テンプレートはバックティック文字で囲まれています（「）。対照的に、一重引用符（ ' ）または二重引用符（ ' ）通常の文字列を示します。テンプレート内の式は、 $ { と } 。次に例を示します。

var name = 'joe';  
var x = `hello ${name}`  
// returns 'hello joe'

もちろん、評価には任意の式を使用できます。

// define an arrow function  
var f = a => a * 4  
// set a parameter value  
var v = 5  
// and evaluate the function within the string template  
var x = `hello ${f(v)}`  
// returns 'hello 20'

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

var x = `hello world  
next line`  
// returns  
hello world  
next line

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

ES6は、簡略化されたオブジェクト作成構文をもたらします。以下の例を見てください。

var x = 'hello world', y = 25  
var a = { x, y }  
// is equivalent to the ES5:  
{x: x, y: y}

計算されたプロパティ名もかなり気の利いたものです。 ES5以前では、計算された名前でオブジェクトプロパティを設定するには、次のようにする必要がありました。

var x = 'hello world', y = 25  
var a = {x: x, y: y}  
a['joe' + y] = 4  
// a is now:  
{x: 'hello world', y: 25, joe25: 4}

これで、すべてを1つの定義で実行できます。

var a = {x, y, ['joe' + y]: 4}  
// returns  
{x: 'hello world', y: 25, joe25: 4}

そしてもちろん、メソッドを定義するには、次の名前で定義するだけです。

var a = {x, y, ['joe' + y]: 4, foo(v) { return v + 4 }}  
a.foo(2)  
// returns  
6

8.正式なクラス定義構文

クラス定義

そして最後に、JavaScriptは正式なクラス定義構文を取得します。これは、すでに利用可能なプロトタイプベースのクラスに対する単なる構文糖衣ですが、コードの明確さを高めるのに役立ちます。つまり、これは いいえ 新しいオブジェクトモデルまたはそのような派手なものを追加します。

class Circle {  
 constructor(radius) {  
 this.radius = radius  
 }  
}  
// use it  
var c = new Circle(4)  
// returns: Circle {radius: 4}

メソッドの宣言

メソッドの定義も非常に簡単です。そこには驚きはありません。

class Circle {  
 constructor(radius) {  
 this.radius = radius  
 }  
 computeArea() { return Math.PI * this.radius * this.radius }  
}  
var c = new Circle(4)  
c.computeArea()  
// returns: 50.26548245743669

ゲッターとセッター

構文を簡単に更新して、ゲッターとセッターも用意しました。再定義しましょう サークル とクラス範囲財産。

class Circle {  
 constructor(radius) {  
 this.radius = radius  
 }  
 get area() { return Math.PI * this.radius * this.radius }  
}  
var c = new Circle(4)  
// returns: Circle {radius: 4}  
c.area  
// returns: 50.26548245743669

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

再定義されたクラスは次のとおりです。

class Circle {  
 constructor(radius) {  
 this._radius = radius  
 }  
 get area() { return Math.PI * this._radius * this._radius }  
 set radius(r) { this._radius = r }  
}  
var c = new Circle(4)  
// returns: Circle {_radius: 4}  
c.area  
// returns: 50.26548245743669  
c.radius = 6  
c.area  
// returns: 113.09733552923255

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

継承

を使用してクラスを定義することに加えて クラス キーワード、あなたも使用することができます 拡張します スーパークラスから継承するキーワード。これがどのように機能するかを例で見てみましょう。

class Ellipse {  
 constructor(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 {  
 constructor(radius) {  
 super(radius, radius);  
 }  
 set radius(r) { super.width = r; super.height = r; }  
}  
// create a circle  
var c = new Circle(4)  
// returns: Circle {_width: 4, _height: 4}  
c.radius = 2  
// c is now: Circle {_width: 2, _height: 2}  
c.area  
// returns: 12.566370614359172  
c.radius = 5  
c.area  
// returns: 78.53981633974483

そして、それはJavaScriptES6のいくつかの機能の簡単な紹介でした。

次は：いくつかの重要なJavaScript配列メソッド音声に敏感なロボットアニメーションのスクリプトを作成します。また、Vueと呼ばれる優れたフロントエンドフレームワークについても調べてください。

画像クレジット：micrologia / ✓

共有共有つぶやき Eメール キヤノン対ニコン：どちらのカメラブランドが優れていますか？

キヤノンとニコンは、カメラ業界で最も有名な2社です。しかし、どのブランドがより良いカメラとレンズのラインナップを提供していますか？

トレントのダウンロード速度を上げる方法

次を読む 関連トピック

プログラミング
JavaScript

著者について ジェイ・スリダール（17の記事が公開されました） JaySridharのその他の作品

ニュースレターを購読する

ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。

購読するにはここをクリックしてください