ES 6詳細解二:新規コンテンツの概要

ES 6新規コンテンツ概要
ES 5に対して痛くも痒くもないいくつかの変更に比べて、ES 6は多くの内容を追加しました.ここは簡単に羅列して、後は一つ一つ丁寧に説明します.
ES 6サポートを開く
chromeは多くのes 6の特性をサポートしましたが、閉じられました.ここで開けます.chrome://flags/#enable-javascript-hamony.変更したらブラウザを再起動してください.
これは主流のブラウザと自分の現在のブラウザの互換性を見ることができます.https://kangax.github.io/compat-table/es6/
コンパイルES 6
いくつかの特性は、chromeの構成を開いても、クラスのようなサポートされていません.この時はbabelでs 6のコードをes 5にコンパイルできます.ほとんどの特性をサポートします.
また、コンパイル後のコードを見ると、これらの特性が分かりやすいです.
住所:https://github.com/babel/grunt-babel
arrow function
矢印文法で関数を書くことができます.lamda式に似ています.arrow functionは現在のコンテキストに自動的に結合されます.現在最新版のchrome 43は意外にもまだ支持していません.でも、最新のフォックスはもう支持しました.

[1,2,3,4].map(d=>d*d); //  
//      
[1,2,3,4].map(d=>{
    console.log(this);
    return d*d
});

クラス
現在、原生はclassキーワードをサポートして、一つのタイプを宣言しました.文法飴だけですが、最終的には原型継承に基づいて実現されました.しかし、結局は簡単にクラスを作成し、継承することができます.

class People {
    constructor(name) {
        this.name = name;
    }

    sayName() {
        console.log(sayName);
    }
}

オブジェクトの文字数を増やす
上記のような定義から、対象の字面量文法が強化されていることが分かります.

var people = {
      name: "Tom",
      sayName() {    //       
        console.log(this.name);
      },
      [ 'prop_' + (() => 42)() ]: 42    //         
}

文字列テンプレート
JSの中で苦痛なつづり合わせを覚えていますか?今やっと文法の支持ができました.

var people = {name: "Tom", age: 12};
var html = `<ul>
<li>name: ${people.name}</li>
<li>age: ${people.age}</li>
</ul>`;

destructuring
これは解析構成に訳されるべきですか?よく説明できません.下のコードを見ればよく分かります.簡単に言えば、オブジェクトを一つのオブジェクトに割り当てることができる属性ごとの値(または配列)です.

var [a,b,c]=[1,2,3];    //           
var {name, age} = {name: "Tom", age:12} //              

//        
function g({name: x}) {
    console.log(x);
}
g({name: 5})

関数のデフォルト変数と拡張属性
現在は関数宣言の時に標準値を指定できます.また、reactの中の奇妙な3つのポイント番号はここの拡張属性です.

function say(name="Tom") {
    return name;
}

function a(x, ...y) {//    
  console.log(x,y)
}
a(1,2,3,4);

let&const
ブロックレベルが作用する変数は、letおよびconstによって宣言され得る(varによって宣言されるのは関数レベルの作用領域である).また、constが宣言しているのは変数ではない.

{
    let x=1;
    console.log(x);
}
console.log(x);
const y=2;

Iterators+For.Of
Iteratorはforキーワードで巡回できるオブジェクトを実現するために使用されます.

let students = {
  [Symbol.iterator]() {
    let current = 1;
    return {
      next() {
        return {done: current > 100, value: current++};
        }
    }
  }
}

for(s of students) {
  console.log(s);
}
//   0 - 100

yield
JSはやっと大名の一番上のyieldをサポートしました.一つの関数の内部で複数回のreturn変数を返すことができます.上のコードをyieldで実現すれば、そうなるはずです.

let students = {
  [Symbol.iterator]: function*() {
    for(var i=0;i<=100;i++) {
      yield i;
    }
  }
}

for(var s of students) {
  console.log(s);
}

unicode
原生はunicodeをサポートしていますが、これはまだよく分かりません.
modules
これは必ずありますモジュールの構文レベルをサポートします.

export function sum(x, y) {
  return x + y;
}

import sum from "math"
sum(1,2);

Map+Set+WeakMap+WeakSet
mapとsetはデータ構造ですので、何も言いません.WeakMapとWeakSetはメモリの流出を防止するために使用されます.後に詳しい説明があります.

#map
var m = new Map();
m.set("a", 1);
m.get("a")

#set
var s = new Set();
s.add("a");
s.add("b");
s.add("a"); //  ，   a      

proxy
ここのproxyとjQuery.proxyは違います.thisを結びつけるためのものではありません.それはjavaのannotation、pythonのdecoratorと似ています.つまり、対象のすべての行為を代行してもいいです.例えば、対象の属性を取って、正常に直接取ります.ただし、この操作を加えたら、まずproxyを伝えます.彼はどうやって取りますか?

var target = {};
var handler = {
    get: function (receiver, name) {
        return `Hello, ${name}!`;
    }
};

var p = new Proxy(target, handler);
p.world === 'Hello, world!';

もちろん彼は代理getだけではなく、set、hasなどの一連の操作が代理されます.
Symbol
Symolは唯一の可変文字列を作成するために使用されます.後に詳しい説明があります.
内蔵クラスを継承
現在内蔵されているArayは、DateもElementも継承できます.
Math+Number+String+Aray+Object APIが追加されました.
これらは以前からあったタイプですが、今回は新しいAPIを大きく押しました.

"abcd".include("bc");

プロミス
皆さんがよく知っているプロミスは、今は原生さんが応援しています.
反射
javaのような反射を推定して、動作時のオブジェクトを反射機構で操作することができます.
最終再帰的に最適化を呼び出す
何が最後に来るのか分からないなら、ここを参考にしてください.http://www.zhihu.com/question/20761771
ES 6は、解釈器が最終再帰性を最適化しなければならないと規定しています.再帰的に再帰的に何回呼び出しても、スタックがオーバーフローすることはありません.

function factorial(n, acc = 1) {
    'use strict';
    if (n <= 1) return acc;
    return factorial(n - 1, n * acc);
}

factorial(100000)

上の階は計算されていますが、今はどのブラウザを使ってもスタックがオーバーフローします.
後はいくつかのポイントについて逐次解析します.
ここでは主にこの記事を参照します.https://github.com/lukehoban/es6features