[JavaScript] スプレッド構文の使い方

JavaScriptのスプレッド構文は、下記の目的で利用できる。

配列の連結
イミュータブルな配列の実現
残余引数(rest parameter)による配列の分離

配列に対するスプレッド構文

% node
Welcome to Node.js v16.6.1.

> a = [1, 2]
[ 1, 2 ]

// 代入した値を確認できる
> a
[ 1, 2 ]

// 配列に要素を付け足せる(aの値自体は変わらない)
> [...a]
[ 1, 2 ]

> [...a, 3]
[ 1, 2, 3 ]


// 配列をネストした場合
> [a]
[ [ 1, 2 ] ]

> [...a, [3]]
[ 1, 2, [ 3 ] ]


// スプレッド構文を利用して配列のコピーを作成できる
> [...a].reverse();
[ 2, 1 ]

> a
[ 1, 2 ]

// 直接aにreverse()を実行すると、aの値が書き換わってしまう
> a.reverse();
[ 2, 1 ]

> a
[ 2, 1 ]

配列の連結

> x = [100, 101]
[ 100, 101 ]

> y = [200, 201]
[ 200, 201 ]

> [...x, ...y]
[ 100, 101, 200, 201 ]

残余引数の利用

配列の右辺に、通常の変数とスプレッド構文の変数を組み合わせて記載することで、配列の残りの値を取得できる。

> b = [1, 2, 3, 4, 5]
[ 1, 2, 3, 4, 5 ]

// 先頭の要素と残りの要素を分けられる
> [car, ...cdr] = b
[ 1, 2, 3, 4, 5 ]

> car
1

> cdr
[ 2, 3, 4, 5 ]

オブジェクトに対するスプレッド構文

スプレッド構文はオブジェクトに対しても利用できる。

> item = {code:'Item001', name:'apple'}
{ code: 'Item001', name: 'apple' }

> item
{ code: 'Item001', name: 'apple' }

// オブジェクトに要素を追加できる
> { ...item, qty:20 }
{ code: 'Item001', name: 'apple', qty: 20 }

// オブジェクトの特定項目だけを変更できる
> { ...item, name:'orange' }
{ code: 'Item001', name: 'orange' }

Amazonでおトクに買い物する方法