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
