NEW ARTICLE
Rubyのメタプログラミングを極める：コードを自在に操る技術
  1. HOME
  2. javascript
  3. javascript 分割代入を使用する

javascript 分割代入を使用する

javascript 分割代入を使用する

javascriptで、分割代入を使用するサンプルコードを記述してます。

目次

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 102.0.5005.115
Javascript サンプル集はこちら

分割代入

分割代入を使用すると、配列やオブジェクトに変数を一括で代入することができます。

分割代入を使用しない場合は、以下のように代入しますが、

let arr = [1, 2, 3];

let a = arr[0];
let b = arr[1];
let c = arr[2];

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

分割代入を使用すると簡潔に記述することができます。

let a, b, c;

[a, b, c] = [1, 2, 3];

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

// 数が合わない場合は、代入されません
[a, b, c] = [1, 2, 3, 4];

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

// 初期値は設定することができます
[a = -1, b = -2, c = -3] = [1, undefined];

console.log(a); // 1
console.log(b); // -2
console.log(c); // -3

// 特定の位置にある値だけ指定することも可能です
[, , c] = [1, 2, 3];

console.log(a); // undefined
console.log(b); // undefined
console.log(c); // 3

二次元配列にも使用できます。

[
  [x1, y1],
  [x2, y2]
] = [
    [11, 12],
    [21, 22],
  ];;

console.log(x1); // 11
console.log(y1); // 12
console.log(x2); // 21
console.log(y2); // 22

スプレッド構文も使用することができます。

[a, b, ...c] = [1, 2, 3, 4];

console.log(a); // 1
console.log(b); // 2
console.log(c); // [3,4]

変数を入れ替えることも簡単にできます。

let a, b;

[a, b] = [1, 2];

console.log(a); // 1
console.log(b); // 2

[a, b] = [b, a];

console.log(a); // 2
console.log(b); // 1

オブジェクトにも使用できます。

({ a, b } = { a: 1, b: 2 });

console.log(a); // 1
console.log(b); // 2

({ a, b, c } = { a: 1, b: 2, c: { d: 4, e: 5 } });
console.log(a); // 1
console.log(b); // 2
console.log(c); // {d: 4, e: 5}

({a, b, ...c} = {a: 1, b: 2, c: 3, d: 4});
console.log(a); // 1
console.log(b); // 2
console.log(c); // {c: 3, d: 4}