【TypeScript】スプレッド演算子 メモ

スプレッド演算子とは？？

...配列で記述され、配列要素の中身が展開されるもの！
（初めて見た時は何かを省略している記号だと思っていたので使い方を知った時は驚きました）

メリット

• 簡単に早く配列の中身を表示できる
• 配列とオブジェクトで使用できる
• 配列の中身を引数として素早く使用できる
• たった３つのドットで使用できる
• 可変長引数とする事が可能

実際に書いてみる

1. 展開

const array = [1, 2, 3];
console.log(...array);//1 2 3

配列arrayが1 2 3のように展開された

2. 結合

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
console.log(...array1, ...array2);//1 2 3 4 5 6

配列array1と配列array2が結合された

3. 新しい配列としてコピー

const array = [1, 2, 3];
const newArray = [...array];
console.log(newArray);//[ 1, 2, 3 ]

newArrayにarrayの配列がコピーされた

このnewArrayとarrayは別物

console.log(newArray === array);//false

newArrayとarrayを比較してみるとfalseが出力される

☆arrayをそのまま代入した場合

const array = [1, 2, 3];
const newArray2 = array;
newArray2.push(100);
console.log(newArray2);//[ 1, 2, 3, 100 ]
console.log(array);//[ 1, 2, 3, 100 ]

newArray2にarrayを代入して、100をプッシュしてみる
そうすると、newArray2、arrayともに[ 1, 2, 3, 100 ]が出力された

4. 要素を追加する

const array = [1, 2, 3];
const newArray3 = [0, ...array];
console.log(newArray3);//[ 0, 1, 2, 3 ]

スプレッド演算子でarrayを展開する前に0を入れて新しい配列を作成した

5. オブジェクトに使用する

const person = {name:'taro', age:'22', weight:'55kg'};
const newPerson = {...person, height:'170cm'};
console.log(newPerson);//{ name: 'taro', age: '22', weight: '55kg', height: '170cm' }

オブジェクトでも同様に展開できる
4で行った要素を追加することも同様に可能
personが{name:'taro', age:'22', weight:'55kg'}というオブジェクトであり、これに{height:'170cm'}を追加している