ES 6解構賦値詳細解-配列

解構-配列の詳細と様々な使用シーン.
1.ES 6には新しい値取り方法が導入されています.この文章は主にその中の1つのモードの使用-配列の解構について話しています.もう1つのオブジェクトモードの構造は私の別の文章を参照してください.
使用形式:let[変数名,...]=[配列要素];値を割り当てるときは1つずつ対応し、最初の変数が取った値は対応する配列内の最初の要素です.ここでは構造は配列、オブジェクトにのみ使用できます.

let [x,y,z]=undefined;    
let [a,b,c]=null;
//  ，  undefined   null       obj

let  [x,y,z]='abc';
console.log(x,y,z);//  a   b   c;
//         abc      obj=====new  String('abc');

したがって、obj、arrayに変換できるものはすべて解構を使用することができます.配列内の値を取得する必要がありました.

let  arr=[1,2,3];
let  x=arr[0],
      y=arr[1],
      z=arr[2];

解构した后にとても简単なことができて、下でどのように使うことを见てみましょう.
使用シーン:

配列内の要素を取得します.

/*     */
let arr=[1,2,3];
let [x,y,z]=arr;      ======     let  [x,y,z]=[1,2,3];
console.log(x,y,z);//  1,2,3

ケース1:変数の数が配列内の要素の個数に対応しない場合、後に要素に対応する変数がなく、値はundefinedになります

let  [x,y,z]=[1,2];
console.log(x,y,z);//    1    2   undefined

ケース2:配列内に空席要素がある場合、その位置の値はundefinedとデフォルト設定されます.

let [x,y,z]=[1,,2];     //    ===   [1,undefined,2]
console.log(x,y,z); //   1  undefined  2;

もちろん、これらの変数にはデフォルト値もあります.書き方は次のとおりです.

let [x,y,z=3]=[2];
console.log(x,y,z);//    2   undefined    3

ここでは、対応する要素に一致していない場合、デフォルト値がある場合はデフォルト値をとり、ない場合はundefined(変数を宣言したのに値を付けていない)をとります.ケース3:デフォルト値があり、対応する要素に一致している場合:

let [x,y=6,z=3]=[1,2];
console.log(x,y,z); //   1   2   3

ここで、xはデフォルト値6ではなく、一致値2を取得していることがわかります.ここで、デフォルト値は不活性な値に従い、要素に一致していない場合(ここでは、一致値がデフォルト値を上書きしていると理解できます)にのみデフォルト値を取得します.もちろん、配列の値がundefinedの場合を除き、変数はデフォルト値をとります.

let [x=1,y=6,z]=[undefined,2,3];
console.log(x,y,z); // 1   2   3

xが値に一致していることがわかりますが、要素はundefinedで、最終的にはデフォルト値を取ります.yが一致する値はundefinedではないので、デフォルト値は上書きされます.

関数パラメータの使用:ここでは、関数パラメータが解体モードを使用する場合、関数が実パラメータに入力されなければならないことを知る必要があります.そうしないと、エラーが発生します.パラメータは配列形式で入力する必要があります.

/*    */
function test(x,y,z){
	console.log(x,y,z);
}
test();//undefined  undefined  undefined
/*    */			
function test2([x,y,z]){
	console.log(x,y,z);
}
test2();//  

また、パラメータのデフォルト値とデフォルトパラメータの違いを知る必要があります.形式パラメータ(パラメータ)にはデフォルト値があり、実パラメータが伝達されているわけではありません.例を見てみましょう

function test([x=1,y=2,z=3]){
	console.log(x,y,z);
}
test();//  

パラメータが正しくデフォルトで入力されていないため、エラーが発生します.

function test([x,y,z]=[1,2,3]){
	console.log(x,y,z);
}
test();//1,2,3

ここでパラメータが入力されると、デフォルトのパスの配列パラメータが上書きされます.

function test([x,y,z]=[1,2,3]){
	console.log(x,y,z);
}
test([6,,6]);//6   undefined   6

ここでは、なぜ6 2 6ではないのか、undefinedの値がデフォルト値ではないのかと聞かれるかもしれません.はい、実はこの中の2はデフォルトで入力されたパラメータで、パラメータ変数のデフォルト値ではありませんので、混同しないでください.

//       
function test([x=1,y=2,z=3]){
	console.log(x,y,z);
}
test([,,]);//1  2  3        [, ,]====[undefined,undefined,undefined]

ネスト解除の使用

let  [x,[y],z]=[1,[2],[]];
console.log(x,y,z);//1  2   []

実はネストして使うのは、やはり以上のルールに従います.1階か数階の配列が複数セットされているだけです.