ES6でのアレイ破壊の簡単な紹介

JavaScriptでの分解は、配列リテラルに似た構文を使用して、構造を取得し、割り当てによってそれを独自の構成要素に分解することにより、配列から複数のプロパティを抽出する単純化された方法です。

それはあなたが期待している価値の種類を説明するパターンを作成し、割り当てを行います。配列の破棄は位置を使用します。

以下のコードスニペットを参照してください。

var [first, second, third] = ["Laide", "Gabriel", "Jets"];

破壊を伴う構文。

var first = "laide", second = "Gabriel", third = "Jets";

破壊しない構文。

破壊にNumbersを使用することはできません。数値を変数名にすることはできないため、数値はエラーをスローします。
var [1, 2, 3] = ["Laide", "Ola", "Jets"];

この構文はエラーをスローします。

分解により、配列からのデータの抽出が非常に簡単で読みやすくなりました。5レベルまたは6レベルのネストされた配列からデータを抽出しようとしていると想像してみてください。それは非常に面倒です。割り当ての左側で配列リテラルを使用します。

var thing = ["Table", "Chair", "Fan"];var [a, b, c] = thing;

左側の配列リテラルの各変数を受け取り、配列内の同じインデックスにある同じ要素にマップします。

console.log(a); // Output: Tableconsole.log(b); //Output: Chairconsole.log(c); //Output: Fan

宣言と割り当ては、破棄時に別々に行うことができます。

var first, second;[first, second] = ["Male", "Female"];

破壊する配列リテラルに渡される変数の数が配列内の要素よりも多い場合、配列内のどの要素にもマップされていない変数はundefined

var things = ["Table", "Chair", "Fan", "Rug"];var [a, b, c, d, e] = things;console.log(c); //Output: Fanconsole.log(d); //Output: Rugconsole.log(e); //Output: undefined

破壊する配列リテラルに渡される変数の数が配列内の要素より少ない場合、マップされる変数のない要素はそのまま残されます。エラーは一切ありません。

var things = ["Table", "Chair", "Fan", "Rug"];var [a, b, c] = things;console.log(c); // Output: Fan

返された配列の破棄

構造化を解除すると、配列を値として返す関数をより正確に操作できるようになります。それはすべての反復可能性に対して機能します。

function runners(){ return ["Sandra", "Ola", "Chi"];}
var [a, b, c] = runners();console.log(a); //Output: Sandraconsole.log(b); //Output: Olaconsole.log(c); //Output: Chi

デフォルト値

破棄すると、値がない場合、または値がない場合にデフォルト値を変数に割り当てることができます。 undefined合格。これは、何も見つからないときにフォールバックを提供するようなものです。

var a, b;[a = 40, b = 4] = [];console.log(a); //Output: 40console.log(b); //Output: 4
[a = 40, b = 4] = [1, 23];console.log(a); //Output: 1console.log(b); //Output: 23

デフォルト値は、同じ配列リテラル内の変数を含む他の変数を参照することもできます。

var [first = "Cotlin", second = first] = [];console.log(first); //Output: Cotlinconsole.log(second); //Output: Cotlin
var [first = "Cotlin", second = first] = ["Koku"];console.log(first); //Output: Kokuconsole.log(second); //Output: Koku
var [first = "Cotlin", second = first] = ["Koku", "Lydia"];console.log(first); //Output: Kokuconsole.log(second); //Output: Lydia

一部の値を無視する

破棄すると、変数を目的の要素にマップできます。末尾のコンマを使用して、配列内の他の要素を無視またはスキップできます。

var a, b;[a, , b] = ["Lordy", "Crown", "Roses"];
console.log(a); //Output: Lordyconsole.log(b); //Output: Roses

残りのパラメータとスプレッド構文

ES6で追加された新しい(…)演算子は、破棄に使用できます。(…)演算子が破棄時に左側に表示される場合、それはRESTPARAMETERです。Restパラメーターは、R​​est変数自体にマップされていない配列内の残りのすべての要素をマップするために使用されます。残されたものを集めるようなものですRest変数は常に最後である必要があり、そうでない場合はaSyntaxErrorがスローされます。

var planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];var [first, , third, ...others] = planets;
console.log(first); //Output: Mercuryconsole.log(third); //Output: Venusconsole.log(others); //Output: ["Mars", "Pluto", "Saturn"]

破棄時に(…)演算子が右側に表示される場合、それはSPREADSYNTAXです。それ変数がマップされていない配列内の他のすべての要素を取得し、それを残りの変数にマップします。

var planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];
var [first, second, ...rest] = ["Mercury", "Earth", ...planets, "Saturn"];
console.log(first); //Output: Mercuryconsole.log(second); //Output: Earthconsole.log(rest); //Output: ["Venus", "Mars", "Pluto", "Saturn"]

When you can have more variables on the left-hand side, it maps the single elements in the array equally to the variables.

var planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];
var [first, second, ...rest] = ["Mercury", ...planets];
console.log(first); //Output: Mercuryconsole.log(second); //Output: Mercuryconsole.log(rest); //Output: ["Earth", "Venus", "Mars", "Pluto", "Saturn"]
var planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];
var [first, second, third, fourth ...rest] = ["Mercury", "Earth", ...planets];
console.log(first); //Output: Mercuryconsole.log(second); //Output: Earthconsole.log(third); //Output: Mercuryconsole.log(fourth); //Output: Earthconsole.log(rest); //Output: ["Venus", "Mars", "Pluto", "Saturn"]

Interchanging Or Swapping Variables

One destructuring expression can be used in swapping the values of two variables.

var a, b;[a, b] = ["Male", "Female"];[a, b] = [b, a];
console.log(a); //Output: Femaleconsole.log(b); //Output: Male

Nested Array Destructuring

You can also do nested destructuring with arrays. The corresponding item must be an array in order to use a nested destructuring array literal to assign items in it to local variables.

var numbers = [8, [1, 2, 3], 10, 12];var [a, [d, e, f]] = numbers;
console.log(a); // Output: 8console.log(d); // Output: 1console.log(e); // Output: 2

Multiple Array Destructuring

You can destructure an array more than once in the same code snippet.

var places = ["first", "second", "third", "fourth"];var [a, b, , d] = [f, ...rest] = places;
console.log(a); //Output: firstconsole.log(d); //Output: fourthconsole.log(f); //Output: firstconsole.log(rest); //Output: ["second", "third", "fourth"]

Conclusion

You can copy and paste the code on Babel’s website to see what the code would look like if destructuring did not exist. You would have written more lines of code, but destructuring simplifies it all.