ES 6-変数の復元コピー

1、配列の解体賦値
基本的な使い方

let [foo, [[bar], baz]] = [1, [[2], 3]];
let [head, ...tail] = [1, 2, 3, 4];

「パターンマッチング」に属し、等号の両方のパターンが同じであれば、左の変数に対応する値が与えられます.
Set構造の場合、配列の解構賦値を使用することもできます.

let [x, y, z] = new Set(["a", "b", "c"])
x // "a"

これは分からない???実際,あるデータ構造がIteratorインタフェースを有する限り,配列形式の解構賦値を用いることができる.

function* fibs() {
  var a = 0;
  var b = 1;
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}

var [first, second, third, fourth, fifth, sixth] = fibs();
sixth // 5

上記のコードでは、fibsはGenerator関数であり、元々はIteratorインタフェースを有する.解構賦値は、このインタフェースから順次値を取得します.
デフォルト

var [foo = true] = [];
foo // true

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

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

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

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

let baz;
let {bar: baz} = {bar: 1}; // SyntaxError: Duplicate declaration "baz"

let baz;
({bar: baz} = {bar: 1}); //   

このような書き方を採用する場合,変数の宣言と付与は一体である.letとconstの場合、変数は再宣言できないため、付与された変数が以前に宣言されると、エラーが発生します.
ポイント:

let { log, sin, cos } = Math;

オブジェクトの解構賦値は、既存のオブジェクトのメソッドを変数に容易に賦値することができる.上記のコードはMathオブジェクトの対数,正弦,余弦の3つの方法を対応する変数に付与し,使い勝手がよい.
3、文字列の解構賦値
文字列は、割り当て値を解くこともできます.これは、文字列が類似配列のオブジェクトに変換されるためです.

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

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

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

4、数値とブール値の解体賦値
割り当てを解除すると、等号の右側に数値とブール値がある場合は、先にオブジェクトに変わります.

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

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

割り当てられたルールは、等号の右側の値がオブジェクトでない限り、先にオブジェクトに変換されます.undefinedおよびnullはオブジェクトに変換できないため、それらを解体して付与すると、エラーが報告されます.
5、関数パラメータの解体賦値

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]

上記のコードは、関数moveのパラメータにデフォルト値を指定するものであり、変数xおよびyにデフォルト値を指定するものではないので、前の書き方とは異なる結果が得られます.
6、用途
(1)交換変数の値

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

上記のコードは変数xとyの値を交換し、このような書き方は簡潔であるだけでなく、読みやすく、意味が非常にはっきりしている.
(2)関数から複数の値を返す
関数は1つの値しか返されません.複数の値を返す場合は、配列またはオブジェクトに戻すしかありません.構造賦値については、これらの値を取り出すのが便利です.

//       

function example() {
  return [1, 2, 3];
}
var [a, b, c] = example();

//       

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
var { foo, bar } = example();

(3)関数パラメータの定義
解構賦値は、パラメータのセットを変数名に容易に対応させることができる.

//           
function f([x, y, z]) { ... }
f([1, 2, 3])

//           
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1})

(4)JSONデータの抽出
解構賦値はJSONオブジェクトのデータ抽出に特に有用である.

var jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
}

let { id, status, data: number } = jsonData;

console.log(id, status, number)
// 42, "OK", [867, 5309]

上のコードでJSONデータの値をすばやく抽出できます.
(5)関数パラメータのデフォルト値

jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
}) {
  // ... do stuff
};

パラメータのデフォルト値を指定すると、関数体の内部にvar foo = config.foo || 'default foo';という文を書くことは避けられます.
(6)遍歴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) {
  // ...
}

(7)入力モジュールの指定方法
モジュールをロードする場合は、入力方法を指定する必要があります.割り当て値の解釈により、入力文が非常に明確になります.

const { SourceMapConsumer, SourceNode } = require("source-map");