分割代入|JavaScript
JavaScriptの分割代入について動作をまとめてみました。分割代入は配列やオブジェクトの中身を複数の変数に代入できる構文です。
配列の場合
順番に代入されます。
const arr = ["123", "456"];
const [a, b] = arr;
console.log(a); // "123"
console.log(b); // "456"
残余部分を配列で取得する
残余構文を使って、不定数の配列を１つの変数に代入します。
const [a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // Array [30, 40, 50]
応用:カンマ区切り文字列を任意の個数に分割
const str = 'a,b,c,d,e,f,g';
const [a, ...rest] = str.split(',');
const b = rest.join(',');
console.log(rest); // Array ["b", "c", "d", "e", "f", "g"]
console.log(a); // "a"
console.log(b); // "b,c,d,e,f,g"
オブジェクトの場合
プロパティと一致する変数に代入します。次のようなオブジェクトで動作を見てみます。
const object = {
name: "roto",
age: 16,
memo: "qwer",
}
プロパティと一致する変数に割り当てます。
const { name, age } = object;
console.log(name); // "roto"
console.log(age); // 16
const { name, memo } = object;
console.log(name); // "roto"
console.log(memo); // "qwer"
順番を変更してもプロパティと一致する変数に割り当てます。
const { age, memo, name } = object;
console.log(name); // "roto"
console.log(age); // 16
console.log(memo); // "qwer"
プロパティと一致する変数が見つからない場合は値が割り当てられません。
const { name, a, age } = object;
console.log(name); // "roto"
console.log(a); // undefined
console.log(age); // 16
新しい変数名への代入
オブジェクトのプロパティとは異なる名前の変数に代入することができます。
const object = {ringo: 5, mikan: 3};
const {ringo: apple, mikan: orange} = object;
console.log(apple); // 5
console.log(orange); // 3
初期値の設定
変数に値が割り当てられなかった場合の初期値を設定できます。
const { name, a = "foo", age = 20 } = object;
console.log(name); // "roto"
console.log(a); // "foo"
console.log(age); // 16
