あらすじ
ES6 の記法を全て覚えてから ES6 を書くよりも、書きながら勉強したほうが効率が良かったりします。 なんですが写経している時に分からない記法が出てきた場合検索しづらくて困ると思います。
というわけで私がどうやって Google に質問すればいいのか分からなかった記法を2つ紹介します。
Object initializer: オブジェクト初期化子
以下のような ES5 の記法が
const a = 1 const b = 2 const c = 3 const object = {a: a, b: b, c: c}
ES6 では以下のように省略できます。
const a = 1 const b = 2 const c = 3 const object = {a, b, c}
また、以下のような ES5 の記法が
function x(obj) { const a = obj.a const b = obj.b console.log(a, b) } const a = 1 const b = 2 x({a: a, b: b})
ES6 では以下のように省略できます。
function x({a, b}) { console.log(a, b) } const a = 1 const b = 2 x({a, b})
この書き方は最初慣れないと気持ち悪いですが使っているうちにだんだん気持ちよくなります。
Spread Operator: スプレッド演算子
...array
とか ...object
を初めて見た人は多分意味が分からなくて困ると思います。
array を spread する
ES5 では以下のように記述していたものが
function f(array) { console.log([array[0], array[1], array[2], 4, 5]) } f([1, 2, 3])
ES6 では以下のように省略できます。
function f(array) { console.log([...array, 4, 5]) } f([1, 2, 3])
object を spread する
ES5 では以下のように記述していたものが
function f(obj) { const a = obj.a const b = obj.b const c = obj.c console.log({a: a, b: b, c: c, d: 4, e: 5}) } const a = 1 const b = 2 const c = 3 f({a: a, b: b, c: c})
ES6 では以下のように省略できます。
function f(obj) { console.log({...obj, d: 4, e: 5}) } const a = 1 const b = 2 const c = 3 f({a, b, c})