Help us understand the problem. What is going on with this article?

《JavaScript》ES6の分割代入のはじめかた。

More than 1 year has passed since last update.

分割代入は、配列とオブジェクトを分解して、要素とプロパティ値をひとつひとつの変数に分解するための構文です。

元々の仕様では個々の要素にアクセスし変数に格納する必要がありましたが、ES6の分割代入では記述を簡潔にまとめることができます。

配列の分割代入

代入先の変数を[]で配列のように囲って列挙して記述します。

// 分割代入なし
// - - - - - - - -

var list = [10,20,30,40,50];

var item0 = list[0];
var item1 = list[1];
var item2 = list[2];
var item3 = list[3];
var item4 = list[4];

// 分割代入
// - - - - - - - -

let list = [10,20,30,40,50];
let [item0,item1,item2,item3,item4] = list;

配列の残りをまとめる

...演算子を使うと、個々の変数に割り当てられなかった残りの要素をまとめて配列として切り出すことが可能です。

let list = [10,20,30,40,50];
let [item0,item1,...other] = list;

alert(other); // [30,40,50]

変数の値を入れ替える

分割代入を利用すると、変数の値を入れ替えることができます。

let x = 500;
let y = 1000;

[x,y] = [y,x];

オブジェクトの分割代入

配列で行った分割代入のように、オブジェクトのプロパティを変数に分解することもできます。

オブジェクトの場合は{}で囲った変数名で個々の変数に分解します。

変数の並び順はプロパティの定義順と違っていても、分解しないプロパティがあってもokで、対応するプロパティがない場合は無視されます。
無視された場合のデフォルト値を左辺で指定することができます。

let nami = {
  name: 'Nami',
  age: 20,
  weapon: 'magic tact'
}

let {age, name, dream = 'making world map'} = nami;

dreamにはプロパティが存在しなかったので、デフォルト値がセットされています。

入れ子のオブジェクト

入れ子になったオブジェクトは、オブジェクトとして変数に格納することも、obj: {key}という形で値を抽出することも可能です。

let nami = {
  name: 'Nami',
  age: 20,
  hair: {
    length: 'long',
    color: 'orange'
  }
}

let {hair, hair:{color}} = nami;

console.log(color); // orange

プロパティとは異なる変数へ代入

key: newKeyと記述すると元のプロパティと異なる名前の変数に値を割り当てることが可能です。

let nami = {
  name: 'Nami',
  age: 20,
  weapon: 'magic tact'
}

let {age: namiAge, name: namiName} = nami;

console.log(namiName); // Nami

おわります。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした