ES2015のノート。

new_gist_file.md

ES2015

• http://www.ecma-international.org/ecma-262/6.0/index.html

新たなシンタックス

• 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'
//

参考

• http://qiita.com/tuno-tky/items/74ca595a9232bcbcd727