一般的なES 6の新しい文法的特性をまとめます.

前言
ES 6はもうすぐ来る新しいバージョンのJavaScript言語の標準であり、矢印関数(=>)、classなどのような、より「甘い」文法飴をもたらしてくれました.一言で言えば:
ES 6は、Javascriptの体験を高めるために、多くの新しい文法とコードの特性を提供してくれます.
しかし、残念なことに、現在はSS 6文法をサポートするブラウザがありません.ここをクリックしてブラウザのサポート状況を確認します.だから、私達はバベルを使ってCommonJSというモジュール化基準に変換する文法も必要です.
次はes 6の新しい特性の例を述べますので、効果を試してみたいなら、ここでテストしてもいいです.
一般的なES 6の特性
次に簡単にいくつかのよく使われている文法の特性を紹介します.ES 6を完全に理解したいなら、ここを紹介します.
定義関数
まず一つの基本的な新しい特性を見てみます.javascriptでは関数を定義するにはキーワードfunctionが必要ですが、es 6ではもっと先進的な書き方があります.
es 6の書き方:

var human = {
    breathe(name) {   //   function    breathe  。
        console.log(name + ' is breathing...');
    }
};
human.breathe('jarson');   //   ‘jarson is breathing...’

jsコードに変換:

var human = {
    breathe: function(name) {
        console.log(name + 'is breathing...');
    }
};
human.breathe('jarson');

不思議ですよね?これと比べると、S 6の書き方は分かりやすいということが分かります.焦らないでください.下にもっと不思議なものがあります.
クラスを作成
私たちは、javascriptはjavaと違ってオブジェクトに向けてプログラミングされた言語ではなく、オブジェクトに基づいてプログラミングされた言語と言えることを知っています.したがって、jsでは、私たちは通常、functionとprototypeを用いて という概念をシミュレートする.
でも、今はes 6があります.javaのように、「明目张胆」の作成ができます.

class Human {
    constructor(name) {
        this.name = name;
    }
    breathe() {
        console.log(this.name + " is breathing");
    }
} 
var man = new Human("jarson");
man.breathe();    //jarson is breathing

上のコードはjs形式に変わります.

function Human(name) {
    this.name = name;
    this.breathe = function() {
        console.log(this.name + ' is breathing');
    }
}
var man = new Human('jarson');
man.breathe();    //jarson is breathing

だから、私たちはjavaのように意味化してクラスを作ることができます.また、jsでは父類を継承し、プロトタイプで実現する必要があります.では、エス6の中で、クラスの継承を実現するための新しい方法がありますか?続きを見る:
もしManクラスを作成するなら、上のHumanクラスを継承します.

class Man extends Human {
    constructor(name, sex) {
        super(name);
        this.sex = sex;
    }
    info(){
        console.log(this.name + 'is ' + this.sex);
    }
}
var xx = new Man('jarson', 'boy');
xx.breathe();   //jarson is breathing
xx.info();   //arsonis boy

コードは簡単で、詳細には説明しないで、文章の中で言及したオンラインツールを使って効果を試してみると分かります.注意したいのは、super()は親の構造関数である.
モジュール
ES 6標準では、javascript原生がmoduleをサポートしました.異なる機能のコードをそれぞれ異なるファイルに書いて、各モジュールは (export)共通インターフェース部分だけでいいです.そして、必要なところにモジュールの (import)を通して利用すればいいです.例を続きます.
インラインエクスポート
ES 6モジュール内のオブジェクトは、それらを作成する声明の中で直接に導き出すことができ、一つのモジュールの中で何度もexportを使用することができます.
先にモジュールファイルapp.jsを見ます.

export class Human{
    constructor(name) {
        this.name = name;
    }
    breathe() {
        console.log(this.name + " is breathing");
    } 
}  
export function run(){  
    console.log('i am runing'); 
}
function eat() {
    console.log('i am eating');
}

例のモジュールは、2つのオブジェクトを導出しました.Human類とrun関数、eat関数はエクスポートされていません.このモジュールはプライベートです.他のファイルでは使用できません.
オブジェクトのセットをエクスポート
また、実際にエクスポートしたい対象が多い場合は、最終的に統一してオブジェクトをエクスポートすることができます.
変更app.jsファイル:

class Human{
    constructor(name) {
        this.name = name;
    }
    breathe() {
        console.log(this.name + " is breathing");
    } 
}  
function run(){  
    console.log('i am runing'); 
}
function eat() {
    console.log('i am eating');
}
export {Human, run}; 

このような書き方の機能は上と同じで、しかも明らかであり、最後にどのような対象が導出されたのかがはっきり見えてきます.
Defaultエクスポート
エクスポート時にキーワードdefaultを使用して、オブジェクトをdefaultオブジェクトとして表示してエクスポートできます.defaultキーワードは各モジュールで一回しか使用できません.これはインラインエクスポートにも使用できますし、オブジェクトのグループのエクスポートにも使用できます.
エクスポートするdefaultオブジェクトのシンタックスを表示します.

...   //   、    
export default {  // Human  run     default    。
    Human,  
    run  
}; 

オブジェクトなしでインポート
モジュールに実行すべき論理が含まれていて、オブジェクトはエクスポートされません.このようなオブジェクトは他のモジュールに導入されてもよく、導入後は論理のみが実行されます.例えば:

import './module1.js'; 

標準オブジェクトをインポート
Default導出方式を用いてオブジェクトを導出し、このオブジェクトはimport宣言においてある参照に直接割り当てられ、以下の例の「app」になる.

import app from './module1.js'; 

上記の例では、デフォルト./module1.jsファイルは一つのオブジェクトだけを導出した.オブジェクトのグループをエクスポートする場合は、インポートステートメントにこれらのオブジェクトを一覧表示する必要があります.

import {Human, run} from './app.js'

letとconst
私の考えでは、S 6の新しい特性では、変数を定義する際に、letの代わりにvarを全部使ったらいいと思います.constは、定数を定義するために直感的で、すなわち値を変更できない変数です.

for (let i=0;i<2;i++) {
    console.log(i);  //  : 0,1
}

矢印関数
ES 6に追加された矢印オペレータ=>は、関数の書き込みを簡略化する.操作子の左は入力のパラメータで、右は操作と戻りの値です.このような書き方は大量のコードを減らすことができます.次の例を見てください.

let arr = [6, 8, 10, 20, 15, 9];
arr.forEach((item, i) => console.log(item, i));
let newArr = arr.filter((item) => (item<10));
console.log(newArr); //[6, 8, 9];

上の(item, i)はパラメータであり、後のconsole.log(item, i)は関数に戻るために実行される動作ロジックである.
上のコードはjs形式に変わります.

var arr = [6, 8, 10, 20, 15, 9];
arr.forEach(function(item, i) {
    return console.log(item, i);
});
var newArr = arr.filter(function(item) {
    return (item < 10);
});
console.log(newArr);

文字列テンプレート
ES 6では、アンチクォーテーションマーク`を使用して文字列を作成することができます.この方法で作成された文字列には、ドル記号と括弧で包まれた変数が含まれます.実例を見れば分かります.

//       
let num = Math.random();
//        console
console.log(`your num is ${num}`);

構成を解く
関数が複数の値を返す場合、通常はオブジェクトを返し、各値をこのオブジェクトの属性として返します.ES 6においては、この特性を利用して、直接に1つの配列に戻ることができ、その後、配列中の値は自動的にその値を受信する変数に解析される.例を見に来ました.

function getVal() {
    return [1, 2];
}
var [x,y] = getVal(); //        
console.log('x:'+x+', y:'+y);   //  ：x:1, y:2 

デフォルトのパラメータ
今は関数を定義する時にパラメータのデフォルト値を指定できます.以前のように論理やオペレータを通して目的を達成する必要はありません.

function sayHello(name){
    var name=name||'tom';   //            
    console.log('Hello '+name);
}
//  ES6     
function sayHello2(name='tom'){  //         ，      ，
    console.log(`Hello ${name}`);
}
sayHello();//  ：Hello tom
sayHello('jarson');//  ：Hello jarson
sayHello2();//  ：Hello tom
sayHello2('jarson');//  ：Hello jarson

注:sayHello2(name='tom')ここの等号は、このパラメータを伝えていないという意味で、パラメータに値を割り当てるという意味ではなく、デフォルト値を設定します.
Proxy
Proxyは、対象者に何が起こったかを傍受し、これらの事件が発生した後に、いくつかの操作を実行することができます.一度に、私たちは一つの対象に対して強い追跡能力を持つようになりました.また、データーバインディングの面でも効果があります.

//          
let engineer = { name: 'Joe Sixpack', salary: 50 };
//      
let interceptor = {
    set(receiver, property, value) {
        console.log(property, 'is changed to', value);
        receiver[property] = value;
    }
};
//         
engineer = new Proxy(engineer, interceptor);
//          
engineer.salary = 70;//     ：salary is changed to 70

処理プログラムについては、傍受されたオブジェクトに該当するイベントが発生した後、処理プログラム内の方法が呼び出されます.
おわりに
総じて言えば、S 6をサポートする状況はまだ楽観的ではありませんが、S 6の新しい文法特性は先端と後端の違いを小さくしました.これは新しい時代の始まりです.私たちはこれらの新しい先端知識を理解して、時代の歩みに追いつけます.
転載先:https://www.cnblogs.com/jarson-7426/p/5481491.html