4つの近代的なJavaScript(ES 6+)機能が必要です

ここ数年、JavaScriptは大きな進歩を遂げた.JavaScriptの初心者であれ、経験のある人であれ、現代のJavaScriptで最もよく使われている機能を迅速に把握したい場合は、この文書が適しています.
この文書では、毎日使用している機能について説明します.次の機能があります.

テンプレート文字

letおよびconst

矢印機能

解体

ECMAScript 2015(ES 6)以降のすべての新機能の完全なリストではありません.しかし、これらはあなたの80%の時間で使用する機能の20%です.なお,本稿は進行中である.このリストに追加する機能を追加します.今、今日発表したいと思います!
すべての現代ブラウザは、これらの新しい機能をすべてオリジナルでサポートしています.次のコードセグメントを試したい場合は、Chrome開発者ツールを開き、コードを入力するだけです.
だから、始めましょう.
テンプレート文字
ES 6の前に、次の醜い文字列接続を処理する必要があります.

var name = 'Mosh' ; 
var message = 'Hi ' + name + ',' ;

これで、テンプレート文字(以前はテンプレート文字列と呼ばれていました)を使用して、プレースホルダ付き文字列を定義し、これらの直列をすべて削除できます.

var name = 'Mosh' ; 
var message = `Hi ${name} ,` ;

ここでは逆引用符文字を使用していることに注意してください.面白そうに聞こえますが、Angular 2が発行されるまで、反引用符は誰も知りませんでした!それはキーボードの数字1の前の文字です.
テンプレート文字にプレースホルダを追加するには、${expression}構文を使用します.任意のJavaScript式を使用して、式を置き換えることができます.ここでは、ここにname変数を追加します.また、関数を呼び出したり、値を生成するJavaScript式を渡したりすることもできます.
テンプレート文字を使用するもう1つの利点は、複数行を拡張できることです.Eメールを作成するときに特に役立ちます.

var message = `
Hi ${name} ,
Thank you for joining my mailing list. 
Happy coding,
Mosh
` ;

letとconst
ES 6の前に、varキーワードを使用して変数を定義します.varキーワードを使用して定義された変数の範囲は、閉じた関数全体です.これは例です.

function doSomething ( )  {
   for ( var x = 0 ; x < 5 ; x++) { 
      // Technically, x should only be scoped to this block because this is 
      // where we have defined x. 
   }
   // But it turns out that x is available here as well! 
   console .log(x); // 5 
}

他のすべてのプログラミング言語でなければ、ほとんどの場合の表現ではありません.ブロックで定義された変数は、そのブロックにのみ適用されます.この例では、forブロックの外でxにアクセスすべきではない.varキーワードのもう1つの問題は、関数の外部の最上位レベルで使用すると、グローバル・オブジェクトに属性が作成されます.

var x = 1 ; 
console .log( window .x); // 1

ES 6は、これらの問題を解決するための2つの新しいキーワードを導入した:letおよびconst.両方のキーワードは、機能ではなくブロックを含む変数として定義されます.

function doSomething ( )  {
   for ( let x = 0 ; x < 5 ; x++) { 
      // With the "let" keyword, now x is only accessible in this block.
   }
   // x is out of the scope here
   console .log(x); // x is not defined  
}

constを使用して定数を定義できます.そのため、今後再割り当てはできません.

const x = 1 ; 
x = 2 ; // throws "Assignment to constant variable."

さらに、varキーワードとは異なり、最上位レベルで使用されている場合、letおよびconstはグローバルオブジェクトに属性を作成しません.

let x = 1 ; 
console .log( window .x); // undefined

だから、これはあなたが持って行くべきものです.varキーワードを破棄します.letおよびconstのみが使用されます.constをletに使用することが望ましい.letは、識別子の再割り当てが必要な場合にのみ使用される.そうでない場合は、constを使用して、予期せぬ定数の再割り当てを防止します.
矢印機能
私の大好きなES 6機能!C#のlambda式にヒントを得て、矢印関数は関数式を記述するために簡潔で明瞭な構文を提供します.ES 5の関数式です.

const square = function ( number )  { 
   return number * number; 
}

arrow関数を用いて,functionキーワードから脱し,パラメータと関数本体の間に太い矢印=>を配置した.

const square = ( number ) => { 
   return number * number; 
}

関数が1行のコードで値を返す場合は、returnのキーワードとカッコを削除できます.

const square = ( number ) => number * number;

以前の文法より簡潔で簡潔ではないでしょうか.
ただし、arrow関数にパラメータが1つしか含まれていない場合は、カッコを削除することもできます.

const square = number => number * number;

もし私たちのarrow関数にパラメータがなければどうしますか?カッコのペアが必要です.

const sayHello = () => { console .log( 'hello' ); };

コールバック関数をパラメータとして渡す必要がある場合、矢印関数は特に便利です.

// ES5
var activeJobs = jobs.filter( function ( job )  { 
    return job.isActive; 
});
// ES6
const activeJobs = jobs.filter( job => job.isActive);

矢印機能は通常の機能とは異なり、thisを再バインドしないでください.このパターンはおなじみのように見えますか?

// ES5
function onSubmit ( )  { 
    // Keep a reference to "this" so we can use it in the inner function below. 
    var that = this ; 
    orderService.store(order, function ( result )  { 
       // In JavaScript, ever function defines its own "this" value. So, "this" in this inner function 
       // here is different from "this" in the onSubmit() function. That's why we had to keep a 
       // reference to "this" and store it in "that". Now, we can use "that": 
       that.result = result; 
    });
}

矢印機能は通常の機能とは異なり、thisを再バインドしないでください.クローズド実行コンテキストのthis値を使用します.したがって、上記の内部関数を矢印関数に置き換えると、thisの参照を保持する必要はありません.  もうない.

// ES6
function onSubmit ( )  { 
    orderService.store(order, result => { 
       // Since we're using an arrow function here, "this" references the "this" value of the containing function
       // (onSubmit). Arrow functions don't re-define "this". 
       this .result = result; 
    });
}

かいそう
解体は、オブジェクトからプロパティを抽出したり、配列からアイテムを抽出したりできる式です.このようなアドレスオブジェクトがあるとします.

const address = { 
   street : '123 Flinders st' ,
   city : 'Melbourne' ,
   state : 'Victoria'
};

他の場所では、これらのプロパティにアクセスし、一連の変数に値を格納する必要があります.

const street = address.street;
const city = address.city; 
const state = address.state;

「アドレス」という繰り返しコードがあります.3回繰り返す.オブジェクトの解体は、オブジェクト内の複数のプロパティの値を抽出するための簡潔な構文を提供します.

const { street, city, state } = address;

ただ!このコードは、上のコードセグメントと完全に等価です.左側のカッコを使用してアドレスオブジェクトを破壊します.カッコ内でstreet,city,stateの3つの変数を定義した.これらの値は、アドレスオブジェクトの対応するプロパティから抽出されます.
アドレスオブジェクトのすべてのプロパティをリストする必要はありません.私たちはstreetにしか興味がないかもしれません.

const { street } = address;

ネストされたオブジェクトを処理する場合、オブジェクトの分解は特に便利です.

const person = { 
   name : 'Mosh' , 
   address : {
      billing : { 
         street : '123 Flinders st' ,
         city : 'Melbourne' ,
         state : 'Victoria'
      }
   }
};

構造分解を行わない場合は、以下の醜く重複するコードを記述する必要があります.

const street = person.address.billing.street;
const city = person.address.billing.city;
const state = person.address.billing.state;
// So annoying!

1行のコードを使用して、同じ結果を得ることができます.

const { street, city, state } = person.address.billing;

配列を解くこともできますが、カッコ({})の代わりに角カッコ([])を使用します.1つの配列があるとします.1つ目と2つ目を追加し、2つの異なる変数に格納します.

// ES5
const values = [ 'John' , 'Smith' ];
const first = values[ 0 ];
const last = values[ 1 ]; 
// ugly!

構造を解くことで、上のコードを上記のように書き換えることができます.

// ES6
const values = [ 'John' , 'Smith' ];
const [first, last] = values;

JavaScriptを深く学びたい場合は、MoshのJavaScriptコースを強くお勧めします.すべてのコースのリンクは次のとおりです.

初心者のJavaScriptベース

JavaScriptのオブジェクト向けプログラミング

完全なNode JS課程

From: https://hackernoon.com/4-modern-javascript-es6-features-you-should-be-using-now-tp1h320q