Help us understand the problem. What is going on with this article?

ES2015~2017チートシート

More than 1 year has passed since last update.

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

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で実装される機能まとめ

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした