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



に関するアンケートを追加

内容

• let
  
  
  
  、 const
  
  
  
  、blockスコープ
• 矢印関数
• デフォルトのオプション
• スプレッド/レストステートメント
• オブジェクトリテラルの強化
• 8進および2進リテラル
• 配列とオブジェクトの破壊
• オブジェクトのスーパーキーワード
• 文字列パターンと区切り記号
• 対...の対対...
• MapおよびWeakMap
• SetおよびWeakSet
• ES6のクラス
• シンボルデータ型
• イテレータ
• 発電機

• 約束

  
  
  
  
  
  
  
• 投票： 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