解体とは何ですか？
分解は、データの構築とは正反対です。たとえば、新しいオブジェクトまたは配列を構築する代わりに、既存のオブジェクトまたは配列を1つずつ分割して、必要なデータを抽出します。
ES6は、新しいパターンを使用して抽出する数値値に一致し、分解の割り当てはこのパターンを採用します。このパターンは、分解しているデータ構造をマッピングし、パターンに一致するデータのみが抽出されます。
分解されたデータ項目は、割り当てオペレーターにあります=の右側には、配列とオブジェクトの任意の組み合わせであり、任意のネストが可能になります。これらのデータに値を割り当てるために使用される変数の数に制限はありません。
アレイ破壊
配列分解はデータ項目として配列を使用し、この配列から値を抽出して、配列パターン（配列から必要な値と一致するために使用）に従って1つ以上の変数に値を割り当てることができます。
配列パターンは、値の位置に基づいて抽出するものである値を識別するために使用されます。配列の構造を正確にマッピングできるように、配列パターンの各変数に、分解された配列の位置に対応する値が割り当てられるようにする必要があります。
私たちが理解するのに役立ついくつかの例を教えてください：
配列パターンの例
配列内のすべての値を個々の変数に割り当てる
//配列const avengers = ['tony stark'、 'Steve Rogers'、 'Natasha Romanoff']; //配列を変数に分解します。配列パターンは、割り当て演算子 `=`の左側にあり、構造化された配列は//の右側にあります。 const [Ironman、Cap、Blackwidow] = Avengers; // Ironman = 'Tony Stark' // Cap = 'Steve Rogers' // BlackWidow = 'Natasha Romanoff' // Output Ironman：Ironman;
最初の値を除くすべての値を抽出します
const avengers = ['Tony Stark'、 'Steve Rogers'、 'Natasha Romanoff']; // Tony Const [、Cap、BlackWidow] = Avengersを使用する必要はありません。 // Ironman = error：undefined // cap = 'Steve Rogers' // BlackWidow = 'Natasha Romanoff' //出力キャップ：Cap;
2番目の値を除くすべての値を抽出します
const avengers = ['Tony Stark'、 'Steve Rogers'、 'Natasha Romanoff']; // const [Ironman、、Blackwidow] = AvengersのCAPがありません。 // Ironman = 'Tony Stark' // cap = error：undefined // blackwidow = 'natasha romanoff' // output blackwidow：blackwidow;
最後の値を除くすべての値を抽出します
const avengers = ['Tony Stark'、 'Steve Rogers'、 'Natasha Romanoff']; // Ironman vs Cap Const [Ironman、Cap] = Avengers; // Ironman = 'Tony Stark' // Cap = 'Steve Rogers' // BlackWidow =エラー：未定義//出力BlackWidow：Ironman;
ネストされた配列
このマッチングパターンは、割り当て演算子=左の配列パターンが右側の配列構造と一致する限り、ネストされた配列もサポートします。左側の変数に、右側の配列の位置に対応する値が割り当てられることをもう一度説明させてください。どれほど深くネストしても、あなたはそれらを解体することができます。
ネストされたアレイの分解
//ネストされたアレイを破壊するconst avengers = ['natasha Romanoff'、['Tony Stark'、 'James Rhodes']、['Steve Rogers'、 'Sam Wilson']]; //アベンジャーズとそのパートナーは[BlackWidow、[Ironman、Warmachine]、[Cap、Falcon]] = Avengers; // blackwidow = 'natasha romanoff' // Ironman = 'Tony Stark' // warmachine = 'James Rhodes' // cap = 'Steve Rogers' // Falcon = 'Sam Wilson' //出力Warmachine：Warmachine;
深くネストされた配列から値を抽出します
//この配列からペッパーポッツconst avengers = ['Natasha Romanoff'、[['Tony Stark'、 'Pepper Potts']、 'James Rhodes']、['Steve Rogers'、 'Sam Wilson']]]; // Destructure const [、// 'Natasha Romanoff' [[、// Skip 'Tony Stark' Her // Pepper Pottsが変数 'hera'に割り当てます]]] = Avengers; //注意：このように書くこともできます// const [、[[、hera]]] = avengers; //出力hera：hera; // hera = 'ペッパーポッツ'
残りのオペレーターを使用して、残りのすべてのアイテムをキャプチャします
特定の配列アイテムを取得し、残りのアイテムを配列に入れたい場合は、残りのオペレーターを使用して次のように解体できます。
//レストオペレーターを介してconst avengersを解体します= ['natasha romanoff'、 'tony stark'、 'Steve Rogers']; const [blackwidow、... theothers] = avengers; Theothers; // blackwidow = 'natasha romanoff' // theothers = ['Tony Stark'、 'Steve Rogers'] //出力Theothers：Theothers;
オブジェクト破壊
オブジェクトの解体は、特に複雑で深くネストされたオブジェクトから値を取得する必要がある場合に、さらに魔法のようになります。これはより明白です。繰り返しになると、オブジェクトの解体と配列の解体が同じルールを使用します（つまり、割り当て演算子の左側にオブジェクトパターンを作成して、その可変位置が右側のオブジェクトの値位置と一致します）。
オブジェクト破壊では、抽出する必要がある属性名と割り当てられる変数名を指定する必要があります。配列の解体と同様に、割り当て演算子の左側に分解されたオブジェクトをマッピングするオブジェクトパターンを作成する必要があります。
この場合、抽出したいのはオブジェクトプロパティの値です（{ prop: value }からvalueを抽出します）。したがって、オブジェクトパターンには変数が必要であり、この変数の位置は、抽出しようとしているプロパティ値の位置と一致する必要があります。
簡単な例
単純なオブジェクト属性値を抽出します
これを行うには、オブジェクトのプロパティironManの値を変数a 'Tony Stark' Ironman { ironMan: 'Tony Stark' }の値を割り当てることができます。
//オブジェクトのプロパティ値を分解し、それを単一の変数「a」に割り当てます：const {ironman：a} = {rionman： 'tony stark'}; //出力a：a; // a = 'トニー・スターク'複数の属性値を抽出します
同じパターンを拡張する限り、次のようにオブジェクトから複数の属性値を抽出できます。
//オブジェクトのセットアップconst avengers = {Ironman： 'Tony Stark'、Cap： 'Steve Rogers'、Blackwidow： 'Natasha Romanoff'}; //個々の変数への破壊オブジェクトconst {Ironman：a、cap：b、blackwidow：c} = avengers; // a = 'Tony Stark' // b = 'Steve Rogers' // C = 'Natasha Romanoff' //出力a：a;この分解パターンが分解されたオブジェクトと正確に一致する方法を観察します。
ネストされたオブジェクト破壊
ネストされた配列を解体するように、どんなに深くても、ネストされたオブジェクトを解体できます。
//オブジェクトのセットアップconst avengers = {blackwidow： 'natasha romanoff'、Ironmancharacters：{couple：{Ironman： 'Tony Stark'、 'Tony Potts'、}、パートナー：{Warmachine： 'James Brodie'}}、Capcharters：{cap： 'Steve Roger }; //個々の変数への破壊オブジェクトconst {blackwidow：a、ironmancharacters：{couple：{ironman：b、hera：c}、partner：{warmachine：d}}、capcharacters：{cap：e、partner：{falcon：f}}} = avengers; // a = 'ナターシャ・ロマノフ' // b = 'トニー・スターク' // c = 'ペッパー・ポッツ' // d = 'ジェームス・ブロディ' // e = 'スティーブ・ロジャース' // f = 'sam wilson' // output a：a;割り当てられた変数に名前を付けます
もちろん、 a、b、c 、変数名などの変数名を設定するのは悪いことです。
長続きする命名
//オブジェクトのセットアップconst avengers = {Ironman： 'Tony Stark'、Cap： 'Steve Rogers'、Blackwidow： 'Natasha Romanoff'}; //意味のある名前を持つ個々の変数へのオブジェクトconst {Ironman：Ironman、cap：cap、blackwidow：blackwidow} = avengers; // BlackWidow = 'NATASHA ROMANOFF' // IRONMAN = 'TONY STARK' // CAP = 'Steve Rogers' //出力BlackWidow：BlackWidow;このアプローチは、上記の名前a、b、cよりも優れていますが、それでも改善することができます。 { ironMan: ironMan }は少し醜く、直感的ではありません。
構文的に名付けられたショートカット
オブジェクトの属性値を変数に割り当て、変数の名前がオブジェクトの属性名と同じである場合、 =の左側の割り当てモードでは、次のように属性名を単純に記述するだけでいいです。
//オブジェクトconst avenger = {ironman： 'tony stark'}をセットアップします。 //意味のある名前を持つ個々の変数への破壊オブジェクトconst {ithodman // 'ithodman：Ironman'} = avengerに相当します。 // Ironman = 'Tony Stark' //出力Ironman：Ironman;分解されたオブジェクト属性名は割り当てられた変数名と同じであるため、名前を一度リストする必要があります。
簡潔な文法
以前のコードを少しリツイートして、より簡潔で明確に見せてみましょう。
//オブジェクトのセットアップconst avengers = {Ironman： 'Tony Stark'、Cap： 'Steve Rogers'、Blackwidow： 'Natasha Romanoff'}; //意味のある名前を持つ個々の変数にオブジェクトを破壊するconst {Ironman、Cap、BlackWidow} = Avengers; //出力Ironman：Ironman;オブジェクトから深くネストされたプロパティを抽出します
深くネストされたオブジェクトプロパティを抽出したい場合、物事はさらに興味深いものです。
// ObjectConst Avengers = {BlackWidow： 'Natasha Romanoff'、IronmanCharacters：{couple：{Ironman： 'Tony Stark'、 'Tony Potts'、}、パートナー：{Warmachine： 'James Brodie'}}、Capchorters：{cap： 'Steve rogers' fal }}; // Destructure深くネストされたObjectConst {IronmanCharacters：{couple}} = avengers; // couple = {// Ironman： 'Tony Stark'、// hera： 'Pepper Potts'、//} // outputカップル：カップル;待って、このコードをどのように読んだのですか？変数カップルはどのように定義されていますか？
このように分割することにより、割り当てオペレーター=左側のオブジェクトのマップであることがわかります。
const avengers = {Ironmancharacters：{couple：{Ironman： 'Tony Stark'、hera： 'Pepper Potts'、}}}; const { couple } = avengers;カップルの価値を抽出する方法はありません。抽出するオブジェクト属性の場所と名前をマッピングすることによってのみ、JSコンパイラは対応する情報を取得し、オブジェクトのすべての属性に沿って検索し、必要な値を正確に抽出できます。
また、ここでは、カップルが変数に名前を付けるために構文のショートカットを使用していることに注意する必要があります。実際には次のようなものです。
const {Ironmancharacters：{couple：couple}} = avengers;これがカップルの定義の方法であり、その値は、オブジェクトアベンジャーズの属性名カップルの値です。
オブジェクトの属性を分解します
これまでのところ、値を単一の変数に割り当てるためにオブジェクトの値を分解しました。実際、別のオブジェクトのプロパティに値を割り当てることもできます。
const avengers = {blackwidow： 'natasha Romanoff'、Ironmancharacters：{couple：{Ironman： 'Tony Stark'、hera： 'Pepper Potts'}}}; IronmanProperties.family// Ironmanproperties.family = {// Ironman： 'Tony Stark'、// hera： 'Pepper Potts' //} // output Ironmanproperties.family：ironmanproperties.family;ここでは、 ironManCharacters.coupleの価値をironManProperties.familyのプロパティに割り当てます。説明する2つのポイントがあります。
1。括弧には、括弧に含まれる必要があります
既存の変数（上記の例のIronManPropertiesなど）を分解する場合、新しい変数を宣言する代わりにこれを行う必要があります。
2。パターンはまだ一致しています
{ ironManCharacters: { couple... } }オブジェクトアベンジャーズのアイアンマンキャラクターと一致します。このようにして、 AvengersオブジェクトからironManCharacters.coupleの価値を抽出することができます。しかし今、新しいオブジェクトIronmanPropertiesとその財産ファミリは、カップルの後ろに配置されています。実際、このオブジェクトのプロパティironManProperties.familyは実際に割り当てられています。
この状況をはっきりと説明しようとすると、まだ混乱していますか？ JSFiddleで上記のコードを試してみると、すべてが明確になります。
なぜこれをしているのかわからない場合は、次の記事の例を参照してください。これらの例では、このパターンがAPIで呼ばれるJSONオブジェクトを分解するために使用される理由を説明し、解体の魔法を理解することができます！
デフォルト値
解体するときは、変数にデフォルト値を指定することもできます。
//オブジェクトのセットアップconst avengers = {Ironman： 'Tony Stark'、Cap： 'Steve Rogers'、Blackwidow： 'Natasha Romanoff'}; //デフォルトを使用した破壊const {Ironman、cap、blackwidow、thehulk = 'bruce banner'} = avengers; // Ironman = 'Tony Stark' // Cap = 'Steve Rogers' // BlackWidow = 'Natasha Romanoff' // Thehulk = 'Bruce Banner' //出力BlackWidow：BlackWidow;解体中にこれらの問題を避けてください
const、let、varは、割り当てを分解するときは使用されません
この点は、オブジェクトのプロパティの分解と割り当てについて話すときに言及されていますが、ここで繰り返して、誰もが深い印象を与える必要があります。
宣言された変数を分解できません
つまり、変数を分解しながら変数を宣言することができます。
//オブジェクトのセットアップconst avengers = {Ironman： 'Tony Stark'、Cap： 'Steve Rogers'、Blackwidow： 'Natasha Romanoff'、Thehulk： 'Bruce Banner'}; //有効な破壊const {Ironman} = Avengers; {cap} = avengers; var {blackwidow} = avengers; //無効な破壊は、thehulkを許可します。 {thehulk} = avengers; //エラー//出力thehulk：thehulk;宣言された変数を分解できないのはなぜですか？それは、Curly Bracesを使用する場合、 JavaScriptはあなたがブロックを宣言していると思うからです。
解決策は、分解された割り当て全体を一対の括弧内に囲むことです。
宣言された変数を分解して割り当てる方法
//オブジェクトのセットアップconst avengers = {Ironman： 'Tony Stark'、Cap： 'Steve Rogers'、Blackwidow： 'Natasha Romanoff'、Thehulk： 'Bruce Banner'}; //有効なハルクはthehulkを許可します。 （{thehulk} = avengers）; // thehulk = 'Bruce Banner' //出力Thehulk：thehulk;今では巻き毛の装具から始めないので、JSは、予想される解体結果を達成できるようにブロックを宣言しているとは思わない。
分解された値を直接返します
次に返される変数が最初に宣言されない場合、分解された値が直接返され、予想される効果は得られません。たとえば、次のコードでは、返されたアイアンマンオブジェクト全体がトニースタークの期待値ではありません。
//注：これは機能しません！ function gettonystark（avengers）{return {ironman：{realname}} = avengers; // AvengersオブジェクトをRealName値ではなく返します} const Avengers = {Ironman：{realName： 'Tony Stark'}}; const tonystark = gettonystark（avengers）; // tonystark = {// Ironman：{// RealName： 'Tony Stark' //} //}; //出力Tonystark：Tonystark;分解されたオブジェクトから値を抽出するには、最初に変数に割り当ててから、次のコードに示すようにこの変数を返す必要があります。
//注：これは機能します！ function getTonyStark（Avengers）{const {Ironman：{RealName}} = Avengers; REALNAMEを返します。 } const avengers = {Ironman：{realName： 'Tony Stark'}}; const tonystark = gettonystark（avengers）; // Tonystark = 'Tony Stark' //出力Tonystark：Tonystark;割り当てを分割して2行のコードに戻すこの方法は本当に迷惑であり、コードはugい不要です。残念ながら、JavaScriptはこのように機能します - 最初に分解された値を変数に割り当てる必要があり、次にそれを返す必要があり、2つのステップを個別に実行する必要があります。
しかし、私たちは別々にそれをしたとは言わず、2行のコードに入れなければならないとは言いませんでした。したがって、次のように1つの行に書き込むことで、予想される結果を達成できます。
function gettonystark（avengers）{return（{Ironman：{realname}} = avengers）&& realname; } const avengers = {Ironman：{realName： 'Tony Stark'}}; const tonystark = gettonystark（avengers）; // Tonystark = 'Tony Stark' //出力Tonystark：Tonystark; JavaScriptの_short-circuit_ circuit_logical演算子（&& ||）は、最初のオペランドの値に基づいて2番目のオペランドの値を返すため、この書き込み方法は期待される効果を達成できます。ここで、最初のオペランドは、割り当て式を分解し、値をRealNameに割り当てることです。 RealNameは2番目のオペランドであるため、その値は最終的に返されます。
これは最適ではありませんが、達成できます。コードの短さを追求している間、コードの読みやすさに注意を払う必要があります。
要約します
この記事では、分解の割り当ての主な原則について説明します。解体は、コードの量を減らすだけでなく、それをエンコードする方法を根本的に変えます。使用すればするほど、データや関数を形作る方法が増えます。これは、過去にほとんど不可能でした。この記事がES6を学ぶのに役立つことを願っています。