2
0

More than 3 years have passed since last update.

[JavaScript]オブジェクトや配列の要素/プロパティ値を変数に分解する(分割代入)

Last updated at Posted at 2020-06-08

複数の要素をもつオブジェクトや配列を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の代入において時々現れる、括弧で囲まれた変数名は何なのか

2
0
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0