複数の要素をもつオブジェクトや配列を1つずつ変数に代入する
こういうコードが読めなかった。
const[num1] = client.exe();
調べて見ると、分割代入って構文らしい。ES6から取り入れられた分割代入。
従来より配列/オブジェクトを分解して、要素やプロパティ値を取り出しやすくなったようだ。
ってことで、調べてみた。
##配列の要素を変数に分割代入する構文
###[配列]分割代入
//ES6以前の分割代入
var data = [20,49,59,37,62];
var x0 = data[0];
var x0 = data[1];
var x0 = data[2];
var x0 = data[3];
var x0 = data[4];
//ES6の分割代入
let numbers = [40, 50, 20, 70,];
let[a1, a2, a3, a7] = numbers;
console.log(a3); //結果:20
console.log(a4); //結果:ReferenceError a4 is not defiend.
console.log(a7); //結果:70
配列numbersの40,50,20,70がそれぞれa1,a2,a3,a7に分割代入された。
変数の並び順は配列のプロパティの並び順と同じになるため、
未定義であるa4はリファレンスエラーとなるし、a7には配列numbersの4番目のプロパティである70が代入されていることがわかる。
####!note
・配列とオブジェクトの大きなちがいって、順番が割り振られているかどうかだよね!
・ES6以前のコードも2020年現在まだ見かけるらしいから、読めるようになった方がいいよね!
###[配列]要素をまとめて配列として切り出す。
let numbers =[40, 50, 60, 18, 95, 34];
let[a1, a2, a3, ...other] = numbers;
console.log(other); //結果:[18, 95,34]
演算子...
を使用することで、分割されなかったプロパティ値をまとめて配列
として切り出せる。
###変数の入れ替え
let a = 10;
let b = 60;
[a,b] = [b,a];
console.log(a,b); //結果:60,10
###要素の切り捨て
let num = [75,34,16,345,923,590,65,21,98];
let[num1,num2,num3, , , , ...rest] = num;
//345,923,590は切り捨て
console.log(num3); //結果:16
console.log(rest); // 結果[65,21,98]
##あのコードはいったい何だったのか
const[num1] = client.exe();
これまでの書いてきたことを踏まえると、このコードがよめる。
右辺は何かしらの配列を生み出す処理になっていて、
左辺でその1番目の値だけをnum1に代入した。
それだけのことだ。
ついでなので、オブジェクトの分割についても調べた。
##オブジェクトのプロパティ値を変数に分解する構文
###[オブジェクト]分割代入
let banana = {color:'黄色', price:100, from:'インドネシア'};
let{from, color, memo='なし'} = banana
console.log(from); //結果:インドネシア
console.log(memo); //結果:なし
オブジェクトの場合は名前でプロパティを個々の変数に分解する。
なので、変数の並び順はプロパティの定義順と違っていてもいい。
また、分解しないプロパティ(上記ではprice)があってもいい。
さらに、目的のプロパティがない場合に「変数名 = デフォルト値」としてデフォルト値を指定しておくこともできる(上記、memo:なし)
###入れ子となったオブジェクトを分解する
let car = {name:'プリウス', price:1,000,000,
other:{color:'silver', tire:'studless'}};
let{name, other, other:{ tire }} = car;
console.log(name); //結果:プリウス
console.log(other); //結果:{color:'silver', tire:'studless'}
console.log(tire); //結果:studless
otherとして定義するとオブジェクトotherの内容が格納される。
other:{tire}とすると、オブジェクトotherのプロパティtireの値であるstudlessが格納される。
###変数の別名を指定する。
//別名を指定する
let seminor = {title:'アフターコロナ', data:'2020.6.10', price:5000};
let { title:name, data:day} = seminor
console.log(name) //結果:アフターコロナ
console.log(day) //結果:2020.6.10
###宣言のない代入
//宣言のない代入
let journey = {data:2020/3/3, price:'priceless'};
let location, price;
({location='千葉', price} = journey);
console.log(location); //結果:千葉
console.log(price) //結果:undefined
分割代入するときに前後を()で囲わないといけない。
{}のみだとブロックだとみなされ、文だとみなされないため。
###参照
JavaScript本格入門~モダンスタイルによる基礎から応用まで
分割代入 -JavaScript|MDN
《JavaScript》ES6の分割代入のはじめかた。
JavaScriptの代入において時々現れる、括弧で囲まれた変数名は何なのか