JavaScriptの三点リーダー...について

ES6以降のJavaScriptで見かける三点リーダー...について。
三点リーダーを付けることで簡単にオブジェクトを配列のように扱うことができます。

スプレッド構文

引数などで利用すれば、オブジェクトや配列を展開できるスプレッド構文になります。

const arrayA = [0, 1, 2];
const arrayB = [3, 4, 5];
arrayA.push(...arrayB);
console.log(arrayA);
// [0, 1, 2, 3, 4, 5]

連結もできます。

let arrayA = [0, 1, 2];
const arrayB = [3, 4, 5];
const arrayC = [...arrayA, ...arrayB];
console.log(arrayC);
// [0, 1, 2, 3, 4, 5]

// arrayCは変数宣言したタイミングで固定
arrayA = [3, 3, 3];
console.log(arrayC);
// [0, 1, 2, 3, 4, 5]

残余引数

関数の引数で使うと、不定数が扱える残余引数構文になります。

// 引数の合計値を出力する関数
const total = (...nums) => {
  const result = nums.reduce((acc, value) => {
    return acc + value;
  }, 0);
  console.log(result);
}
total(1, 2, 3, 4, 5);
// 15

余りの引数をまとめることもできます。

const add = (a, b, ...c) => {
  console.log(a);
  console.log(b);
  console.log(b[0]);
  console.log(c);
  console.log(c[0]);
  console.log(a, b, ...c);
}
add(2, 4, 8, 'hoge', 'fuga');
// 2
// 4
// undefined
// [8, 'hoge', 'fuga']
// 8
// 2 4 8 'hoge' 'fuga'

活用例

NodeListを扱う

NodeListをループしたいときに利用します。
querySelectorAllなどで取得すると返り値がNodeListになるため、そのままだとfilterなどが使えません。
そこでスプレッド構文で展開して処理します。

• 例：.targetのstyle属性にdisplay:noneがある場合display:blockする

const targets = document.querySelectorAll('.target');
[...targets]
  .filter(value => value.style.display === 'none')
  .map(value => value.style.display = 'block')
  ;

これまではArray.from()で新しい配列インスタンスを生成して同じような操作を行っていました。
スプレッド構文だとそのまま扱えますし、見た目も直感的です。

文字列を扱う

文字列を一文字ずつ操作したいときに展開して処理します。

• 例：一文字ずつんを付与する

const target = 'あぱま';
const result = [...target].reduce((acc, value) => {
  return acc + value + 'ん';
}, '');
console.log(result);
// あんぱんまん

文字列の場合、三点リーダーだけで一文字ずつ扱えます。
これまではsplit('')を使って分割していました。
ただ、こちらは他の言語でも同じようなメソッドがあるので、splitを使う方が親切な場合もあります。