JavaScriptのスプレッド構文について

JavaScriptのスプレッド構文について簡単まとめたので、備忘録もかねて記事を書いてみます。

スプレッド構文の概要

スプレッド構文を使うと、配列式や文字列などの反復可能オブジェクトを、 0 個以上の引数 (関数呼び出しの場合) や要素 (配列リテラルの場合) を期待された場所で展開したり、オブジェクト式を、 0 個以上のキーと値のペア (オブジェクトリテラルの場合) を期待された場所で展開したりすることができます。

これだけだとよくわからないので、実際の例を書いていきます。

配列

...（ピリオド３つ） と書くことで個々の値に展開することができ、それを結合させることができます。
これだけだとconcat()と結果は変わらないですね。

例１

const animals = ["犬", "猫"];
const sports = ["野球", "サッカー"];
const foods = ["パン", "ご飯"];

const result1 = [...animals, ...sports];
console.log(result1); // ["犬", "猫", "野球", "サッカー"]

const result1 = [...animals, ...sports, ...foods];
console.log(result1); // ["犬", "猫", "野球", "サッカー", "パン", "ご飯"]

　　
以下のようにスプレッド構文は任意の位置で配列を展開させることができます。

例２

const animals = ["犬", "猫"];

const result1 = ["saru", ...animals, "tori"];
console.log(result1); // ["saru", "犬", "猫", "tori"]

　　

文字列に対し、スプレッド構文を使用すると文字列が分解されます。
文字列を配列に結合させたい場合は、配列内にそのまま配置すればOKです。　

例3

const animals = ["犬", "猫"];
const koumori = "こうもり";

const result1 = [...animals, ...koumori];
console.log(result1); // ["犬", "猫", "こ", "う", "も", "り"]

const result2 = [...animals, koumori];
console.log(result1); // ["犬", "猫", "こうもり"]

　　

重複を排除したい場合はSetを使います。

例4

const animals = ["犬", "猫", "犬", "猫", "鳥"];
const result1 = [...(new Set(animals))];

console.log(result1);    // ["犬","猫","鳥"]

オブジェクト

スプレッド構文を使うとオブジェクトのマージが簡単にできます。
3つ以上のオブジェクトでも同じようにマージすることができます。

例1

const test1 = { name: "犬"};
const test2 = { color: "black"};

const result1 = { ...test1, ...test2 };
console.log(result1); // { name: "犬", color: "black" }

　　

プロパティー名が同じ場合はあと勝ちです。

例2

const test1 = { name: "犬", color: "black"};
const test2 = { name: "猫", color: "white"};

const result1 = { ...test1, ...test2 };
console.log(result1); // { name: "猫", color: "white" }

　　

最後まで読んでいただきありがとうございますm(__)m