ES 6/ES 2015コア内容理解

8913 ワード

JavaScript学習ノート

ECMAScript 6(以下、ES 6という)はJavaScript言語の次世代標準である.現在のバージョンのES 6は2015年にリリースされたので、ECMAScript 2015とも呼ばれています.
つまり、ES 6はES 2015です.
最も一般的なES 6の特性let, const, class, extends, super, arrow functions, template string, destructuring, default, rest argumentsこれらはES 6の最も常用するいくつかの文法で、基本的にそれらをマスターして、私達は天下を歩き回ることができます.一番分かりやすい言葉と例で説明します.読めばわかるという保証があります.
let,const
この2つの用途はvarと似ています.いずれも変数を宣言するために使われていますが、実際の運用にはそれぞれの特殊な用途があります.まず次の例を見ます.

var name = 'zach'

while (true) {
    var name = 'obama'
    console.log(name)  //obama
    break
}

console.log(name)  //obama

使用varの2回の出力はすべてオバマであり、これはES 5が大域作用域と関数作用領域のみであり、ブロックレベル作用領域がないため、多くの不合理なシーンをもたらす.第一のシーンは、現在見られている内層変数が外層変数をカバーします.letでは、実際にはJavaScriptのブロックレベルのスコープが追加されている.宣言された変数は、letコマンドがあるコードブロック内でのみ有効です.

let name = 'zach'

while (true) {
    let name = 'obama'
    console.log(name)  //obama
    break
}

console.log(name)  //zach

もう一つvarによってもたらされる不合理なシーンは、カウントされたサイクル変数のリークがグローバル変数として使用され、以下の例を参照してください.

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

上のコードで、
変数iはvar宣言であり、全体の範囲で有効である.したがって、サイクルごとに新しいi値が古い値をカバーし、最後の出力が最後のラウンドのiの値になります.letを使うとこの問題は発生しません.

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

もう一つのもっと一般的な例を見てみます.ES 6を使わずに、クローズドでどうやってこの問題を解決しますか?

var clickBoxs = document.querySelectorAll('.clickBox')
for (var i = 0; i < clickBoxs.length; i++){
    clickBoxs[i].onclick = function(){
        console.log(i)
    }
}

私たちはもともと希望していたのは違うclickBoxをクリックして、違うiを表示していますが、実際にはどのclickBoxをクリックしても、出力は5です.次はどうやってクローズドで解決しますか?

function iteratorFactory(i){
    var onclick = function(e){
        console.log(i)
    }
    return onclick;
}
var clickBoxs = document.querySelectorAll('.clickBox')
for (var i = 0; i < clickBoxs.length; i++){
    clickBoxs[i].onclick = iteratorFactory(i)
}

constも変数を宣言するために使用されますが、声明の量は定数です.一度声明したら定数の値は変更できません.

const PI = Math.PI

PI = 23 //Module build failed: SyntaxError: /es6/app.js: "PI" is read-only

私たちがconstで宣言した定数を変更しようとすると、ブラウザがエラーとします.
constには、第三者ライブラリを引用したときに宣言された変数をconstで宣言すると、将来の不注意なネーミングを避けることができて、バグが発生します.
クラス、extens、super
この三つの特性はES 5の中で最も頭が痛いいくつかの部分に関連しています.プロトタイプ、コンストラクター、継承…あなたはまだそれらの複雑で分かりにくい文法に悩んでいますか?まだ針がどこを指しているのか悩んでいますか?
ES 6があります.もう悩みません.
ES 6は伝統言語に近い書き方を提供し、クラスという概念を導入しました.新しいクラスの書き方は対象の原型の書き方をはっきりさせ、対象に向けてプログラミングされた文法のようにも分かりやすいです.

class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        console.log(this.type + ' says ' + say)
    }
}

let animal = new Animal()
animal.says('hello') //animal says hello

class Cat extends Animal {
    constructor(){
        super()
        this.type = 'cat'
    }
}

let cat = new Cat()
cat.says('hello') //cat says hello

上記のコードは、まずclassで「クラス」を定義しています.中にはconstructorの方法があります.これは構造方法です.thisのキーワードは、インスタンスオブジェクトを表しています.簡単に言えば、constructor内で定義された方法および属性はインスタンスオブジェクト自体であり、constructor以外で定義された方法および属性はすべての実力オブジェクトが共有できるものである.
Class間は、ES 5のプロトタイプチェーンの修正により引き継がれるextendsのキーワードによって継承されることができ、より明確で便利である.上記では、extendsキーを通じて、Animalクラスのすべての属性と方法を継承したCatクラスが定義されている.superのキーワードは、親類の例(すなわち父類のthisオブジェクト)を意味する.サブクラスは、constructor方法でsuper方法を呼び出す必要があります.そうでなければ、新しいインスタンスを作成するとエラーが発生します.これは、サブクラスには自分のthisオブジェクトがなく、親類のthisオブジェクトを継承して加工しているからです.super方法を起動しないと、サブクラスはthisオブジェクトを得られない.
ES 6の継承メカニズムは、実質的には、親タイプのインスタンスオブジェクトthisを作成し(従って、最初にsuperメソッドを呼び出す必要があります)、その後、サブクラスの構造関数でthisを修正します.
arrow function
これはおそらくES 6で一番よく使われている新しい特性です.これを使ってfunctionを書くのはもとの書き方より簡潔で明瞭です.

function(i){ return i + 1; } //ES5
(i) => i + 1 //ES6

まったく簡単で話にならないですよね.
方程式が複雑なら、必要です.{}コードを包む:

function(x, y) { 
    x++;
    y--;
    return x + y;
}
(x, y) => {x++; y--; return x+y}

もっと簡潔に見える以外に、アロウフュージョンにはスーパー無敵の機能があります.
長い間、JavaScript言語のthisオブジェクトは、常に頭痛の問題であり、オブジェクトメソッドにthisを使用するには、非常に注意が必要である.たとえば:

lass Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        setTimeout(function(){
            console.log(this.type + ' says ' + say)
        }, 1000)
    }
}

 var animal = new Animal()
 animal.says('hi')  //undefined says hi

上記のコードを実行するとエラーが発生します.setTimeoutのthisは全体のオブジェクトを指しています.したがって、正しい動作をするために、従来の解決方法は2つあります.
一つはthisをselfに伝え、selfでthisを指す.

 says(say){
     var self = this;
     setTimeout(function(){
         console.log(self.type + ' says ' + say)
     }, 1000)

第二の方法はbind(this)、すなわち

 says(say){
     setTimeout(function(){
         console.log(self.type + ' says ' + say)
     }.bind(this), 1000)

しかし、今は矢印関数があります.このような面倒はいらないです.

class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        setTimeout( () => {
            console.log(this.type + ' says ' + say)
        }, 1000)
    }
}
 var animal = new Animal()
 animal.says('hi')  //animal says hi

矢印関数を使うと
関数内のthisオブジェクトは、使用時のオブジェクトではなく定義時のオブジェクトです.矢印関数の内部にthisを結合する機構があるためではなく、実際には矢印関数には独自のthisがないため、そのthisは外から継承されているので、内部のthisは外層コードブロックのthisである.
template string
これも非常に有用です.ドキュメントに大段のhtml内容を挿入するには、伝統的な書き方が面倒くさいので、以前はテンプレートの工具庫を引用します.例えば、mustacheなどです.まず次のコードを見てもいいです.

$("#result").append(
  "There are " + basket.count + " " +
  "items in your basket, " +
  "" + basket.onSale +
  " are on sale!"
);

私たちはテキストと変数をひと山の'+'号で接続します.ES 6の新しい特性テンプレート文字列`を使って、直接にこう書くことができます.

$("#result").append(`
  There are ${basket.count} items
   in your basket, ${basket.onSale}
  are on sale!
`);

スタートを逆引用番号（`）で識別し、${}で変数を参照し、すべてのスペースとインデントは出力に保持されます.とても快適ですか?
default、rest
defaultは簡単です.標準という意味です.以下の例を見てもいいです.animal()メソッドを呼び出したとき、パラメータを忘れました.従来のやり方はこの文を加えて、標準値を指定することです.

function animal(type){
    type = type || 'cat'  
    console.log(type)
}
animal()

ES 6を使うなら、直接こう書きます.

function animal(type = 'cat'){
    console.log(type)
}
animal()

最後のレストの文法も簡単です.直接例を見ます.

function animals(...types){
    console.log(types)
}
animals('cat', 'dog', 'fish') //["cat", "dog", "fish"]

に対する
ES 6を使わないなら、ES 5のtype = type || 'cat'を使います.
セット、map
ES 6は、新しいデータ構造Setを提供する.配列に似ていますが、メンバーの値は全部唯一で、重複した値はありません.
Set関数は、パラメータとして1つの配列(または同様の配列のオブジェクト)を受け入れ、初期化することができます.

var set = new Set([1, 2, 3, 4, 4]);
// [1, 2, 3, 4]

Map構造は「値ー値」の対応を提供し、より完璧なHash構造の実現である.もしあなたが「キーペア」のデータ構造が必要ならば、MapはObjectよりもっと適しています.オブジェクトに似ていて、キーパッドのペアの集合でもありますが、キーの範囲は文字列に限られず、各種の値(オブジェクトを含む)はキーとして使用できます.

var m = new Map();
var o = {p: "Hello World"};

m.set(o, "content")
m.get(o) // "content"

m.has(o) // true
m.delete(o) // true
m.has(o) // false

実例の属性と方法:size、set、get、has、delete、clear
遍歴方法:keys()、values()、entries()、forEach()
Aray.from方法
Aray.from法は、2つの種類のオブジェクトを真の配列に変換するために使用されます.類似の配列のオブジェクトとエルゴード可能なオブジェクト(ES 6に追加されたデータ構造SetおよびMapを含む).

let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// ES5    
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6    
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

// NodeList   
let ps = document.querySelectorAll('p');
Array.from(ps).forEach(function (p) {
console.log(p);
});
// arguments   
function foo() {
var args = Array.from(arguments);
// ...
}

Array.from('hello')
// ['h', 'e', 'l', 'l', 'o']
let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']

Array.from({ length: 3 });
// [ undefined, undefined, undefined ]

Aray.fromはまた、配列のmap方法と同様に、各要素を処理し、処理後の値を返す配列に入れるための第二のパラメータを受け入れることができる.

Array.from(arrayLike, x => x * x);
//     
Array.from(arrayLike).map(x => x * x);
Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]

に戻るhttp://www.jianshu.com/p/ebfeb687eb70

どのようにjsの中の継承を書きますか?