Good Mood

開発者はES5オブジェクトよりも多くのロジックをパックし、より多くのことを行うことができるため、これは古き良きオブジェクトリテラルに対する素晴らしい拡張です！,

Es6の矢印関数

これはおそらく私が最も待っていた機能です。 私はその脂肪の矢印のためにCoffeeScriptを愛しました。 今、我々はES6にそれらを持っています。つまり、thisは関数のコンテキストと同じ値を持ちます—クロージャを作成するたびに通常起こるように変更されません。 この動作はJavaScriptの悪い部分の一つであり、しばしば言語に慣れていない開発者と多くの混乱を引き起こしました。, ES6で矢印関数を使用すると、that=thisまたはself=thisまたは_this=this orの使用をやめることができます。バインド（これ）。

たとえば、ES5のこのコードは、_thisでコンテキストをクロージャに転送することを忘れる可能性があるため、醜いです。

var _this = this
$('.btn').click(function(event){
_this.sendData()
})

bind()またはcall()アプローチは、その冗長性のためにはるかに優れていません。 しかし、このかなりES6コードを見てみましょう：

$('.btn').click((event) =>{
this.sendData()
})

悲しいことに、ES6委員会はCoffeeScriptから細い矢印を借りることはあまりにも良いことであり、代わりに長い古い関数を残してしまったと判断しました。, （CoffeeScriptのSkinny arrowは、ES5およびES6の通常の関数のように機能します）。

es5のlogUpperCase()関数にコンテキストを渡すためにcallを使用する別の例を次に示します。

ES6では、_thisをいじる必要はありません。

ES6では、=>と古い関数を混在させて一致させることができることに注意してください。 そして、矢印関数が一行ステートメントで使用されると、それは式になります。 その単一のステートメントの結果を暗黙的に返します。 複数の行がある場合は、return明示的に使用する必要があります。,

このES5コードはmessages配列から配列を作成しています：

ES6でこれになります：

var ids = 
var messages = ids.map(value => `ID is ${value}`) // implicit return

文字列テンプレートを使用したことに注意してください？ CoffeeScriptからのもう一つの機能…私はそれらを愛する！

矢印関数シグネチャ内の単一のparamsに対して、括弧()はオプションです。 ただし、複数のparamを使用する場合は、それらが必要になります。 ES5では、コードは明示的なリターンを持つ関数を持っています：

ここでは、paramsと暗黙のリターンを囲む括弧を持つES6のコードのより雄弁なバージョンです：

太った矢印は素晴らしいではありませんか？ それらを使用します。,

Es6のPromises

Promisesは、特に一般的なアプローチに同意するのが難しい大規模な組織では、議論の余地のある開発トピックでした。 この理由の一つは、わずかに異なる構文を使用するpromise実装の数です—Q、bluebird、deferred。js、vow、avow、およびjqueryはほんの数名に延期されました。 もう一つの理由は、一部のソフトウェアエンジニアが、”約束は必要なく、非同期、ジェネレータ、コールバックなどを使用できるだけです。”

幸いなことに、ES6に標準のPromise実装が追加されたことで、議論が静まる可能性があります！,

setTimeout()で遅延非同期実行のかなり簡単な例を考えてみましょう：

setTimeout(function(){ console.log('Yay!') }, 1000)

このコードをEs6でPromiseで書き直すことができます：

var wait1000 = new Promise(function(resolve, reject) {
setTimeout(resolve, 1000)
}).then(function() {
console.log('Yay!')
})

またはES6矢印関数で：

var wait1000 = new Promise((resolve, reject)=> {
setTimeout(resolve, 1000)
}).then(()=> {
console.log('Yay!')
})

これまでのところ、明らかな利益なしにコード行数を三行から五行に増やしました。 そうです、それは直感に反するようです。 SetTimeout()コールバックの中にもっと入れ子になったロジックがあれば、メリットがあります。, たとえば、このES5コードには二つのネストされたコールバックがあります。

setTimeout(function(){
console.log('Yay!')
setTimeout(function(){
console.log('Wheeyee!')
}, 1000)
}, 1000)

ES6promisesで書き直すことができます。

ご覧のように、コールバックのみのコードをpromises付きのコードにリファクタリングすると、コード構成が変更されました。

このエッセイでカバーされていないもう一つの利点—promisesには、fail-and-catch-allコールバックがあり、これは素晴らしい機能です。 Promisesの詳細については、この記事をご覧ください：ES6Promisesの概要。

ブロックスコープの構造：LetとConst

ES6コードで奇妙な響きのletをすでに見たことがあるかもしれません。, これは単なるシュガーコーティング機能ではありません。 これはより複雑で、変数宣言により多くのロジックを追加します。

letは、開発者が変数をブロックにスコープすることを可能にする新しいvarです。 中括弧でブロックを定義します。 ES5では、ここに見られるようにブロックはvarsに何もしませんでした：

上記のコードでは、結果は1000になります。 うわっ! それは本当に悪いバグです。 ES6では、letを使用してスコープをブロックに制限します。 その後、varは関数スコープになります。

このコードでは、ifブロックにもlet宣言があるため、値は0です。, 何もなかった場合（amount=1）、式は1になります。それは単に再割り当てを防ぐだけでなく、letのようなブロックスコープでもあります。 ちょうど実証するために、ここでは複数の定数があり、const文が異なるブロックに属しているため、コードは正常に動作します。

私の愚見では、letとconstは言語 それらがなければ、我々は唯一の行動を持っていた、今考慮すべき複数のシナリオがあ, ;-（Java、const、letなどの言語から来ているJavaScriptを初めて使用する人にとっては、予測不可能な動作に対する組み込み保護の新しい層を提供します。

ES6のクラス

オブジェクト指向プログラミング(OOP)が好きなら、この機能が好きになるでしょう。 このライティング学習にES6、受け継ぎ、それらからどお好みのコメントFacebook.

ES5では、クラスの作成と使用は控えめに言うのが難しかったです。 Keywordクラスはありませんでした（予約済みですが、何もしませんでした）。, それに加えて、擬似古典的、古典的、機能的なような多くの継承パターンが混乱に加わり、JavaScript開発者間の激しい分裂にガソリンを注ぎました。

多くのパターンがあるので、ES5でクラスを書く方法は示しません。 すぐにES6の例を見てみましょう。 ES6クラスは関数ファクトリアプローチではなくプロトタイプを使用することがわかります。 コンストラクタとgetName()メソッドを定義できるclassbaseModelがあります。

オプションとデータにデフォルトのパラメータ値を使用していることに注意してください。, また、メソッド名にはfunctionという単語やコロン(:)を含める必要はありません。 そしてもう一つの大きな違いはできません譲渡物件です。名前と同様の方法、すなわちできないと言う名前で同じインデントレベルとしてメソッドになっています。 プロパティの値を設定するには、コンストラクターで値を割り当てるだけです。,

AccountModelはbaseModelから継承しますクラス名extends PARENT_NAME:

class AccountModel extends baseModel {
constructor(options, data) {

親コンストラクタを呼び出すには、paramsでsuper()を簡単に呼び出します。

super({private: true}, ) // Call the parent method with super
this.name = 'Account Model'
this.url +='/accounts/'
}

本当に気に入りたい場合は、accountsDataをプロパティとして次のようなゲッターを設定することもできます。

get accountsData() { // Calculated attribute getter
// ... make XHR
return this.data
}
}

この作業の後、実際にこのクラスabracadabraをどのように使用しますか？ それはサンタクロースを信じるように三歳をだますのと同じくらい簡単です。, 新しいオペランドを使用してください：

let accounts = new AccountModel(5)
accounts.getName()
console.log('Data is %s', accounts.accountsData)

あなたが疑問に思っている場合、出力は次のとおりです。

Class name: Account Model
Data is %s 32113123123,524214691

もちろん、CoffeeScriptや古いJavaScript標準にはクラスが存在していたため、完全に新しいものではありません。 しかし、ES6ではクラスを使用することが容易になりましたが、これは通常、複数のチームにまたがる大規模なプロジェクトで作業するため、エンタープラ

ES6のモジュール

ご存知かもしれませんが、ES6より前のJavaScriptではネイティブモジュールはサポートされていませんでした。, 人々はAMD、RequireJS、CommonJS、およびその他の回避策を思いついたが、回避策とハックだけであった。 ES6では、インポートおよびエクスポートオペランドを持つ組み込みモジュールが

ES5では、<script>IIFE、またはAMDのようなライブラリでタグを使用しますが、ES6ではexportでクラスを公開できます。 私はノードだから。jsの男だから私はノードでもあるCommonJSを使います。この問題を解決するためのjs構文。 Browserify bundlerを使用してブラウザ上でCommonJSを使用するのはかなり簡単です。, ES5モジュールにport変数とgetAccountsメソッドがあるとしましょう。js:

module.exports = {
port: 3000,
getAccounts: function() {
...
}
}

ES5メインで。jsでは、その依存関係（’module’）が必要になります。

var service = require('module.js')
console.log(service.port) // 3000

ES6では、exportとimportを使用します。 たとえば、これはES6モジュールのライブラリです。jsファイル：

export var port = 3000
export function getAccounts(url) {
...
}

インポータES6ファイルメインで。jsでは、’my-module’構文からimport{name}を使用します。, たとえば、オブジェクト/メソッドportをインポートし、moduleと呼ばれるモジュールからgetAccountsをインポートできます。

import {port, getAccounts} from 'module'
console.log(port) // 3000

または、mainの可変サービスとしてすべてをインポートできます。js:

import * as service from 'module'
console.log(service.port) // 3000

ブラウザでのES6モジュールのネイティブサポートは（少なくともこの執筆時点では）すぐには来ないので、ES6モジュールを利用するにはjspmのようなものが必要になります。

ES6モジュールの詳細と例については、このテキストを参照してください。 そして、覚えている—何があっても、モジュラー JavaScriptを書く！,

FOR…OF Comprehensions in ES6

ここにES5の問題があります：キーを使用してオブジェクトを反復処理したい場合は、最初にObjectでそれらのキーを抽出する必キー（）。 例：

forEachの別の問題は、word関数を記述する必要があることです。 しかし、ES6にはより良い声明があります！ For…ofステートメントは、標準のforおよびforEachを置き換え、次のようになりますfor…in それを除いてそれはfor…in キーおよびfor…of値を反復処理します。,

前のコードスニペットのデータ（books）を使用して、次のように繰り返すことができますfor…in そしてキーまたはfor…ofを使用して：

for (let key in books){
console.log(books)
}

キーを出力します：

Pro Express.js
React Quickly
Full Stack JavaScript
Azat

for…ofは値で動作しますが：

for (let book of books){
console.log(book)
}

for…ofの出力：

Pro Express.js
React Quickly
Full Stack JavaScript

for…ofの出力は、配列のforeachと同じようにキー authorの値を無視することに注意してください。

内包表記を扱う私の個人的な経験は、コードの可読性を高め これは非常に重要なことでコードが整備することが可能となります。