こんにちは！開発部の上條です🔋
今回の記事ではJavaScriptの「分割代入」についてご紹介いたします。
なるべく分かり易く、記事にまとめたいと思います。それでは、本稿もどうぞよろしくお願いいたします。
目次はこちら
- １. 分割代入とは
- ２. 配列の分割代入
- ３. オブジェクトの分割代入
- ４. レスト構文と分割代入
分割代入とは
分割代入 (Destructuring assignment) 構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の式です。
MDN web docs
配列の分割代入
配列の分割代入は冒頭の分割代入と同じで
左辺に配列リテラルのような変数宣言を書き、右辺に配列を書きます。
See the Pen
yLJqWWv by kamijodev (@kamijodev)
on CodePen.
配列数が足りない場合はundefinedとなります。
See the Pen
分割代入２ by kamijodev (@kamijodev)
on CodePen.
オブジェクトの分割代入
配列の分割代入と同じで
左辺にオブジェクトリテラルのような変数宣言を書き、右辺にオブジェクトを書きます。
See the Pen
分割代入３ by kamijodev (@kamijodev)
on CodePen.
レスト構文と分割代入
レスト構文と組み合わせることによって残りの値を集約することが出来ます。
日本では残余代入と言うようです。
レスト構文に関してはこちら。
JavaScriptの「スプレッド構文」と「レスト構文」とは？
See the Pen
分割代入４ by kamijodev (@kamijodev)
on CodePen.
Japanese 
English