ES2015～2017チートシート

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

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

変数宣言 / let, const

• let: スコープ
• const: 定数

Class

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

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

Classの継承 / extends

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かららしいけど一応…

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固定される

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

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

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

変数操作

分割代入 / [] = []

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]

配列

配列展開 / ...

let arr = [1, 2, 3];
console.log(...arr);
// 1 2 3

配列操作

// フィルター
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の取り出し

let obj = {
    name: 'ペコリ虫',
    age: 35
}

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

オブジェクト情報取得

let obj = {
    'name': 'ペコリ虫',
    'age': 35
}
console.log(Object.getOwnPropertyDescriptors(obj)); //ズラっとobjの情報が出て来る

Map

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

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

#Set
一意なデータ

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

// 追加
set.add(4);

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

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

引数

可変長引数

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

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

デフォルト引数

harapeko(name = 'ペコリ虫') {
    ごにょごにょ
}

文字列操作

テンプレート文字列 / `str${var}`

let name = 'ペコリ虫';
console.log(`私の名前は${name}`);

文字埋め

'abc'.padStart(10); // "       abc"
'abc'.padEnd(10);   // "abc       "

判定

配列検索

const arr = ['a', 'b', 'c'];
arr.includes('a'); //true

演算

n乗

console.log(2 ** 3); // 8

非同期処理

非同期処理を同期処理に

ややこしいので個別にググったほうが良い。

• async
• await
• Promise

(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)についてのまとめ
ES2015新機能: JavaScriptのclassとmethod
ES2016 / ES2017で実装される機能まとめ