ES 6解体配分

解体配分はEcmaScript 2016が導入したもう一つの機能であり、現在ブラウザとNodeにある.jsで使用できます.
CommonJsまたはES 6モジュールを作成している場合は、すでに使用している可能性があります.ファイルという名前のmathがあるとします.jsは、エクスポートする関数がたくさんあります.

export const add5   = (num) => num + 5;
export const double = (num) => num * 2;
export const half   = (num) => num / 2;

indexなどの新しいファイルを作成するとjsでは、コードブロックに上記の関数をインポートできます.

import math from "./math.js";

const example1 = math.double(10); // => 20
const example2 = math.add5(10);   // => 15
const example3 = math.half(30);   // => 15

でも今想像してみてください.もし私たちのmath.jsファイルには数百の関数があります.例えばmathのみが必要である.double、なぜすべてインポートするのですか?ここでは、オブジェクト分解の概念について説明します.

import { double } from "./math.js";

const example1 = double(10); // => 20

我々のmaths.jsファイルは、各エクスポート関数を含むオブジェクトをエクスポートします.したがって、このファイルから不要な関数を多くインポートしたくない場合は、エクスポートしたオブジェクトのみを解体し、本当に必要な関数のみを取得できます.
単純オブジェクト分解

const user = {
  name: {
    first: "John",
    middle: "Mitch",
    last: "Doe"
  },
  contacts: {
    email: "[email protected]",
    phone: "333 000000"
  }
}

const { name, contacts } = user;

console.log(name);     // => { first: "John", middle: "Mitch", last: "Doe" }
console.log(contacts); // => { email: "[email protected]", phone: "333 000000" }

上記のコードでは、ネストされたプロパティを持つオブジェクト(ユーザー)を定義します.ユーザー・オブジェクトを解体することで、名前と連絡先にアクセスできます.したがって、解体割り当てを行うと、userを入力することなく、nameとcontactsのプロパティを常に呼び出すことができます.nameとuser.contacts.
ネストされたオブジェクトの分解

const developer = {
  name: "Mitch",
  age: 24,
  languages: {
    favorite: "Haskell",
    mostUsed: "JavaScript"
  }
}

const { name, age, languages: { mostUsed, favorite } } = developer;

const bio = `${name} is a ${age} years old developer.
`
          + `He codes in ${mostUsed} but prefers ${favorite}`;

// => "Mitch is a 24 years old developer.
//     He codes in JavaScript but prefers Haskell"

上のコードを分析しましょう.ネストされたプロパティ、言語を持つdeveloperという新しいオブジェクトを定義しました.破棄作業では、名前と年齢にアクセスできます.何も新鮮じゃない!ただし、言語キーからお気に入りとmostUsedプロパティに同時にアクセスするには、言語自体を解釈する必要があります.これにより、2つの新しい定数値(お気に入りとmostUsed)があり、開発者オブジェクトに毎回アクセスする必要はありません.
ヒント:ES 6のデフォルトパラメータ機能を使用するだけで、新しいプロパティを追加できます.

const developer = {
  name: "Mitch",
  age: 24,
  languages: {
    favorite: "Haskell",
    mostUsed: "JavaScript"
  }
}

const { name, age, languages: { mostUsed, favorite, dreaded = "PHP" } } = developer;

const bio = `${name} is a ${age} years old developer.
`
          + `He codes in ${mostUsed} but prefers ${favorite}
`
          + `He fearse ${dreaded}`;

// => "Mitch is a 24 years old developer.
//     He codes in JavaScript but prefers Haskell.
//     He fears PHP."

アレイの解体
アレイも破壊できる!最も簡単な状況を見てみましょう.

const phrase        = ["Hello", "John", "!"];
const [greet, name] = phrase;

console.log(greet); // => "Hello"
console.log(name);  // => "John"

インデックス(phrase[0]、phrase[1])を使用してこれらの値にアクセスするよりも良いです.しかし(何らかの理由で)感嘆符(phrase[2])だけを手に入れたいならどうしますか?

const phrase           = ["Hello", "John", "!"];
const [,, exclamation] = phrase;

console.log(exclamation); // => "!"

来たぞ!配列から特定の要素のみを取得するクリーンな方法だとは思いません.
デフォルト
オブジェクトの解体中に見られるように、配列を解体するときにデフォルト値を配列に割り当てることができます.

const RGB = [55, 155];

const [R, G, B = 255] = RGB;

console.log(R); // => 55
console.log(G); // => 155
console.log(B); // => 255

これにより、Bが定義されていない場合にバックアップ値があることを確認できます.
首尾
Haskellなどの機能言語から来た場合は、頭と尾の概念を熟知している可能性があります.例を見てみましょう

let list = [1, 2, 3, 4, 5]
let h    = head list
let t    = tail list

print h -- 1
print t -- [2,3,4,5]

したがって、上記の例で説明したように、head関数を使用してリストの最初の要素(Haskellでは配列)を取得し、tail関数を使用してリストの残りの要素を取得します.これは再帰関数において非常に有用であるが,本論文では議論しない.JavaScriptで同じ結果を達成するために配列解体を使用したいだけです.

const list = [1, 2, 3, 4, 5];
const [head, ...tail] = list;

console.log(head); // => 1
console.log(tail); // => [2, 3, 4, 5]

簡単すぎる!強力な伝搬演算子と配列構造分解を併用しただけだ!
ネスト配列の解体オブジェクトのように、ネスト配列も解体できます!次のように表示されるグリッドがあるとします.

+-—--+----+----+
| 10 | 10 | 10 |   

1行目、中央値(50)、3行目を取得します.

const grid = [[10, 10, 10],
              [60, 50, 60],
              [90, 90, 90]];

const [first, [, center, ,], third] = grid;

console.log(first);  // => [10, 10, 10]
console.log(center); // => 50
console.log(third);  // => [90, 90, 90]

これらの値にアクセスすることで、grid[0]、grid[1][1]、grid[2]にアクセスすることは容易ではありません.
アレイ配列のクローン解除により、可変配列のクローン化も容易になります.

const myArray = [1, 2, 3, 4, 5];
const clone   = myArray;

myArray[1] = "two";

console.log(myArray); // => [1, "two", 3, 4, 5]
console.log(clone);   // => [1, "two", 3, 4, 5]

ご覧のように、配列を参照してクローン化する場合、元の配列を突然変異させると、変更はクローン化にも影響します.値に基づいてクローン化することで、このような状況を回避できます.

const myArray = [1, 2, 3, 4, 5];
const clone   = [...myArray];

myArray[1] = "two";

console.log(myArray); // => [1, "two", 3, 4, 5]
console.log(clone);   // => [1, 2, 3, 4, 5]

よくやった、配列破壊!