ES 6の解体

注:この文章は私がチェン一峰先生の[ECMAScript 6入門]の文章を参考にして、自分で記録したノートで、詳しい内容はチェン一峰先生の文章を移動してください.
1.解体

配列解体

var [a,,b]=[1,2,3,4,5];
console.log(a)//1
console.log(b)//3

対象解体

var {a,b}={a:1,b:2,c:3}
console.log(a)//1
console.log(b)//2

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

var { foos: foosz, bars: barsaa } = { foos: "foosz", bars: "bbb" };  
console.log(foosz);  // foosz
console.log(barsaa);//bbb
console.log(foos); error: foo is not defined  

文字列解構文字列は賦値を解構してもよい.これは、文字列が類似配列のオブジェクトに変換されるためです.

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
let {length : len} = 'hello';
len // 5

数値、ブール値解構賦値の場合、等号の右側が数値とブール値であれば、先にオブジェクトに移行します.

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true

上のコードでは、数値とブール値のパッケージオブジェクトにtoStringプロパティがあるため、変数sは値を取得できます.
割り当てを解くルールは、等号の右側の値がオブジェクトまたは配列でない限り、先にオブジェクトに変換することです.undefinedとnullはオブジェクトに変換できないため、それらを解体して値を割り当てると、エラーが発生します.

let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError

関数パラメータの解体

[[1, 2], [3, 4]].map(([a, b]) => a + b);

undefinedは関数パラメータのデフォルト値をトリガーします.

[1, undefined, 3].map((x = 'yes') => x);
// [ 1, 'yes', 3 ]

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]

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

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

解構を用いた一般的なシーン

(1)交換変数の値

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

(2)関数から複数の値を返す

//      
function rA(){
  return [1,2,3];
}
let [a,b,c] =rA();

//      
function rO(){
 return {
    foo : 1,
    foo2: 2
  }
}
let {foo,foo2}= rO()

(3)JSONデータを抽出して複製を解くことはJSONオブジェクト中のデータを抽出するのに特に有用である.

let jsonData={
  id:22,
  name:'wwwt',
  data:[222,333],
  doT:function(){
    return this.name 
  }  
}
let { id,doT,name,data}=jsonData

(4)Map構造のIteratorインタフェースが配備されているオブジェクトを巡り、for...ofループ遍歴.Map構造はIteratorインタフェースを原生的にサポートし,変数の解構賦値に合わせてキー名とキー値を取得するのに非常に便利である.

var 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) {
  // ...
}