ES6 の新機能と利点

ES6 (ECMAScript2015) の出現は、間違いなくフロントエンド開発者に新しい驚きをもたらしました. これには、多くの複雑な操作をより簡単に実装し、開発者の効率を向上させることができるいくつかの優れた新機能が含まれています. 以下は、よく使用される新機能の一部です。彼はフロントエンドをバックエンドに近づけます...

1. アロー演算子

C# や Java を知っているなら、ラムダ式を知っている必要があります. ES6 の新しい矢印演算子 => は同じ効果があります. 書き込み機能を簡素化します。演算子の左側は入力パラメーターで、右側は実行される操作と戻り値 Inputs=>outputs です。

ES6 の新しい矢印演算子は、関数の記述を簡素化するために使用されます. 演算子の左側はパラメーターであり、右側は特定の操作と戻り値です. .

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

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

2. 授業支援

ES6 では、クラスのサポートが追加され、class キーワードが導入されました (実際、class は常に JavaScript の予約語でした。その目的は、将来の新しいバージョンで使用される可能性があることを考慮することであり、ついに便利になりました)。JS 自体はオブジェクト指向であり、ES6 で提供されるクラスは実際には JS プロトタイプ パターンの単なるラッパーです。ネイティブ クラスのサポートが提供されるようになったので、オブジェクトの作成と継承がより直感的になり、親クラス メソッドの呼び出し、インスタンス化、静的メソッド、コンストラクターなどの概念がより視覚化されます。

//类的定义
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. 文字列テンプレート

文字列テンプレートは比較的シンプルで理解しやすいものです。ES6 では、バッククォート ` を使用して文字列を作成できます。文字列には、ドル記号と中括弧で囲まれた変数 ${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 in ループは、配列、クラス配列、またはオブジェクトをトラバースするために使用されることはよく知られています. ES6 で新しく導入された for of ループには、各ループのシリアル番号の代わりに値を提供することを除いて、同様の機能があります.

var someArray = [ "a", "b", "c" ];
 
for (v of someArray) {
    console.log(v);//输出 a,b,c
}

ES6 のその他の新機能: http://www.cnblogs.com/Wayou/p/es6_new_features.html