ES 6(三):変数の解構賦値

解構賦値構文はJavascript式であり、これにより、値を配列または属性から異なる変数に抽出できます.ここでは、配列の解構賦値、オブジェクトの解構賦値、文字列の解構賦値、数値およびブール値の解構賦値、および関数パラメータの解構賦値について説明します.
配列の解体代入
基本的な使い方
ES 6以前に3つの変数を定義するには、次のようにする必要があります.
code

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

デコンストラクション割り当てを使用すると、モードマッチングのようになります.
code

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

等号の両方のパターンが同じであれば、割り当て値の解釈に成功します.
code

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

両方のパターンが同じで、右側の値が少ないと解構に成功せず、左の変数値がundefined:
cdoe

let [
    [a, [b]], c
] = [
    [1, []], 3
];
console.log(a); // 1
console.log(b); // undefined
console.log(c); // 3

両方のモードが同じで、左側に変数が少ない場合は、既存の変数を割り当てることに成功します.
cdoe

let [
    [a, [b]],
] = [
    [1, [2]], 3
];
console.log(a); // 1
console.log(b); // 2
console.log(c); // ReferenceError: c is not defined

等号の右側に遍歴可能な機関がない場合は、次のようにエラーが表示されます.
cdoe

let [a] = 1;
console.log(a); // TypeError: 1 is not iterable
let [a] = false;
console.log(a); // TypeError: false is not iterable
let [a] = NaN;
console.log(a); // TypeError: NaN is not iterable
let [a] = undefined;
console.log(a); // TypeError: undefined is not iterable
let [a] = null;
console.log(a); // TypeError: null is not iterable
let [a] = {};
console.log(a); // TypeError: {} is not iterable

デフォルト値の指定
デフォルト値を指定できるように、デコンストラクション割り当てで指定します.1つの場所に値がない場合、ページはモードが同じですが、右側に値がない場合にデフォルト値を指定できます.
code

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

注意:ES6内部では、厳密に等しい演算子(===)を使用して、位置に値があるかどうかを判断します.したがって、デフォルト値は、1つの配列メンバーが厳密にundefinedに等しい場合にのみ有効になります.
オブジェクトの解体代入
変数の解釈賦値は、配列の解釈賦値とは異なります.
配列の解构賦値:要素は顺番に并んで、変数の取値は変数の位置によってオブジェクトの解构賦値を决します:オブジェクトの属性は顺番がなくて、そのため変数は属性と同名でなければ正しい値を取ることができません
*code

let { foo, bar } = { bar: '  bar', foo: '  foo' }
console.log(foo); //   foo
console.log(bar); //   bar

オブジェクトが賦値を解く際には順序に関係なく,属性名が特に重要であることがコードから分かる.
変数名が属性名と一致しない場合の付与の解釈方法
code

let { bar: foo } = { bar: '  bar' }
console.log(foo); //   bar
console.log(bar); // ReferenceError: bar is not defined

以上のコードの役割は,右側のbar解構をfooに付与することであり,属性名が異なるため,この方式で行う必要がある.
配列は特殊なオブジェクトです
配列は特殊なオブジェクトであるため、配列はオブジェクト属性の解構賦値もサポートします.
code

let arr = [1, 2, 3];
let { 0: first, 1: second, 2: last } = arr;
console.log(first); // 1
console.log(second); // 2
console.log(last); // 3

文字列の解構賦値
文字列は,解構賦値を行う際にクラス配列のオブジェクトに変換される.
code

let [a, b, c, d, e, f] = 'string';
console.log(a); // s
console.log(b); // t
console.log(c); // r
console.log(d); // i
console.log(e); // n
console.log(f); // g

文字列にはlengthという属性があるため、この属性を解くこともできます.
code

let { length: len } = 'string';
console.log(len); // 6

数値とブール値の解構賦値
数値とブール値も、オブジェクトに変換されたときに解構賦値を行うことができます.
code

let { toString: tos1 } = 456;
let { toString: tos2 } = false;
console.log(tos1 === Number.prototype.toString); // true
console.log(tos2 === Boolean.prototype.toString); // true

関数パラメータの解構賦値
関数のパラメータは、以前に説明した配列、オブジェクト、ブール値、数値解の賦値の実際の使用である解の賦値を行うこともできます.
code

function add([a, b]) {
    return a + b;
}
console.log(add([2, 3])); // 5

これにより、a = ea || 0;のような文が表示されないように、パラメータを渡すときにデフォルト値を加えることができるので、パラメータをより便利にすることができます.解构賦値はやはり使いやすくて、熟知した后に私达のjs文を更に合理的で、更にメンテナンスしやすいことができます.