RyoSugimoto
7/12/2016 - 2:49 AM

ES2015のノート。

ES2015のノート。

ES2015

新たなシンタックス

  • let/const
  • クラス構文
  • アロー関数 - Arrow Functions
  • 分割代入 - Destructing Assignment
  • 配列展開 - Array Spread
  • 関数の可変長引数 - Rest Parameters
  • 関数のデフォルト引数 - Default Parameters
  • テンプレート文字列 - Template Strings
  • importとexportによるモジュール構文 - Module

let/const

  • const: 定数の宣言
  • let: 変数の宣言
  • 「const」と「let」は「{}」によるブロックスコープが有効

クラス構文

class Human {
    constructor (name) {
        // コンストラクタ
        this.name = name;
    }
    hello () {
        // プロトタイプメソッド
        console.log('My name is' + this.name);
    }
    static num_of_hands () {
        // 静的メソッド(インスタンスの作成不要)
        console.log(2);
    }
}

obj = new Human('Hanako');
obj.hello(); // => 'My name is Hanako'
Human.num_hands(); // => 2

継承

class Animal {
    constructor (name) {
        this.name = name;
    }
    speak () {
        console.log(this.name + ' makes a noise');
    }
}

class Dog extends Animal {
    speak () {
        console.log(this.name + ' barks');
    }
}
  • super(): 親クラスのコンストラクターを呼び出す。
  • super.メソッド名(): 親のメソッドを呼び出す。

アロー関数

  • 常に匿名関数
  • 引数が1つの場合は、「()」が省略可能
  • bodyが単一式の場合は、「{}」や「return」を省略可能
// 従来の匿名関数
var plus = function (x, y) {
 return x + y;
};

// アロー関数
let plus = (x, y) => {
    return x + y;
};

// 省略
let plus = (x, y) => x + y;
  • this: 関数が定義されたスコープのthisを引き継ぐ

分割代入

let [name, age] = ['Hanako', 20];

配列展開

var array = [1, 2, 3];
function f (x, y, z) {
    f(...array);
    // 「f(1, 2, 3)」と同義
}

[...array, 4, ,5, 6];
// 「[1, 2, 3, 4, 5, 6]」となる

var x, var y, var z;
var variables = [x, y, z];
[a, b, ...variables] = [1, 2, 3, 4, 5];
// a = 1, b = 2, x = 3, y = 4, z = 5

可変長引数

function f (x, ...ys) {
    console.log(x, ys);
}

f(2, 3, 5);
// => 2 [3, 5]

デフォルト引数

function multiply (a, b = 1) {
    return a * b;
}

multiply(5); // => 5

テンプレート文字列

let name = 'Hanako';

let hello = `My name Is
${name}`;

console.log(hello);
// => 'My name is Hanako'
//

参考