ES6 for humans
1.0.0
？完全なガイドがAmazonで利用可能になりました
let 、 const 、block scopingブロックスコーピングと呼ばれる任意のブロックにバインドされている宣言を作成できlet 。関数スコープを提供するvarを使用する代わりに、ES6でブロックスコープ変数（ letまたはconst ）を使用することをお勧めします。
var a = 2 ;
{
let a = 3 ;
console . log ( a ) ; // 3
let a = 5 ; // TypeError: Identifier 'a' has already been declared
}
console . log ( a ) ; // 2ブロックスコープ宣言の別の形式はconstで、定数を作成します。 ES6では、 const値への一定の参照を表します。言い換えれば、オブジェクトのObjectとArrayの内容は変化する可能性があり、変数の再割り当てのみが防止されます。これが簡単な例です：
{
const b = 5 ;
b = 10 ; // TypeError: Assignment to constant variable
const arr = [ 5 , 6 ] ;
arr . push ( 7 ) ;
console . log ( arr ) ; // [5,6,7]
arr = 10 ; // TypeError: Assignment to constant variable
arr [ 0 ] = 3 ; // value is mutable
console . log ( arr ) ; // [3,6,7]
}留意すべきいくつかのこと：
letとconstの巻き上げは、変数と関数の伝統的な巻き上げからさまざまです。 letとconst両方が巻かれていますが、一時的なデッドゾーンのため、宣言の前にアクセスできませんletとconstは、最も近い囲いブロックにスコープされます。const PI = 3.14 ）const 、その宣言で定義する必要があります。const over letを使用してください。矢印関数は、ES6で関数を書き込むための短いハンド表記です。矢印関数の定義は、パラメーターリスト( ... )で構成され、その後に=>マーカーと関数本文が続きます。単一アーグメント関数の場合、括弧は省略される場合があります。
// Classical Function Expression
function addition ( a , b ) {
return a + b ;
} ;
// Implementation with arrow function
const addition = ( a , b ) => a + b ;
// With single argument, no parentheses required
const add5 = a => 5 + a ;上記の例では、 addition矢印関数は「簡潔なボディ」で実装されていることに注意してください。これには、明示的な返品ステートメントは必要ありません。 =>後に省略された{ }に注意してください。
これは、通常の「ブロック本体」の例です。カーリーブレースラッパーを含む。
const arr = [ 'apple' , 'banana' , 'orange' ] ;
const breakfast = arr . map ( fruit => {
return fruit + 's' ;
} ) ;
console . log ( breakfast ) ; // ['apples', 'bananas', 'oranges']見よ！もっとあります...
矢印関数は、コードを短くするだけではありません。それらはthis結合挙動に密接に関連しています。
矢印機能thisキーワードの動作は、通常の関数の動作とは異なります。 JavaScriptの各関数は独自のthisを定義しますが、矢印関数は、最も近い囲まれたコンテキストのthis値をキャプチャします。次のコードをご覧ください。
function Person ( ) {
// The Person() constructor defines `this` as an instance of itself.
this . age = 0 ;
setInterval ( function growUp ( ) {
// In non-strict mode, the growUp() function defines `this`
// as the global object, which is different from the `this`
// defined by the Person() constructor.
this . age ++ ;
} , 1000 ) ;
}
var p = new Person ( ) ; ECMAScript 3/5では、この問題は、 this問題を閉じられる変数に割り当てることによって修正されました。
function Person ( ) {
const self = this ;
self . age = 0 ;
setInterval ( function growUp ( ) {
// The callback refers to the `self` variable of which
// the value is the expected object.
self . age ++ ;
} , 1000 ) ;
}上記のように、矢印関数は、最も近い囲まれたコンテキストのこの値をキャプチャするため、ネストされた矢印関数でさえ、次のコードが予想どおりに機能します。
function Person ( ) {
this . age = 0 ;
setInterval ( ( ) => {
setTimeout ( ( ) => {
this . age ++ ; // `this` properly refers to the person object
} , 1000 ) ;
} , 1000 ) ;
}
let p = new Person ( ) ;矢印関数の「lexical this」の詳細については、こちらをご覧ください
ES6を使用すると、関数定義でデフォルトパラメーターを設定できます。これが簡単なイラストです。
const getFinalPrice = ( price , tax = 0.7 ) => price + price * tax ;
getFinalPrice ( 500 ) ; // 850...オペレーターは、使用方法と場所に応じて、スプレッドオペレーターと呼ばれます。
反復可能で使用すると、個々の要素に「広げる」ように機能します。
const makeToast = ( breadType , topping1 , topping2 ) => {
return `I had ${ breadType } toast with ${ topping1 } and ${ topping2 } ` ;
} ; const ingredients = [ 'wheat' , 'butter' , 'jam' ] ;
makeToast ( ... ingredients ) ;
// "I had wheat toast with butter and jam"
makeToast ( ... [ 'sourdough' , 'avocado' , 'kale' ] ) ;
// "I had sourdough toast with avocado and kale"スプレッドは、他のオブジェクトから新しいオブジェクトを形作るのに最適です。
const defaults = { avatar : 'placeholder.jpg' , active : false }
const userData = { username : 'foo' , avatar : 'bar.jpg' }
console . log ( { created : '2017-12-31' , ... defaults , ... userData } )
// {created: "2017-12-31", avatar: "bar.jpg", active: false, username: "foo"}新しい配列は表現的に形作ることもできます。
const arr1 = [ 1 , 2 , 3 ] ;
const arr2 = [ 7 , 8 , 9 ] ;
console . log ( [ ... arr1 , 4 , 5 , 6 , ... arr2 ] ) // [1, 2, 3, 4, 5, 6, 7, 8, 9]他の一般的な使用法は...すべての引数を一緒に配列に集めています。これは「REST」オペレーターと呼ばれます。
function foo ( ... args ) {
console . log ( args ) ;
}
foo ( 1 , 2 , 3 , 4 , 5 ) ; // [1, 2, 3, 4, 5]ES6は、変数からプロパティを初期化し、関数手法を定義するための速記の構文を提供することにより、オブジェクトリテラルを宣言できます。また、オブジェクトの文字通り定義でプロパティキーを計算する機能を可能にします。
function getCar ( make , model , value ) {
return {
// with property value shorthand
// syntax, you can omit the property
// value if key matches variable
// name
make , // same as make: make
model , // same as model: model
value , // same as value: value
// computed values now work with
// object literals
[ 'make' + make ] : true ,
// Method definition shorthand syntax
// omits `function` keyword & colon
depreciate ( ) {
this . value -= 2500 ;
}
} ;
}
let car = getCar ( 'Kia' , 'Sorento' , 40000 ) ;
console . log ( car ) ;
// {
// make: 'Kia',
// model:'Sorento',
// value: 40000,
// makeKia: true,
// depreciate: function()
// }ES6は、Octalおよびバイナリリテラルを新たにサポートしています。 0oまたは0Oで数値を前に入力すると、それをオクタル値に変換します。次のコードをご覧ください。
let oValue = 0o10 ;
console . log ( oValue ) ; // 8
let bValue = 0b10 ; // 0b or 0B for binary
console . log ( bValue ) ; // 2破壊は、オブジェクトと配列を扱う際の温度変数の必要性を回避するのに役立ちます。
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 getCar ( ) {
return {
make : 'Tesla' ,
model : 'g95' ,
metadata : {
vin : '123abc' ,
miles : '12000'
}
} ;
}
const { make , model } = getCar ( ) ;
console . log ( make , model ) ; // Tesla g95
const { make , metadata : { miles } } = getCar ( ) ;
console . log ( make , miles ) ; // Tesla 12000
ES6では、プロトタイプを備えた（クラスレス）オブジェクトでsuperメソッドを使用できます。以下は簡単な例です。
const parent = {
foo ( ) {
console . log ( "Hello from the Parent" ) ;
}
}
const child = {
foo ( ) {
super . foo ( ) ;
console . log ( "Hello from the Child" ) ;
}
}
Object . setPrototypeOf ( child , parent ) ;
child . foo ( ) ; // Hello from the Parent
// Hello from the ChildES6は、自動的に評価される補間を追加する簡単な方法を導入します。
`${ ... }`は変数のレンダリングに使用されます。`バックティックはデリミッターとして使用されます。 let user = 'Kevin' ;
console . log ( `Hi ${ user } !` ) ; // Hi Kevin!for...ofアレイなどの反復可能なオブジェクトを繰り返します。 const nicknames = [ 'di' , 'boo' , 'punkeye' ] ;
nicknames . size = 3 ;
for ( let nickname of nicknames ) {
console . log ( nickname ) ;
}
// di
// boo
// punkeyefor...inオブジェクトのすべての列挙可能なプロパティを反復します。 const nicknames = [ 'di' , 'boo' , 'punkeye' ] ;
nicknames . size = 3 ;
for ( let nickname in nicknames ) {
console . log ( nickname ) ;
}
// 0
// 1
// 2
// sizeES6は、 MapとWeakMapと呼ばれる新しい一連のデータ構造を導入します。今、私たちは実際にJavaScriptのマップを常に使用しています。実際、すべてのオブジェクトはMapと見なすことができます。
オブジェクトはキー（常に文字列）と値で作られていますが、 Mapでは、任意の値（オブジェクトとプリミティブ値の両方）をキーまたは値として使用できます。このコードをご覧ください。
const myMap = new Map ( ) ;
const keyString = "a string" ,
keyObj = { } ,
keyFunc = ( ) => { } ;
// setting the values
myMap . set ( keyString , "value associated with 'a string'" ) ;
myMap . set ( keyObj , "value associated with keyObj" ) ;
myMap . set ( keyFunc , "value associated with keyFunc" ) ;
myMap . size ; // 3
// getting the values
myMap . get ( keyString ) ; // "value associated with 'a string'"
myMap . get ( keyObj ) ; // "value associated with keyObj"
myMap . get ( keyFunc ) ; // "value associated with keyFunc"WeakMap
WeakMapは、キーが弱く参照されるマップであり、そのキーがゴミ収集を妨げません。つまり、メモリリークを心配する必要がないことを意味します。
ここに注意すべき別のこと- すべてのキーがオブジェクトでなければならないMapとは対照的に、 WeakMapでは。
WeakMapには、4つのメソッドdelete(key) 、 has(key) 、 get(key) 、 set(key, value)のみがあります。
const w = new WeakMap ( ) ;
w . set ( 'a' , 'b' ) ;
// Uncaught TypeError: Invalid value used as weak map key
const o1 = { } ,
o2 = ( ) => { } ,
o3 = window ;
w . set ( o1 , 37 ) ;
w . set ( o2 , "azerty" ) ;
w . set ( o3 , undefined ) ;
w . get ( o3 ) ; // undefined, because that is the set value
w . has ( o1 ) ; // true
w . delete ( o1 ) ;
w . has ( o1 ) ; // falseセットオブジェクトは、一意の値のコレクションです。コレクションにはすべての一意の値が必要なため、重複した値は無視されます。値は、プリミティブタイプまたはオブジェクト参照です。
const mySet = new Set ( [ 1 , 1 , 2 , 2 , 3 , 3 ] ) ;
mySet . size ; // 3
mySet . has ( 1 ) ; // true
mySet . add ( 'strings' ) ;
mySet . add ( { a : 1 , b : 2 } ) ; forEachメソッドまたはループfor...of使用して、挿入順序でセットを反復することができます。
mySet . forEach ( ( item ) => {
console . log ( item ) ;
// 1
// 2
// 3
// 'strings'
// Object { a: 1, b: 2 }
} ) ;
for ( let value of mySet ) {
console . log ( value ) ;
// 1
// 2
// 3
// 'strings'
// Object { a: 1, b: 2 }
}セットにはdelete()およびclear()メソッドもあります。
弱点
WeakMapと同様に、 WeakSetオブジェクトを使用すると、コレクションに弱く保持されたオブジェクトを保存できます。 WeakSet内のオブジェクトは一度だけ発生します。 Weaksetのコレクションでユニークです。
const ws = new WeakSet ( ) ;
const obj = { } ;
const foo = { } ;
ws . add ( window ) ;
ws . add ( obj ) ;
ws . has ( window ) ; // true
ws . has ( foo ) ; // false, foo has not been added to the set
ws . delete ( window ) ; // removes window from the set
ws . has ( window ) ; // false, window has been removedES6は新しいクラスの構文を導入します。ここで注意すべきことの1つは、ES6クラスが新しいオブジェクト指向の継承モデルではないことです。それらは、JavaScriptの既存のプロトタイプベースの継承よりも構文的な砂糖として機能します。
ES6のクラスを見る1つの方法は、ES5で使用するプロトタイプとコンストラクター機能を操作するための新しい構文です。
staticキーワードを使用して定義された関数クラスに静的/クラス関数を実装します。
class Task {
constructor ( ) {
console . log ( "task instantiated!" ) ;
}
showId ( ) {
console . log ( 23 ) ;
}
static loadAll ( ) {
console . log ( "Loading all tasks.." ) ;
}
}
console . log ( typeof Task ) ; // function
const task = new Task ( ) ; // "task instantiated!"
task . showId ( ) ; // 23
Task . loadAll ( ) ; // "Loading all tasks.."クラスで拡張し、スーパー
次のコードを検討してください。
class Car {
constructor ( ) {
console . log ( "Creating a new car" ) ;
}
}
class Porsche extends Car {
constructor ( ) {
super ( ) ;
console . log ( "Creating Porsche" ) ;
}
}
let c = new Porsche ( ) ;
// Creating a new car
// Creating Porsche extends 、子どものクラスがES6の親クラスから継承することを可能にします。派生したコンストラクターがsuper()を呼び出す必要があることに注意することが重要です。
また、 super.parentMethodName()を使用して、子クラスのメソッドで親クラスの方法を呼び出すことができます
クラスの詳細はこちらをご覧ください
留意すべきいくつかのこと：
functionキーワードを使用する必要はありません。Symbolは、ES6で導入された一意で不変のデータ型です。シンボルの目的は、一意の識別子を生成することですが、その識別子にアクセスすることはできません。
シンボルの作成方法は次のとおりです。
const sym = Symbol ( "some optional description" ) ;
console . log ( typeof sym ) ; // symbol Symbol(…)を使用してnew使用はできないことに注意してください。
シンボルがオブジェクトのプロパティ/キーとして使用される場合、オブジェクトのプロパティの通常の列挙にプロパティが表示されないように特別な方法で保存されます。
const o = {
val : 10 ,
[ Symbol ( "random" ) ] : "I'm a symbol" ,
} ;
console . log ( Object . getOwnPropertyNames ( o ) ) ; // valオブジェクトのシンボルプロパティを取得するには、 Object.getOwnPropertySymbols(o)を使用します
イテレーターは、そのシーケンス内の現在の位置を追跡しながら、一度に1つずつアイテムにアクセスします。次のアイテムをシーケンスで返すnext()メソッドを提供します。このメソッドは、完了と値の2つのプロパティを持つオブジェクトを返します。
ES6には、オブジェクトのデフォルトのイテレーターを指定するSymbol.iteratorがあります。オブジェクトを繰り返す必要がある場合（for .. of loopの先頭など）、その@@ iteratorメソッドは引数なしで呼び出され、返されたイテレーターは、反復する値を取得するために使用されます。
反復可能な配列と、その値を消費するために生成できるイテレーターを見てみましょう。
const arr = [ 11 , 12 , 13 ] ;
const 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]()を定義することにより、カスタムイテレーターを記述できることに注意してください。
ジェネレーター関数は、ES6の新機能であり、関数が一度に1つの値から値を1つずつ値から引き出すために反復することができるオブジェクトを返すことにより、時間の経過とともに多くの値を生成できるようにします。
ジェネレーター関数は、呼び出されたときに反復可能なオブジェクトを返します。 ES6で導入された新しい*構文と新しいyieldキーワードを使用して書かれています。
function * infiniteNumbers ( ) {
let n = 1 ;
while ( true ) {
yield n ++ ;
}
}
const numbers = infiniteNumbers ( ) ; // returns an iterable object
numbers . next ( ) ; // { value: 1, done: false }
numbers . next ( ) ; // { value: 2, done: false }
numbers . next ( ) ; // { value: 3, done: false }収量が呼び出されるたびに、降伏された値はシーケンスの次の値になります。
また、ジェネレーターは、需要のある生成値を計算することで、計算に費用がかかるシーケンス、または無限のシーケンスを効率的に表すことができることに注意してください。
ES6には、約束に対するネイティブサポートがあります。約束とは、非同期操作が完了するのを待っているオブジェクトであり、その操作が完了すると、約束が満たされる（解決）または拒否されます。
約束を作成する標準的な方法は、パラメーターとして2つの関数が与えられるハンドラーを受け入れるnew Promise()コンストラクターを使用することです。最初のハンドラー（通常はresolveという名前）は、準備ができたときに将来の値で呼び出す関数です。また、セカンドハンドラー（通常はrejectと名付けられています）は、将来の価値を解決できない場合、約束を拒否するために呼び出す関数です。
const p = new Promise ( ( resolve , reject ) => {
if ( /* condition */ ) {
resolve ( /* value */ ) ; // fulfilled successfully
} else {
reject ( /* reason */ ) ; // error, rejected
}
} ) ;すべての約束には、コールバックのペアが必要なthenの名前が付いています。約束が解決された場合、最初のコールバックが呼び出され、2つ目は約束が拒否された場合に呼び出されます。
p . then ( ( val ) => console . log ( "Promise Resolved" , val ) ,
( err ) => console . log ( "Promise Rejected" , err ) ) ; then以降の値を返すと、値が次のthenに渡され、コールバックが渡されます。
const hello = new Promise ( ( resolve , reject ) => { resolve ( "Hello" ) } ) ;
hello . then ( ( str ) => ` ${ str } World` )
. then ( ( str ) => ` ${ str } !` )
. then ( ( str ) => console . log ( str ) ) // Hello World!約束を返すと、約束の解決された価値が次のコールバックに渡され、効果的にそれらをまとめます。これは、「コールバックヘル」を避けるための簡単なテクニックです。
const p = new Promise ( ( resolve , reject ) => { resolve ( 1 ) } ) ;
const eventuallyAdd1 = ( val ) => new Promise ( ( resolve , reject ) => { resolve ( val + 1 ) } ) ;
p . then ( eventuallyAdd1 )
. then ( eventuallyAdd1 )
. then ( ( val ) => console . log ( val ) ) ; // 3
