ES 6配列とオブジェクトの解構賦値の詳細

本明細書の例では、ES 6配列とオブジェクトの解体賦値について説明する.皆さんの参考にしてください.具体的には以下の通りです.
配列の解体代入
基本的な使い方
ES 6は、一定のパターンに従って配列およびオブジェクトから値を抽出し、変数に値を付与することを可能にし、これをDestructuringと呼ぶ.

//        ，       
var a = 1;
var b = 2;
var c = 3;
// ES6      
var [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 [head,...tail] = [1,2,3,4];
head // 1
tail // [2,3,4]
let [x,y,...z] = ['a'];
x // "a"
y // undefined
z // []

デフォルト
デフォルト値の設定を許可する

var [foo = true] = [];
foo // true
[x,y='b'] = ['a'];
// x='a', y='b'

なお、ES 6内部では厳密に等しい演算子(===)を用いて、1つの位置に値があるか否かを判断する.
したがって、配列メンバーがundefinedと厳密に等しくない場合、デフォルト値は有効になりません.

var [x=1] = [undefined];
x //1
var [x=1] = [null];
x // null

デフォルト値が式の場合、この式は不活性に評価されます.つまり、使用する場合にのみ評価されます.

function f(){
 console.log('aaa');
}
let [x=f()] = [1];

上記のコードでは,xは値をとることができるので,関数f()はまったく実行されない.上のコードは、実際には次のコードに等価です.

let x;
if([1][0] === undefined){
 x = f();
}else{
 x = [1][0];
}

デフォルト値は、割り当てを解除する他の変数を参照できますが、この変数は宣言されている必要があります.

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

xがデフォルト値yを使用する場合、yはまだ宣言されていないため、上記の最後の式.
オブジェクトの解体代入
解体は配列だけでなくオブジェクトにも使用できます

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

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

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

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

var {foo:baz} = {foo:"aaa",bar:"bbb"};
baz // "aaa"
let obj = {first:"hello",last:"world"};
let {first:f,lats:l} = obj;
f // "hello"
l // "world"

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

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

上のコードではfooはマッチングモードでありbazこそ変数である.本当に割り当てられているのは、モードfooではなく変数bazです.
配列と同様に、ネストされたオブジェクトにも使用できます.

var obj = {
 p:["hello",{y:"world"}]
};
var {p:[x,{y}]} = obj;
x // "hello"
y // "world"

なお、このときpはモードであり、変数ではないため、付与されない.
オブジェクトの構造解除は、デフォルト値を指定することもできます.

var {x=3} = {};
x // 3
var {x,y=5} = {x:1};
x // 1
y // 5
var {x: y=3} = {x: 5};
y // 5

解体に失敗した場合、変数の値はundefinedに等しい

var {foo} = {bar:"baz"};
foo // undefined

デコンストラクション・モードがネストされたオブジェクトであり、サブオブジェクトが存在する親属性が存在しない場合は、次のエラーが発生します.

//   
var {foo: {bar}} = {baz:"baz"};

配列は本質的に特殊なオブジェクトであるため、配列のオブジェクト属性を解くことができます.

var arr = [1,2,3];
var {0:first, [arr.length-1]:last} = arr;
first // 1
last // 3

JavaScriptに関する詳細は、「javascriptオブジェクト向け入門チュートリアル」、「JavaScriptアルゴリズムテクニック総括」、「JavaScriptエラーとデバッグテクニック総括」、「JavaScriptデータ構造とアルゴリズムテクニック総括」、「JavaScript遍歴アルゴリズムとテクニック総括」および「JavaScript数学演算使い方総括」のトピックを参照してください.
JavaScriptプログラムの設計に役立つことを願っています.