分割代入

JavaScript

分割代入

配列やオブジェクトから変数に値を入れる時の記述方法。

配列

基本的な書き方。[]の中に変数名を入れると、頭から格納されていきます。変数が足りない分は無視されます。

  const arr = ["ohasi", "osusi", "omikosi", "okasi"];
  const [hasi, susi] = arr;
  console.log(hasi, susi);//ohasi osusi

スプレッド構文を使うと、残りを配列として格納できます。

  const arr = ["ohasi", "osusi", "omikosi", "okasi"];
  const [hasi,...si] = arr;
  console.log(hasi,si); //ohasi (3) ['osusi', 'omikosi', 'okasi']

スプレッド構文はメソッドの引数としても使えたり、用途が幅広いですね。

オブジェクト

オブジェクトの場合は、keyと変数名を合わせる必要があります。
また、こちらもスプレッド構文が使えます。

const App = () => {
  const obj = {
    ohasi: 30,
    osusi: 40,
    omikosi: 88,
    okasi: 4,
  };

  const { ohasi, osusi, ...si } = obj;
  console.log(ohasi, osusi, si);//30 40 {omikosi: 88, okasi: 4}

keyと違う変数名で受け取りたいときは、変換をかけるとできます。

  const obj = {
    ohasi: 30,
    osusi: 40,
    omikosi: 88,
    okasi: 4,
  };
  
  const { ohasi:hasi} = obj;
  console.log(hasi);//30

分割代入のおまとめでした。