![株式会社デジナーレ[designare]](https://designare.jp/wp-content/themes/designare_new/img/logo.svg){kind=logo}
Writer： tokuyasu 更新日：2023/09/04
こんにちは、デジナーレ福岡オフィスの徳安です。
この記事では、分割代入について説明します。
分割代入とは
分割代入とは、配列やオブジェクトの要素を直接、
変数として取り出して使用する記法。
配列、またはオブジェクトから
プロパティを取り出して、別個の変数に代入すること
配列の分割代入
配列の分割代入では、右オペランドの配列の要素(value)が
左オペランド(key)の[変数A、変数B]に代入される。
【構文】
【変数ｘ、ｙ、ｚを宣言し、配列の要素を代入】
↑ 1 2 3 が出力される。
通常の変数宣言では、個別に宣言し、
一つづつ変数に代入する必要があったが、
配列で変数宣言することで、記述が省略できる。
【配列の要素に不要なものがある時】
↑ 1 3 が出力される。
不要な要素がある場合は
空白にすることで、スキップが可能。
【宣言済みの変数】
↑ 1 が出力される。
変数が宣言済みであっても代入が可能。
【デフォルト値の設定】
↑ 4が出力される。
配列の中にデフォルト値を設定することも可能。
【スプレッド演算子との併用】
↑ 1[ 2, 3 ]が出力される。
オブジェクトの分割代入
配列の分割代入では、
配列の順番通りに変数の値に対して代入されるが、
オブジェクトの分割代入では、
プロパティ名と変数名を一致させる必要がある。
【構文】
【例1】
オブジェクトの分割代入は、
プロパティ名の変数を宣言するので、
プロパティの順番は関係しない。
【例2】
プロパティと変数を同時に変更も可能。
【例3】
スプレッド演算子との併用も可能。
【例4】
多階層のオブジェクトにも展開できる。
【例5】
代入する変数を先に宣言しておくことで、
動的にプロパティ名を指定できる。
関数の引数に対する分割代入
【構文】
上記では、3つ目の要素のみ関数内で使用。
その後関数の実引数として配列を渡したので
コンソールにgrapeが出力される。
空白と , (カンマ)を使用し、不要な要素は引数として設定せず
3つ目の"grape"のみ変数fruit3に格納している。
【例】
上記では、orangeのみ引数として抽出し、
関数の実引数として、オブジェクトを渡したので、
コンソールにオレンジが出力される。
今回は、分割代入についての内容でした。
ここまで、読み進めていただきありがとうございます。
