🤳🏼 🚵 🥖 ES6は人間です 👮 🌻 ⬛️

翻訳者から：
ES6の短い（本当に短い）ガイドの翻訳をご紹介します。 その中で、標準の基本概念を知ることができます。
場合によっては、元のテキストが補足されたり、より適切なソースに置き換えられたりします。 たとえば、 constキーワードの定義の一部は、 MDNからのドキュメントの翻訳です。
（高品質の翻訳のために）概念のいくつかをよりよく理解するために、 MDN Webサイト、ガイド「You Do n't Know JS：ES6＆Beyond」、およびIlya Kantorの教科書で標準の説明が使用されました。

翻訳はGithubに投稿されました： https : //github.com/etnolover/ES6-for-humans-translation エラーを見つけたら、書き、修正してください。
元のテキストへのリンク： https : //github.com/metagrover/ES6-for-humans

2016年7月22日更新： constに関するアンケートを追加

内容

1. let、const、blockスコープ

letキーワードを使用すると、限定されたスコープで変数を宣言できます-宣言が行われるブロック{...}に対してのみ。これはブロックスコープと呼ばれます。 ES6では、関数内でスコープを提供するvarキーワードの代わりに、 letの使用を推奨しています。

 var a = 2; { let a = 3; console.log(a); // 3 } console.log(a); // 2

ブロックスコープで変数を宣言する別の形式はconstキーワードです。値が読み取り専用である変数（定数）を宣言することを目的としています。これは、定数値が変更されないことを意味するのではなく、変数識別子を再割り当てできないことを意味します。
以下に簡単な例を示します。

 { const ARR = [5, 6]; ARR.push(7); console.log(ARR); // [5,6,7] ARR = 10; // TypeError ARR[0] = 3; //    console.log(ARR); // [3,6,7] }

覚えておくべきこと：

let変数とconst変数の巻き上げに関しては、それらの動作は従来のvarおよびfunction動作とは異なります。 letとconst両方let 、発表前に存在しません（ 翻訳者から：詳細については、元のマニュアルの著者はTemporal Dead Zoneの記事を参照しています ）
letとconstのスコープは最も近いブロックです。
constを使用する場合は、大文字を使用することをお勧めします。
constでは、変数宣言と同時に値を割り当てる必要があります。

2.矢印機能

矢印関数は、ES6の関数の略記です。矢印関数は、パラメータのリスト( ... )後に=>記号と関数の本体が続きます。

 //    let addition = function(a, b) { return a + b; }; //   let addition = (a, b) => a + b;

上記の例では、関数の本体は短いレコードであり、結果を返すことを明示的に示す必要はありません。

そして、これは中括弧のブロックを使用した例です：

 let arr = ['apple', 'banana', 'orange']; let breakfast = arr.map(fruit => { return fruit + 's'; }); console.log(breakfast); // ['apples', 'bananas', 'oranges']

それだけではありません！...

矢印関数は、コードを短くするだけではありません。これらは、 thisおよびコンテキストバインディングと密接に関連しています。

thisした矢印関数の動作は、 thisを使用した通常の関数の動作とは異なります。 JavaScriptの各関数は独自のthisコンテキストを定義しますが、内部の矢印関数のthis値は外部と同じです（矢印関数には独自のthisはありません）。次のコードを見てみましょう。

 function Person() { //  Person()  `this`    . this.age = 0; setInterval(function growUp() { //   `use strict`,  growUp()  `this` //   ,    `this`, //   Person(). this.age++; }, 1000); } var p = new Person();

ECMAScript 3/5では、 this別の変数に割り当てることにより、この動作を変更することが可能になりました。

 function Person() { var self = this; self.age = 0; setInterval(function growUp() { //     `self`, //     . self.age++; }, 1000); }

上記のように、内部の矢印関数this外部と同じなので、次のコードは期待どおりに機能します。

 function Person() { this.age = 0; setInterval(() => { this.age++; // `this`    person }, 1000); } var p = new Person();

MDNの矢印関数で「Lexical this」の詳細をご覧ください

3.デフォルト設定

ES6では、関数を宣言するときにデフォルトのパラメーターを設定できます。以下に簡単な例を示します。

 let getFinalPrice = (price, tax = 0.7) => price + price * tax; getFinalPrice(500); // 850,    tax   getFinalPrice(500, 0.2); // 600,  tax -   0.2

4.スプレッド/レストステートメント

...演算子は、使用方法と場所に応じて、スプレッドまたはレストと呼ばれます。

反復可能なオブジェクトで使用される場合、この演算子は個々の要素に「分割」します。

 function foo(x, y, z) { console.log(x, y, z); } let arr = [1, 2, 3]; foo(...arr); // 1 2 3

演算子...のもう1つの一般的な使用法は、値のセットを単一の配列に結合することです。この場合、オペレーターは「rest」のように機能します（ 翻訳者から ：ロシア語への適切な翻訳は見つかりませんでした。以下の例から、すべてが明らかになります）

 function foo(...args) { console.log(args); } foo(1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

5.オブジェクトリテラルの拡張

ES6では、短い構文を使用してオブジェクトリテラルを宣言し、変数からプロパティを初期化し、機能的なメソッドを定義できます。また、この標準は、オブジェクトリテラルでプロパティを直接計算する機能を提供します。

 function getCar(make, model, value) { return { //      //   ,   //    ,  //     make, //  make: make model, //  model: model value, //  value: value //      //   ['make' + make]: true, //      //   `function`  .  // "depreciate: function() {}"  : depreciate() { this.value -= 2500; } }; } let car = getCar('Kia', 'Sorento', 40000); console.log(car); // { // make: 'Kia', // model:'Sorento', // value: 40000, // makeKia: true, // depreciate: function() // }

6. 8進および2進リテラル

ES6では、8進リテラルと2進リテラルの新しいサポートが導入されています。
数値の先頭に0oまたは0Oを追加すると、8進数に変換されます（同様に、 0bまたは0Bは2進数に変換されます）。次のコードを見てみましょう。

 let oValue = 0o10; console.log(oValue); // 8 let bValue = 0b10; console.log(bValue); // 2

7.配列とオブジェクトの再構築

構造化は、オブジェクトや配列とやり取りする際に補助変数の使用を回避するのに役立ちます。

 function foo() { return [1, 2, 3]; } let arr = foo(); // [1,2,3] let [a, b, c] = foo(); console.log(a, b, c); // 1 2 3 function bar() { return { x: 4, y: 5, z: 6 }; } let { x: a, y: b, z: c } = bar(); console.log(a, b, c); // 4 5 6

8.オブジェクトのスーパーキーワード

ES6では、プロトタイプを持つ（クラスレス）オブジェクトでsuperメソッドを使用できます。以下に簡単な例を示します。

 var parent = { foo() { console.log("  !"); } } var child = { foo() { super.foo(); console.log("  !"); } } Object.setPrototypeOf(child, parent); child.foo(); //   ! //   !

9.文字列パターンと区切り記号

ES6は、変数の値または式の結果（「補間」と呼ばれる）を挿入する簡単な方法を提供します。これは自動的に計算されます。

${ ... } 、変数/式の値を計算するために使用されます。
`バックティックは、このような場合の区切り文字として使用されます。

 let user = ''; console.log(`, ${user}!`); // , !

10. for ... of vs for ... in

for...of 、配列などの反復可能なオブジェクトを反復処理するために使用されます。

 let nicknames = ['di', 'boo', 'punkeye']; nicknames.size = 3; for (let nickname of nicknames) { console.log(nickname); } // di // boo // punkeye

for...in 、オブジェクトのすべての列挙可能なプロパティをループするために使用されます。

 let nicknames = ['di', 'boo', 'punkeye']; nicknames.size = 3; for (let nickname in nicknames) { console.log(nickname); } // 0 // 1 // 2 // size

11.マップとWeakMap

ES6には、新しいデータ構造MapとWeakMap導入されています。実際、JavaScriptでは常に「マップ」を使用しています。各オブジェクトは、 Map特殊なケースとして表すことができます。

クラシックオブジェクトはキー（常に文字列形式）と値で構成されますが、 Mapではキーと値（オブジェクトとプリミティブの両方）に任意の値を使用できます。このコードを見てください：

 var myMap = new Map(); var keyString = "", keyObj = {}, keyFunc = function() {}; //   myMap.set(keyString, ",   ''"); myMap.set(keyObj, ",   keyObj"); myMap.set(keyFunc, ",   keyFunc"); myMap.size; // 3 //   myMap.get(keyString); // ",   ''" myMap.get(keyObj); // ",   keyObj" myMap.get(keyFunc); // ",   keyFunc"

弱マップ

WeakMapは、キーが不安定な関係にあるMapです。これにより、 WeakMap要素を削除するためにガベージコレクターに干渉することがWeakMapます。つまり、メモリリークを心配する必要はありません。

WeakMapでは、 Mapとは異なり、 各キーはオブジェクトでなければなりません 。

WeakMapにhas() 、 delete() 、 has() 、 get()およびset(, ) 4つのメソッドしかありません。

 let w = new WeakMap(); w.set('a', 'b'); // Uncaught TypeError: Invalid value used as weak map key var o1 = {}, o2 = function(){}, o3 = window; w.set(o1, 37); w.set(o2, "azerty"); w.set(o3, undefined); w.get(o3); // undefined,      w.has(o1); // true w.delete(o1); w.has(o1); // false

12. SetおよびWeakSet

セットオブジェクトは一意の値のコレクションです。重複する値は無視されますコレクションには一意の値のみを含める必要があります。値は、プリミティブまたはオブジェクト参照です。

 let mySet = new Set([1, 1, 2, 2, 3, 3]); mySet.size; // 3 mySet.has(1); // true mySet.add(''); mySet.add({ a: 1, b:2 });

forEachまたはfor...ofを使用して、ループ内でSetを反復処理できfor...of 。列挙は、挿入と同じ順序で発生します。

 mySet.forEach((item) => { console.log(item); // 1 // 2 // 3 // '' // Object { a: 1, b: 2 } }); for (let value of mySet) { console.log(value); // 1 // 2 // 3 // '' // Object { a: 1, b: 2 } }

Setには、 delete()およびclear()メソッドもあります。

弱点

WeakMapと同様に、 WeakSetオブジェクトを使用WeakSetと、不安定な関係を持つオブジェクトをコレクションに格納できWeakSet 。 WeakSetのオブジェクトは一意です。

 var ws = new WeakSet(); var obj = {}; var foo = {}; ws.add(window); ws.add(obj); ws.has(window); // true ws.has(foo); // false, foo      ws.delete(window); //  window   ws.has(window); // false, window

13. ES6のクラス

ES6では、クラスの新しい構文が導入されました。ここで、ES6クラスは新しいオブジェクト指向の継承モデルではないことに注意してください。これは、JavaScriptのプロトタイプ継承の構文糖衣です。

ES6のクラスは、ES5での使用に慣れているプロトタイプとコンストラクター関数を操作するための新しい構文です。

staticを使用して記述された関数は、クラスの静的プロパティを宣言するために使用されます。

 class Task { constructor() { console.log("  task!"); } showId() { console.log(23); } static loadAll() { console.log("  tasks..."); } } console.log(typeof Task); // function let task = new Task(); // "  task!" task.showId(); // 23 Task.loadAll(); // "  tasks..."

クラスの拡張およびスーパー

次のコードを見てみましょう。

 class Car { constructor() { console.log("  "); } } class Porsche extends Car { constructor() { super(); console.log(" Porsche"); } } let c = new Porsche(); //    //  Porsche

ES6では、 extends使用して、子孫クラスがその親クラスから継承できます。下位クラスのコンストラクタはsuper（）を呼び出す必要があることに注意することが重要です。

また、子クラスでは、 super.()を使用して親クラスのメソッドを呼び出すことができます。

MDNのクラスの詳細

覚えておくべきこと：

クラス宣言は上がりません（引き上げられません）。最初にクラスを宣言する必要があり、それを使用した後にのみ、そうしないとReferenceErrorエラーが発生します。
クラス定義内で関数を定義するときに、 functionキーワードを使用する必要はありません。

14.シンボルのデータ型

シンボルは、ES6で導入された一意で不変のデータ型です。 Symbol目標は、アクセスできない一意の識別子を作成することです。

Symbolを作成する方法は次のとおりです。

 var sym = Symbol(" "); console.log(typeof sym); // symbol

newをSymbol(…)と共に使用できないことに注意してください。

Symbolオブジェクトのプロパティ/キーとして使用される場合、オブジェクトのプロパティの通常の列挙中にプロパティが表示されないような特別な方法で保存されます。

 var o = { val: 10, [Symbol("")]: " - ", }; console.log(Object.getOwnPropertyNames(o)); // val

オブジェクトのシンボリックプロパティを取得するには、 Object.getOwnPropertySymbols(o)使用します

15.イテレータ

イテレータは、コレクションの現在の位置のメモリを保持しながら、コレクションの要素に一度に1つずつアクセスします。反復子には、シーケンス内の次の要素を返すnext()メソッドがあります。このメソッドは、done（検索が終了したかどうか）とvalue（値）の2つのプロパティを持つオブジェクトを返します。

ES6には、デフォルトオブジェクトのイテレータを定義するSymbol.iteratorメソッドがあります。オブジェクトのループを反復処理する必要がある場合（for..ofループの開始時など）、そのイテレータメソッドは引数なしで呼び出され、返されたイテレータは反復の値を取得するために使用されます。

反復可能な配列と、配列がその値を処理するために必要な反復子を見てみましょう。

 var arr = [11,12,13]; var itr = arr[Symbol.iterator](); itr.next(); // { value: 11, done: false } itr.next(); // { value: 12, done: false } itr.next(); // { value: 13, done: false } itr.next(); // { value: undefined, done: true }

obj[Symbol.iterator]()定義とオブジェクトの説明を使用して、独自のイテレータを作成できることに注意してください。

イテレータの詳細：
MDN Webサイト

16.ジェネレーター

ジェネレーター関数は、関数から値を1つずつスローするために反復できるオブジェクト（ジェネレーターと呼ばれる）を返すことにより、関数が一定期間にわたって多くの値を作成できるようにするES6の新しい機能です。

ジェネレーター関数は、呼び出されると反復可能なオブジェクトを返します。
ジェネレーター関数は、 functionキーワードの後に*記号を使用して記述されており、 functionキーワードにはyieldキーワードが必要です。

 function *infiniteNumbers() { var n = 1; while (true) { yield n++; } } var numbers = infiniteNumbers(); //    numbers.next(); // { value: 1, done: false } numbers.next(); // { value: 2, done: false } numbers.next(); // { value: 3, done: false }

yield呼び出されるたびに、戻り値はシーケンスの次の値になります。

また、ジェネレーターは、要求に応じて戻り値を計算するため、計算コストの高いシーケンス、または無限のシーケンスでさえ効率的に表現できます。

17.約束

ES6にはpromiseのサポートが組み込まれています。約束は、非同期操作が完了するまで待機するオブジェクトであり、その後（つまり、実行後）、約束は2つの状態のいずれかを受け入れます：履行（解決、成功）または拒否（失敗）。

new Promise()を作成する標準的な方法は、 new Promise()コンストラクターです。これは、パラメーターとして2つの関数を持つハンドラーを受け入れます。最初のハンドラー（通常、 resolveと呼ばれる）は、準備ができたときに将来の値とともに呼び出す関数です。 2番目のハンドラー（通常はrejectと呼ばれます）は、将来の値を判別できない場合にプロミスの実行を拒否するために呼び出される関数です。

 var p = new Promise(function(resolve, reject) { if (/*  */) { resolve(/*  */); // fulfilled successfully ( ) } else { reject(/* reason */); // rejected () } });

各promiseにはthenメソッドがあり、2つのコールバックがあります。 Promiseが正常に実行（解決）されると最初のコールバックが呼び出され、Promiseがエラー（拒否）で実行されると2番目のコールバックが呼び出されます。

 p.then((val) => console.log("  ", val), (err) => console.log("   ", err));

then値が返されるthenコールバックは次のコールバックに値を渡します。

 var hello = new Promise(function(resolve, reject) { resolve(""); }); hello.then((str) => `${str} `) .then((str) => `${str}!`) .then((str) => console.log(str)) //  !

Promiseが返されると、Promiseの正常に処理された値は、それらを効果的に接続するために次のコールバックに進みます。
この単純な手法は、コールバックによる地獄（「コールバック地獄」）を回避するのに役立ちます。

 var p = new Promise(function(resolve, reject) { resolve(1); }); var eventuallyAdd1 = (val) => { return new Promise(function(resolve, reject){ resolve(val + 1); }); } p.then(eventuallyAdd1) .then(eventuallyAdd1) .then((val) => console.log(val)) // 3

ES6は人間です

内容