TypeScriptで配列、オブジェクトを分割代入する方法を学んだのでアウトプットします。
配列の分割代入
const carTypes = ['セダン', 'コンパクト', 'SUV', 'ワンボックス'];
const [carType1, carType2, ...carType3] = carTypes; //この行が配列の分割代入
console.log(carType1); //セダン
console.log(carType2); //コンパクト
console.log(carType3); //'SUV', 'ワンボックス'
console.log(carTypes); //'セダン', 'コンパクト', 'SUV', 'ワンボックス'上記の通り、配列carTypesを分割代入を実行することで carType1, carType2,carType3と３つの定数に格納することができました。元の配列であるcarTypesも削除されていません。つまり、carType1, carType2,carType3は配列carTypesの中身をコピーされたものが格納されていることになります。
const carType1 = carTypes[0]; と記載すれば上記の分割代入と同じことを実現することは可能です。しかし、数が多くなる場合、分割代入使った方がコードを短くすることができます。
オブジェクトの分割代入
const carDetail = {
colors: 'red',
handle: 'right',
capacity: 8,
};
const {colors, handle, capacity} = carDetail; //この行がオブジェクトの分割代入
console.log(colors); // red
console.log(handle); // right
console.log(capacity); // 8
console.log(carDetail); // {colors: 'red', handle: 'right', capacity: 8}オブジェクトの分割代入を使い、それぞれの値を取り出すことができました。上記の通りプロパティ名にはオブジェクトに記載されているプロパティ名を記載しなければなりません。しかし、格納先のプロパティ名を変更したい場合「プロパティ名: 変更したいプロパティ名」と記載すれば変更することができます。
const carDetail = {
colors: 'red',
handle: 'right',
capacity: 8,
};
const {colors, handle: rightHandle, capacity} = carDetail; //プロパティ名の変更
console.log(rightHandle); // right分割代入をうまく使いこなせるようになりたいですね。
