ES 6の新しい特性と利点

2245 ワード

ES 6(ECMAScript 2015)の登場は、フロントエンドの開発者に新たな驚きをもたらしたに違いない.それは素晴らしい新しい特性を含み、多くの複雑な操作をより便利に実現し、開発者の効率を高めることができる.次に、一般的な新しい特性を示します.彼はフロントエンドをますますバックエンドに近づけた...
1.矢印オペレータ
C#やJavaができるなら、lambda式を知っているに違いありません.ES 6に追加された矢印オペレータ=>には異曲同工の妙があります.関数の書き方を簡略化します.オペレータの左側は入力されたパラメータで、右側は実行された操作と返された値Inputs=>outputsです.
ES 6には、関数の書き方を簡略化するために矢印オペレータが追加され、左側がパラメータで、右側が特定の操作と戻り値です.
// ES6
var test = (num1, num2) => { return num1 + num2; }

//   
var test = function(num1, num2) {
    return num1 + num2;
};

2.クラスのサポート
ES 6にはクラスのサポートが追加され、classキーワードが導入されています(実はclassはJavaScriptでずっと字を保留していますが、後で新しいバージョンで使う可能性があることを考慮して、今やっと役に立ちました).JS自体はオブジェクト向けであり,ES 6で提供されるクラスは実際にはJSプロトタイプモードのパッケージにすぎない.オリジナルのclassサポートが提供されると、オブジェクトの作成、継承がより直感的になり、親メソッドの呼び出し、インスタンス化、静的メソッド、コンストラクション関数などの概念がよりイメージ化されます.
//    
class Animal {
	//ES6      
    constructor(name) {
        this.name = name;
    }
    //    
    sayName() {
        console.log('My name is '+this.name);
    }
}
//    
class Programmer extends Animal {
    constructor(name) {
    	//              
        super(name);
    }
    program() {
        console.log("I'm coding...");
    }
}
//      
var animal=new Animal('dummy'),
wayou=new Programmer('wayou');
animal.sayName();//   ‘My name is dummy’
wayou.sayName();//   ‘My name is wayou’
wayou.program();//   ‘I'm coding...’

3.文字列テンプレート
文字列テンプレートは比較的簡単で分かりやすい.ES 6では、逆引用符`を使用して文字列を作成できます.この方法で作成される文字列には、ドル記号にカッコで囲まれた変数${vraible}が含まれます.
//       
var num=Math.random();

//        console
console.log(`your num is ${num}`);

4.letとconstキーワード
letはvarと見なすことができますが、定義された変数は特定の範囲に限定されているだけで使用できますが、この範囲を離れると無効です.constは、定数、すなわち値を変更できない変数を定義するために直感的です.
for (let i=0;i<2;i++)console.log(i);//  : 0,1

console.log(i);//  :undefined,        

5.for of値遍歴
for inループは配列,クラス配列またはオブジェクトを遍歴するために用いられ,ES 6で新しく導入されたfor ofループ機能は類似しており,ループごとにシーケンス番号ではなく値を提供するのとは異なることを知っている.
var someArray = [ "a", "b", "c" ];
 
for (v of someArray) {
    console.log(v);//   a,b,c
}

ES 6の新しい機能:http://www.cnblogs.com/Wayou/p/es6_new_features.html