変数の構造割り当て(配列、オブジェクト、文字列)

ES 6は、一定のパターンに従って配列またはオブジェクトから値を抽出し、変数に値を付与することを解構と呼び、等号の右側の値が配列またはオブジェクトでない場合、先にオブジェクトに変換し、undefinedとnullがオブジェクトに変換できないことに注意する.
一.配列の解体代入
完全な解体:

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

本質的に、このような書き方はパターンマッチングであり、等号の両側のパターンが同じ、あるいはタイプが同じであれば、左側の変数に対応する値が付与.解構が成功しなければ、変数の値はundefinedである.次のコードセグメントでは、aの値はundefinedです.

let [a] = [] ; 
let [b,a] = [1] ;

不完全解:不完全解、すなわち等号左の変数は、右配列の一部にのみ一致し、この場合も解は成功する.

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

左側が配列である、右側が配列でない(厳密には遍歴不可能な解構)と、エラーが報告される.すなわち、パターンが一致しない.
デフォルト:
デフォルト値を指定できるようにします.

let [x = 1] = [] ;
x ; //    1

let [x = 1] = [null];
x //    null

なお、ES 6の内部では、1つの位置に値があるか否かを判断する際に、厳密な等号演算子(===)を用いる、1つの等号の左側の変数、対応する等号の右側の位置の値がundefinedである場合にのみ、変数がデフォルト値に付与される.また、デフォルト値では、変数が宣言されていることを前提として、他の解構賦値の変数を使用できます.たとえば、次のようにします.

let [x=1 , y=x] = [] ; // x=1 , y=1
let [x=y , y=1] = [] ; //ReferenceError: y is not defined

2番目の式が間違っているのは、yが宣言される前に使用するためである.
二.オブジェクトの解体代入
オブジェクトの解体賦値がデータの解体賦値と異なる点は、配列の解体賦値は変数の順で一致するが、オブジェクトの解体賦値は属性名で一致し、順序の区別がない点である.

let {
     a, b} = {
     b:2 , a:1}
a // 1
b // 2


let {
      c } = {
     a:1 , b:2}
c // undefined

上記のコードから,オブジェクトの解構賦値は,等号左の変数名が右の2つの同名属性と順序が一致しなくても解構に成功し,同名属性がなければ解構に失敗し,変数属性値がundefinedであることがわかる.
オブジェクトの解体はデフォルト値を指定することもできます.デフォルト値が有効になる条件は、オブジェクトの属性値がundefinedに厳密に等しいことです.

let {
     x = 1} = {
     } ; 
x // x  3

let {
     y = 2} = {
     y: undefined}
y //y  1

let {
     z = 3} = {
      z: null}
z //z  null 

注意宣言された変数を解体賦値に使用するには、解体されたコードをカッコで含める必要があります.

//    
let x ;
{
     x} = {
      x : 1} ;
//SyntexError : syntax error

//    
let x ;
({
     x} = {
      x : 1}); 

三.文字列の解構賦値
文字列の解構賦値は、文字列を類似配列に変換するオブジェクトです.

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

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

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

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

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

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

上記のコードでは、パラメータが入力された時点で、パラメータ配列[1,2]は、[x,y]に解構付与、関数内部のコードには何の影響もない.関数パラメータの解釈はデフォルト値を使用することもでき、move関数のパラメータはオブジェクトであり、このオブジェクトによって解釈され、x , yの値が得られ、解釈に失敗した場合、x , yにデフォルト値が与えられる

function move({
     x = 0, y = 0} = {
     }) {
     
  return [x, y];
}

move({
     x: 3, y: 8}); // [3, 8]
move({
     x: 3}); // [3, 0]
move({
     }); // [0, 0]
move(); // [0, 0]

五.用途
1.交換変数の値

let x = 1;
let y = 2;

[x, y] = [y, x];

2.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]

3.mapを巡る

const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for( let [key , value]  of map){
     
	console.log(key + " is " + value);
}
//  
// first is hello
// second is world

//    
for (let [key] of map) {
     
  // ...
}
//    
for (let [,value] of map) {
     
  // ...
}