分割代入の使い方(配列, オブジェクト)

ES2015から導入された分割代入の使い方について確認します。分割代入を利用すると、まとめて代入することができるので処理の見通しが良くなります。

配列

順番に格納

要素は順番に格納されます。下記例のように、3番目の要素を飛ばすといった指定も可能です。

const z = [1, 2, 3, 4]
let a, b, c

[a, b,, c] = z

console.log(a)  // 1
console.log(b)  // 2
console.log(c)  // 4

残り部分を全て格納

... を利用すると残りの部分を全て最後の変数に格納できます。

const z = [1, 2, 3, 4]
let a, b

[a, ...b] = z

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

デフォルト値指定

デフォルト値の指定も可能です。

const x = [1, 2]
const y = [1, 2, 3, 4]

let a, b, c
[a, b, c=10] = x
console.log(a)  // 1
console.log(b)  // 2
console.log(c)  // 10

let d, e, f
[d, e, f=10] = y
console.log(d)  // 1
console.log(e)  // 2
console.log(f)  // 3

オブジェクト

キーを指定して取得

const object = {
  'key1': 'value1',
  'key2': 'value2',
  'key3': 'value3'
}

const {key1, key3, key4} = object

console.log(key1)  // value1
console.log(key3)  // value3
console.log(key4)  // undefined

キー名とは別の変数に代入

const object = {
  'key1': 'value1',
  'key2': 'value2',
  'key3': 'value3'
}

const {key1: a, key3: b, key4: c} = object

console.log(a)  // value1
console.log(b)  // value3
console.log(c)  // undefined

残り部分を全て格納

... を利用すると指定されなかった残り部分を全て格納できます。

const object = {
  'key1': 'value1',
  'key2': 'value2',
  'key3': 'value3'
}

const {key2, ...object2} = object

console.log(key2)     // value2
console.log(object2)  // {key1: "value1", key3: "value3"}

デフォルト値指定

const object = {
  'key1': 'value1',
  'key2': 'value2',
  'key3': 'value3'
}

const {key1, key3='defaultValue3', key4='defaultValue4'} = object

console.log(key1)  // value1
console.log(key3)  // value3
console.log(key4)  // defaultValue4

多次元の場合

const object = {
  'key1': 'value1',
  'key2': {
    'key2_1': 'value2_1'
  }
}

const {key1: a, key2: {key2_1: b}} = object

console.log(a)  // value1
console.log(b)  // value2_1