ES2015～2017チートシート

なんとなく機能は把握したけどいちいち忘れるのでパッと思い出せるようにまとめました。
ある程度わかってる人が思い出す用。

*2018/01/25 でぃあ様よりご指摘いただきまして、Map,Setなど抜けていたものを追加しました*

# 変数宣言 / let, const
* let: スコープ
* const: 定数

# Class
```javascript
class Harapeko {
    constructor(name) {
        this.name = 'ペコリ虫';
    }
    myName() {
        return '私の名前は' + this.name;
    }
}

let peko = new Harapeko();
console.log(peko.myName());
```

## Classの継承 / extends
```javascript
class Harapeko {
    constructor(name) {
        this.name = 'ペコリ虫';
    }
    myName() {
        return '私の名前は' + this.name;
    }
}

class Kobara extends Harapeko {
  myName() {
    return super.myName() + 'の子供だよ'; // superで親クラスにアクセス
  }
}

let kobara = new Kobara();
console.log(kobara.myname());
```

## get & set
ES5かららしいけど一応…

```javascript
class Harapeko {
    constructor(name) {
        this.name = 'ペコリ虫';
    }

    get name() {
        return this.name;
    }
    set name(_name) {
        this.name = _name;
    }
}

let peko = new Harapeko();
peko.name = 'ペコリ虫2号';
console.log(peko.name);
```

# 関数
## Arrow関数 / () =>
this固定される

```javascript
let test = () => {
    let str = 'hara' + 'peko';
    return str;
}

let test2 = () => console.log('harapekoooooo!!!!');

// 引数有りの場合カッコ省略可能
// {}とreturnを省略する場合は()で
let test3 = harapeko => ( 'harapekorincho' )
```

# 変数操作

## 分割代入 / [] = []
```javascript
let [name, age] = ['ペコリ虫', 35];
console.log(age); // 35

let {name, age} = {age: 35, name: 'ペコリ虫'};
console.log(age); // 35

let [a, b, ...rest] = [1, 2, 3, 4, 5]
console.log(a) // 1
console.log(b) // 2
console.log(rest) // [3, 4, 5]
```

# 配列
## 配列展開 / ...
```javascript
let arr = [1, 2, 3];
console.log(...arr);
// 1 2 3
```

## 配列操作
```javascript
// フィルター
let filter = [1, 10, 5, 15, 8].filter(function(element, index, array) {
    return (element >= 10);
});
console.log(...filter); // 10 15

// 結果からなる新しい配列を生成
let map = [1, 2, 3, 4, 5].map(function(element, index, array) {
    return element * element;
});
console.log(...map); // 1 4 9 16 25

// 値を一つずつ取り出して一つ前(もしくはそれまでの累計)の値とごにょごにょ
let reducer = [1, 2, 2].reduce(function(previousValue, currentValue, index, array) {
    return previousValue / currentValue;
});
console.log(reducer); // 0.25

// reducerの右からバージョン
let reduce_right = [1, 2, 2].reduceRight(function(previousValue, currentValue, index, array) {
    return previousValue / currentValue;
});
console.log(reduce_right); // 1
```


# オブジェクト

## key, valueの取り出し
```javascript
let obj = {
    name: 'ペコリ虫',
    age: 35
}

Object.keys(obj); // ["name", "age"]
Object.values(obj); // ["ペコリ虫", 35]
Object.entries(obj); // [["name", "ペコリ虫"], ["age", 35]]
```

## オブジェクト情報取得
```javascript
let obj = {
    'name': 'ペコリ虫',
    'age': 35
}
console.log(Object.getOwnPropertyDescriptors(obj)); //ズラっとobjの情報が出て来る
```

# Map
```javascript
let map = new Map([
  ['name', 'ペコリ虫'],
  ['age', 35]
]);

Array.from(map); // ['name', 'age']
```

#Set
一意なデータ

```javascript
var set = new Set([1, 2, 3]);

// 追加
set.add(4);

if (set.has(1)) { // 存在確認
    set.delete(1); // 削除
}

// データ数
set.size; // => 4
```


# 引数

## 可変長引数
配列展開しておけば可変の引数指定できるよ

```javascript
harapeko(x, ...y) {
    ごにょごにょ
}
harapeko(1, 2, 3);
```

## デフォルト引数
```javascript
harapeko(name = 'ペコリ虫') {
    ごにょごにょ
}
```

# 文字列操作
## テンプレート文字列 / \`str${var}`
```javascript
let name = 'ペコリ虫';
console.log(`私の名前は${name}`);
```

## 文字埋め
```javascript
'abc'.padStart(10); // "       abc"
'abc'.padEnd(10);   // "abc       "
```


# 判定
## 配列検索
```javascript
const arr = ['a', 'b', 'c'];
arr.includes('a'); //true
```


# 演算
## n乗
```javascript
console.log(2 ** 3); // 8
```

# 非同期処理
## 非同期処理を同期処理に
ややこしいので個別にググったほうが良い。

* async
* await
* Promise

```javascript
(async () => { // async内でawaitを使う
    console.log('start');
    await new Promise((resolve) => { // awaitをつけたPromiseの処理が終わらないと次の処理に進まない
        setTimeout(resolve, 1000);
    });
    console.log('end');
})().catch((error) => {
    console.log(error);
});
```



# 超参考
[ES2015 (ES6)についてのまとめ](https://qiita.com/tuno-tky/items/74ca595a9232bcbcd727)
[ES2015新機能: JavaScriptのclassとmethod](https://qiita.com/niisan-tokyo/items/83582bc0646239cf6cb8)
[ES2016 / ES2017で実装される機能まとめ](https://qiita.com/Yuta_Yamamoto/items/573ecace8d8523c102b0)