【JS】分割代入構文

JS逆引きレシピ本、028（P51）。

分割代入構文とは、配列の内容を分割して変数に代入し直すこと。
いままでは、for～in文とかでやってたやつである。

ただ代入したいだけなら、for～inよりもシンプル。

let data = [100 , 200 , 300 , 400 , 500];
let [x0 , x1 , x2 , x3 , x4] = data;

colsole.log(x1);  // 200

let data = [100 , 200 , 300 , 400 , 500];
let x0 = data[0];
let x1 = data[1];
let x2 = data[2];
let x3 = data[3];
let x4 = data[4];

colsole.log(x1);  // 200

最初の構文と、あとの構文は、やってることは同じ。
配列の各値をなんという変数に代入するか、一気に指定して代入ができる、ということらしい。

今まで知らなかった書き方だけど、これは便利だし、いろいろ使い所がありそうだ。

また、前半だけ各値を変数に分割して、残りをまとめて配列化することもできる。

let data = [100 , 200 , 300 , 400 , 500 , 600];
let [x0 , x1 , x2 , x3 , ...last] = data;

colsole.log(x0);  // 100
colsole.log(x1);  // 200
colsole.log(x2);  // 300
colsole.log(last);  // [400 , 500 , 600]

「..last」と書くことで、「残りはlastという配列に格納するよ」ということになる。
ここで重要なのは「last」じゃなくて「...」のほう。
最初にこの例文を見た時、「この 『...』は省略して書いてるだけで、実際には『let [x0 , x1 , x2 , x3 , x4 , x5 , last] = data;』って書けってことかな？」と思ってしまったりしたが、そうではなく、本当に「...last」と書く。で、むしろ「last」のほうはただの変数名なので何でもいい。
この「...」を省いて書くと、逆にこれを「x0」などと同じ、単純な変数とみなすので、以下のようになる。

let data = [100 , 200 , 300 , 400 , 500 , 600];
let [x0 , x1 , x2 , x3 , last] = data;

colsole.log(x0);  // 100
colsole.log(x1);  // 200
colsole.log(x2);  // 300
colsole.log(last);  // 400

なるほどなぁ。