JSスプレッド演算子:どのように動作し,なぜ役に立つのか

スプレッド演算子は、JavaScriptのES 6/ES 2015バージョンで導入された構文の超有用な部分です.
主要機能
スプレッド演算子は、iterable(配列式または文字列)を展開できます.それでは何を意味しますか?
基本的に、普及する3つの場所があります.

関数呼び出し(関数の実行)

配列リテラル(新しい配列を作る)

objectリテラル(新しいオブジェクトを作る)

関数呼び出し
配列を指定します

const emojis = ["sad face", "happy face", "heart", "sun"]

私がコンソールならば.log、文字列の配列を返します.

console.log(emojis)
// => ["sad face", "happy face", "heart", "sun"]

私がちょうど配列の内部の内容を望むならば、どうですか?これはスプレッド演算子が入った場所です.

console.log(...tvShows)
// => sad face happy face heart sun

スプレッド演算子は、配列からこれらの値を抽出する能力を与えます.
概要
関数呼び出しでiterableを別々の引数に広げることができます.

配列リテラル
すばやくコピー、アドオン、および既存の配列に基づいて配列を作成します.
次のように言いましょう.

const dogs = ["Bud", "Champion"]
const cats = ["Stella", "Dolly"]

どのような私はこれらの2つの配列に参加したいですか?こうすることができました.

const pets = [dogs, cats]
// => [Array(2), Array(3)]

返り値は入れ子になった配列になります.
私はちょうど1つの配列を取得したい場合はどうですか?

const pets = [...dogs, ...cats]
// => ["Bud", "Champion", "Stella", "Dolly"] // YAY!

注:順序は問題です.猫の前に犬を入れていたので、リストで最初に犬を手に入れました.
その他の例

[...dogs,"Buddy","cats", "Chester"]
// =>["Bud", "Champion", "Buddy", "Stella", "Dolly", "Chester"]

配列をコピーする(これはオブジェクトに対しても動作します).
次のコピーを作りたいと思います.

const colors = ["green","blue", "yellow"]

JavaScriptでは、既存の配列に等しい変数を設定すると、それらはリンクされ、メモリ上で同じことを指します.

const colorCopy = colors
colorCopy.push("white")

colorCopy
// => ["green","blue", "yellow", "white"]

colors // original array also got updated :(
// => ["green","blue", "yellow", "white"]

これは我々のコピーを更新します、しかし、それも我々のオリジナルを更新します.それは我々が欲しいものではない!
スプレッド演算子を使用する1つの良い理由は、非破壊です.ここでは、オリジナルの配列を操作せずにオリジナルのコピーを作成する方法を示します.

const colorCopy = [...colors]
colorCopy.push("white")

colorCopy
// => ["green","blue", "yellow", "white"]

colors // original array
// => ["green","blue", "yellow"]

注意:スプレッドは配列をコピーするときに1レベル深くなります.
結論
スプレッド演算子を使用するので、有用なことができます!私は、これが役に立つ故障であることを望みます.

資源

MDN Docs

写真でDaria Shevtsova pexelsから