1
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

JavaScript ES2015の分割代入

Last updated at Posted at 2017-04-06

##分割代入(配列)
分割代入(Destructuring assignment)とは、配列/オブジェクトを分解し、
配下の要素/プロパティ値を個々の変数に分解するための構文のこと。

従来では個々の要素にアクセスしなければならない。

script.js
var data = [56,40,26,82,19,17,73,99];
var x0 = data[0];
var x1 = data[1];
var x2 = data[2];
//要素の数だけ列挙する

これらを分割代入によって下記のようにまとめることができる。

script.js
let data = [56,40,26,82,19,17,73,99];
let [x0,x1,x2,x3,x4,x5,x6,x7] = data;

console.log(x0);//56
console.log(x7);//99

一度変数に入れてから代入(分割代入)する。

分割代入では右辺の配列が個々の要素に分解されて、それぞれ対応する変数に代入される。代入先の変数も配列のようにブラケットでくくること。

###[...]演算子(スプレッド演算子)を利用することで、個々の変数に分解されなかった残りの要素をまとめて配列として切り出すことも可能。

script.js
let data = [56,40,26,82,19,17,73,99];
let [x0,x1,x2, ...other] = data;

console.log(x0);//56
console.log(x1);//40
console.log(x2);//26
console.log(other);//[82, 19, 17, 73, 99]

###変数の入れ替え
分割代入を利用することで、変数の値を入れ替えることもできる。
従来であれば、いずれかの変数をいったん別の変数に退避させる必要がある。

scipt.js
let x = 1;
let y = 2;
[x,y] = [y,x];

console.log(x,y);//2,1
1
4
0

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
1
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?