Toptalの迅速で実用的なJavaScriptチートシート：ES6以降

定数

対var

> const EULER = 2.7182818284
>オイラー=13
>オイラー
> 2.7182818284

>変数平均=5
> var average =（average + 1）/ 2
>平均
> 3
> let value ='hello world'
> let value='何が新しいか'
//-> TypeErrorをスローします：識別子'value'はすでに宣言されています

警告！ 配列またはオブジェクトの場合、参照は一定に保たれます。 定数がオブジェクトへの参照である場合でも、コンテンツを変更することはできますが、変数を変更することはできません。

> const CONSTANTS = []
> CONSTANTS.push（EULER）
>定数
> [2.7182818284]
>定数={'オイラー'：2.7182818284}
>定数
> [2.7182818284]

時間的デッドゾーンに注意してください：

> console.log（val） //->'undefined'
> var val = 3
> console.log（val） //-> 3

それは以下と同等であるため：

2進数、8進数、16進数の表記

> var val
> console.log（val）
> val = 3
> console.log（val）

> 0b1001011101 // 605
> 0o6745 // 3557
> 0x2f50a // 193802

「let/const」で宣言された変数は引き上げられません：

新しいタイプ

> console.log（val）
//->ReferenceErrorをスローします
> val=3とします
> console.log（val） //-> 3

シンボル、マップ、WeakMapsおよびセット

矢印機能

新しいスコープ関数

> setTimeout（（）=> {
…console.log（'delayed'）
…}、1000）

> {
…letcue='ルーク、私はあなたの父です'
… console.log（cue）
…}
>「ルーク、私はあなたの父です」

匿名関数と同等

即時呼び出し関数式（IIFE）と同等

> setTimeout（function（）{
…console.log（'delayed'）
…}.bind（this）、1000）

> （関数（）{
…varcue='ルーク、私はあなたの父です' …console.log（cue） //'ルーク、私は–
…}（））
> console.log（cue） //参照エラー

オブジェクト表記ノベルティ

テンプレートリテラルのおかげで文字列補間

//計算されたプロパティ
> let key = new Date（）。getTime（）
> let obj = {[key]：“ value”}
> obj
> {'1459958882881'：'値'}

//オブジェクトリテラル
バルーン={色、サイズ};

// と同じ
バルーン={
色：色、
サイズ：サイズ

}

//より良いメソッド表記
obj = {
foo（a、b）{…}、
バー（x、y）{…}
}

> const name='タイガー'
>定数年齢=13
> console.log （`私の猫は${name}という名前で、$ {age}歳です。`）
>私の猫はタイガーという名前で13歳です。

//改行を保持できます…
テキスト=（ `cat
犬
ニコロデオン`
）。

デフォルトのパラメータ

>関数howAreYou（answer ='ok'）{
console.log（answer） //おそらく'ok'
}

約束

クラス、継承、セッター、ゲッター

new Promise（（resolve、reject）=> {
request.get（url、（エラー、応答、
本体）=> {
if（body）{
resolve（JSON.parse（body））;
} そうしないと {
解決（{}）;
}
}）
}）。then（（）=> {...}）
.catch（（err）=> throw err）

//タスクを並列化します
Promise.all（[
promise1、promise2、promise3
]）。then（（）=> {
//すべてのタスクが終了しました
}）

クラスRectangleはShape{を拡張します
コンストラクター（id、x、y、w、h）{
super（id、x、y）
this.width = w
this.height = h
}
//ゲッターとセッター
幅を設定（w）{this._width = w}
get width（）{return this._width}
}

クラスCircleはShapeを拡張します{
コンストラクター（id、x、y、radius）{
super（id、x、y）
this.radius = radius
}
do_a （x）{
a=12とします。
super.do_a（x + a）;
}
static do_b（）{...}
}
Circle.do_b（）

アレイの破壊

オブジェクトを破壊する

> [a、b、c、d] = [1、2、3、4];
> console.log（a）;
> 1
> b
> 2

> let luke = {職業：'ジェダイ'、
父：'アナキン'}
> {職業、父}=ルーク
> console.log（職業、父親）
>ジェダイ・アナキン

スプレッド演算子

...上司のように破壊する

//配列をカンマ区切りに変換します
//値など
>関数ロガー（... args）{
console.log（'％s引数'、
args.length）
args.forEach（console.log）
// arg [0]、arg [1]、arg [2]
}

> const [猫、犬、...魚] = [
「シュレーディンガー」、「ライカ」、「ネモ」、「ドリ」]
>魚//->['Nemo'、'Dori']

またはより良いプッシュを行う

...そして将来のES7での破壊

> arr = [1、2、3]とします
> [... arr、4、5、6]
> [1、2、3、4、5、6]

{a、b、... rest} = {a：1、b：2、c：3、d：4}

非同期ES7

ES7を待つ

非同期関数シュレディンガー（）{
新しいPromiseを返す（（解決、拒否）
=> {
const result = Math.random> 0.5
setTimeout（（）=> {
結果を返しますか？ resolve（'alive'）
：reject（'dead'）
}）
}）
}

試す {
console.log（schrodinger（）を待つ）
//->'生きている'
} catch（err）{
console.log（err）
//->'死んだ'
}

ES7をエクスポート

ES7のインポート

エクスポート関数sumTwo（a、b）{
a+bを返します。
}
export const EULER = 2.7182818284
let stuff = {sumTwo、EULER}
エクスポート{デフォルトとしてのもの}

'react'からReactをインポートします
'./myexports'から{EULER}をインポートします
'./myexports'から*をインポートします
// に相当
'./myexports'からのインポート
// {sumTwo、EULER}

ジェネレーター

それらは、反復プロトコルを実装するオブジェクトを返します。 つまり、{value：<some value>、done：<trueまたはfalse>}を返すnext（）メソッドがあります。

function * incRand（max）{//アスタリスクはこれをジェネレーターとして定義します
while（true）{
//降伏後に実行を一時停止し、再開します
// next（<something>）が呼び出されたとき
//そして<something>をxに割り当てます
x = yield Math.floor（Math.random（）* max + 1）;
最大+=x;
}
}

> var rng = incRand（2）//ジェネレータオブジェクトを返します
> rng.next（）// {値：<1と2の間>、完了：false}
> rng.next（3）//上記と同じですが、1から5の間です
> rng.next（）//5+未定義の結果がNaNになるためNaN
> rng.next（20）//誰もNaNを再び期待していませんか？
> rng.throw（new Error（'Unrecoverable generator state。'））
//yieldからスローされます