JS-学習ES 6の-変数の解構賦値

目次

配列の解構賦値

オブジェクトの解体賦値

文字列の解構賦値

関数パラメータの解構賦値

用途

1.配列の解体代入

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

いくつかの例

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

let [x, , y] = [1, 2, 3];
x // 1
y // 3

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

もう1つのケースは,等号左のパターンが,一部の等号右の配列にのみ一致する不完全な解構である.この場合,解構は依然として成功する.

let [x, y] = [1, 2, 3];
x // 1
y // 2

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

Set構造についても、配列の解構賦値を使用することができる.

let [x, y, z] = new Set(['a', 'b', 'c']);
x // a
y // b
z // c

割り当てを解除すると、デフォルト値を指定できます.

let [foo = true] = [];
foo // true

let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

2.オブジェクトの解体代入
オブジェクトの解体は配列と重要な違いがあります.配列の要素は順番に配列され、変数の値はその位置によって決定される.オブジェクトのプロパティには順序がありません.変数はプロパティと同じ名前でなければ、正しい値を取得できません.

let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

let { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined

変数名が属性名と一致しない場合は、以下のように書く必要があります.

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'

これは実際には,オブジェクトの解構賦値が次の形式の簡略化であることを示している.

let { foo, bar } = {foo: "aaa", bar: "bbb"};

本質的には次のような書き方です

let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };

すなわち,オブジェクトの解構賦値の内部メカニズムは,まず同名属性を見つけてから対応する変数に与える.本当に与えられたのは後者で、前者ではありません.

let { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined

上のコードではfooはマッチングモードでありbazこそ変数である.本当に割り当てられているのは、モードfooではなく変数bazです.
3.文字列の解釈代入
文字列は、割り当て値を解くこともできます.これは、文字列が類似配列のオブジェクトに変換されるためです.

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

同様の配列のオブジェクトにはlengthのプロパティがあるため、このプロパティに値を割り当てることもできます.

const {length: len} = 'hello';
len // 5

4.関数パラメータの解構賦値

function add([x, y]){
  return x + y;
}

add([1, 2]); // 3

5.用途
JSONデータを抽出し、解構賦値はJSONオブジェクトのデータを抽出するのに特に有用である.

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]