「...」という文字を用いた文法がES6から登場しています。レスト演算子とスプレット演算子がありますが下記のように覚えると良いと思います。
- レスト演算子 → 配列やオブジェクトを作ってくれる。
- スプレット演算子 → 配列やオブジェクトを展開してくれる。
レスト演算子
下記のように関数の引数に...を使用する事で配列として引数を渡す事が可能になります。ES6以前であればargmentオブジェクト等を色々こねくりまわして実装するしかありませんでした。これを「レスト演算子」と呼びます。
|
1 2 3 4 5 |
function kansu(...array) { console.log(array); } kansu(1, "あ"); |
下記のように記述すればレスト演算子の前にも引数を設定する事が可能です。
|
1 2 3 4 5 |
function kansu(num,...array) { console.log(array); } kansu(1, "あ"); |
配列への分割代入
配列の宣言に使用すれば配列への分割代入へも利用する事が可能です。
|
1 2 3 4 |
let [a, b, ...c] = [1, 2, 3, 4] a; //1 b; //2 c; //[3,4] |
注意点
レスト演算子の後ろに引数を使う事ができなくなる点です。下記のように記述するとエラーになります。
|
1 2 3 4 5 |
function kansu(...array, num) { console.log(array); } kansu(1, "あ"); |
スプレット演算子
配列の直前に付加して配列をより柔軟に扱う事ができる演算子になります。下記のように配列を簡単に再構築する事ができます。（通常であればconcat関数等を使ってこねくり回さないといけなかったりすると思います。）
|
1 2 3 |
let array = ["あ", "い", "う"] str = ["前", ...array, "後"] console.log(str) //[ '前', 'あ', 'い', 'う', '後' ] |
オブジェクトの場合
|
1 2 3 4 5 6 |
const person = { name: "太郎", age: 24, }; const person2 = { ...person, height: "100cm" }; // 既存オブジェクトを利用して新しいプロパティを追加することも可能 |
なお、同じプロパティが重複していれてしまった場合はエラーにならず後に追加したほうが優先されます。また、これはシャローコピーになります。
配列の要素に指定すれば、文字列を配列に変換することも可能
|
1 2 3 |
let str = "Hello World!"; const strArray = [...str]; console.log(strArray); //[ 'H', 'e', 'l', 'l', 'o', ' ', 'W', 'o', 'r', 'l', 'd', '!' ] |
配列を展開することも可能
関数の呼び出し
|
1 2 3 4 5 6 |
function kansu(a, b) { return a + b; } const array = [1, 2]; console.log(kansu(...array)); //3がかえる。 |
配列にpushする
|
1 2 3 4 |
const array1 = [1, 2, 3]; const array2 = [4, 5, 6]; array1.push(...array2); console.log(array1); //[ 1, 2, 3, 4, 5, 6 ]、普通にpushをすると[1,2,3,[4,5,6]]になってしまう。 |
この記事へのコメントはありません。