スプレッド演算子と分割代入

スプレッド演算子と分割代入:

この記事はJavaScript Advent Calendar 2018 14日目の記事です。

何かと役立ちそうなスプレッド演算子と分割代入についてです。

ブラウザで使用する際はBabelにかけた方が良いと思います。

スプレッド演算子

スプレッド演算子は配列やオブジェクトなどをその場に展開します。

let array = [1, 2, 3]; 
func(...array); // => func(1, 2, 3); 

let array1 = [1, 2, 3]; 
let array2 = [...array1, 4, 5]; // => [1, 2, 3, 4, 5] 

関数の引数にスプレッド演算子を使えば、配列のメソッドが使用できます。

function increment (...nums) { 
  return nums.map(v => v + 1); 
} 
 
increment(1, 2, 3); // => [2, 3, 4] 

関数の引数の情報をもったargumentsオブジェクトがありますが、こちらはArray-likeオブジェクトのため配列のメソッドは使用できません。

分割代入

配列やオブジェクトの値を別個の変数に値を代入できます。

let [a, b, c] = [1, 2, 3]; 
console.log(a); // => 1 
console.log(b); // => 2 
console.log(c); // => 3 
 
let {x: foo, y: bar} = {x: 1, y: 2}; 
console.log(foo); // => 1 
console.log(bar); // => 2 

以下のようにすれば、変数の値を簡単に入れ替えられます。

[a, b] = [b, a]; 
[a, b, c] = [c, b, a]; 

組み合わせて使う

スプレッド演算子と分割代入を組み合わせて使うと便利です。

以下のようにすれば、配列の残りの部分を変数に格納できます。

let [a, b, ...c] = [1, 2, 3, 4, 5]; 
console.log(a); // => 1 
console.log(b); // => 2 
console.log(c); // => [3, 4, 5] 

なお、配列の最初の方を取り出すことはできないようです。

let [...a, b, c] = [1, 2, 3, 4, 5]; // => エラー 

文字列を.split('')のように分割できます。

let [...str] = 'hello'; 
console.log(str); // => ['h', 'e', 'l', 'l', 'o'] 

function upperEven (str) { 
    return [...str].map((v, i) => (i + 1) % 2 === 0 ? v.toUpperCase() : v).join(''); 
} 
upperEven('hello'); // => 'hElLo' 

参考

スプレッド構文 | MDN

【JavaScript】スプレッド演算子の便利な使い方まとめ - Qiita

JSのスプレッド演算子を理解する - Qiita

分割代入 | MDN

---

明日は@OldBigBuddhaさんです。