(式と演算子)
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax
...繰り返し可能なオブジェクト
繰り返し可能なオブジェクト(配列・オブジェクト・文字列など)を任意の箇所で展開するための構文である。関数の引数や、配列やオブジェクトの複製などに使われている。
ただし、スプレッド構文は配列やオブジェクトのシャローコピー(元の要素やプロパティへの参照を共有する)を作成する。そのため、大きな配列やオブジェクトで使用するとパフォーマンスに影響を及ぼす可能性があり、注意が必要である。
配列の連結、展開
スプレッド構文は、ある配列の要素を別の配列に移行するのに使用できる。配列の連結や配列のシャローコピーの作成に便利。また、2次元配列を1次元配列に展開することもできる。
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const concatenatedArr = [...arr1, ...arr2];
console.log(concatenatedArr); // [1, 2, 3, 4, 5, 6]
const input = [0,[1,2,3],4,5,[6]];
const inputB = [input[0],...input[1],input[2],input[3],...input[4]]; // [0,1,2,3,4,5,6]
文字列の展開
スプレッド構文を使用すると、文字列の個々の文字を配列に展開することができる。これは、文字列を文字の配列に変換し、配列メソッドを使って他の配列と組み合わせて操作するのに便利。
const str = "Hello";
const charArray = [...str];
console.log(charArray); // ['H', 'e', 'l', 'l', 'o']
オブジェクトの結合と複製
スプレッド構文を使用し、あるオブジェクトのプロパティを別のオブジェクトに展開することができる。これは、オブジェクトの結合や複製、一部のプロパティをオーバーライドした新しいオブジェクトの作成、そして、オブジェクトから特定のプロパティを抽出するのに便利。
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // { a: 1, b: 3, c: 4 }
const clonedObj = { ...obj1 };
console.log(clonedObj); // { a: 1, b: 2 }
関数引数のスプレッド
スプレッド構文は、関数やコンストラクタに動的に値を渡すための関数引数など、他の用途でも使用することができる。
const numbers = [1, 2, 3];
const sum = (a, b, c) => a + b + c;
console.log(sum(...numbers)); // 6
スプレッド構文とrestパラメータの組み合わせ
スプレッド構文は、配列やオブジェクトの分割代入など、他の最新のJavaScriptの機能と組み合わせて使用することで、強力な関数型プログラミング技術を実現することができる。これにより、簡潔で表現力豊かな構文で、配列の要素やオブジェクトのプロパティを抽出して操作可能である。
const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;
console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]
文字列の文字数を数える(サロゲートペアな文字にも対応する)
スプレッド構文は1文字を2文字分でカウントするサロゲートペアな文字にも対応している。
"パスワードは😄😄😄😄です".length // 16
[..."パスワードは😄😄😄😄です"].length // 12