Typescriptのスプレッド演算子について学んだのでアウトプットします。
「…(スプレッド演算子)」とは
「…(スプレッド演算子)」とは配列やオブジェクトを取り出すときに便利な記述方法です。
スプレッド演算子を使えば配列やオブジェクトを一括で展開することができます。
配列の場合
実際にどのように使うのか以下のサンプルをご覧ください。colorsとcolors2をcolors3にまとめて展開したい場合 「…colors, …colors2」と記載することでまとめて展開することができます。
const colors = ["red", "blue", "green"];
const colors2 = ["while", "black"];
//上記のように二つ配列をひとつにまとめると以下のように書けます。これがスプレッド演算子です。
const colors3 = [...colors, ...colors2];
console.log(colors3); >(5) ['red', 'blue', 'green', 'while', 'black']
//colorsをcolors2に代入したい場合以下のように記載すれば一括で展開することができます。
colors2.push(...colors);
console.log(colors2); >(5) ['while', 'black', 'red', 'blue', 'green']オブジェクトの場合
オブジェクトも同様でに記載することができます。
const item = {
name: "hoge",
id: 123,
};
const item2 = {
price: 123.4,
description: "Large size T-shirt",
};
//上記の二つオブジェクトをひとつにまとめると以下のように記述できます。
const item3 = { ...item, ...item2 };
console.log(item3); >{name: 'hoge', id: 123, price: 123.4, description: 'Large size T-shirt'}まとめ
スプレッド演算子を初めてみた時は目が点になっていました。まず、どのように調べればいいんだと悩んだ記憶があります(汗)。
スプレッド演算子を使えば配列やオブジェクトを一括で展開することができるため、うまく使えばコードを短くすることができます。
