Javascript における分割代入構文の詳細な説明

序文

ES6 で初めて導入された「構造化代入構文」を使用すると、配列やオブジェクトの値を異なる変数に挿入できるようになります。難しそうに見えますが、実際には習得も使用も非常に簡単です。

構造化代入構文は JS 式です。 ES6 では、配列やオブジェクトから値を抽出し、特定のパターンに従って変数に値を割り当てることができます。これを構造化分解と呼びます。構造化代入により、プロパティ/値をオブジェクト/配列から取り出し、他の変数に割り当てることができます。

ES6 の構造化代入が登場する前は、変数に値を割り当てる必要がある場合、値を直接指定することしかできませんでした。

例えば：

a = 1 とします。
b = 2 とします。
c = 3 とします。
d = 4 とします。
e = 5 とします。

配列の構造化は非常に簡単です。配列内の各値に対して変数を宣言するだけです。配列内のインデックスの代わりに、より少ない変数を定義したり（つまり、最初のいくつかの値のみを処理する場合）、いくつかのインデックスをスキップしたり、REST パターンを使用して残りのすべての値を新しい配列に配置したりすることもできます。

定数数値 = [ 3, 6, 9, 12, 15 ];
定数[
 k, // k = 3
 l, // l = 6
 , // 値をスキップする (12)
 ...n // n = [12, 15]
] = 数値;

オブジェクト分解

オブジェクトの分割は配列の分割と非常によく似ていますが、主な違いは、オブジェクト内の各キーを名前で参照できるため、同じ名前の変数を作成できることです。また、キーを新しい変数名に分解し、必要なキーのみを分解してから、レスト モードを使用して残りのキーを新しいオブジェクトに分解することもできます。

定数obj = { a: 1、 b: 2、 c: 3、 d: 4 };
定数{
 a, // a = 1
 c: d, // d = 3
 ...残り // 残り = { b: 2, d: 4 }
} = オブジェクト;

ネストされた構造化分解

ネストされたオブジェクトと配列は、同じルールを使用して構造化分解できます。違いは、親オブジェクトを変数自体に格納しなくても、ネストされたキーまたは値を直接変数に分解できることです。

const ネスト = { a: { b: 1, c: 2 }, d: [1, 2]};
定数{
 a: {
  b: f, // f = 1
  ...g // g = {c: 2}
 },
 ...h // h = {d: [1, 2]}
} = ネスト;

高度な解体

配列はオブジェクトのように動作するため、オブジェクトの分割代入のキーとしてインデックスを使用することで、分割代入構文を使用して配列から特定の値を取得できます。このメソッドは、配列の他の属性 (配列の長さなど) を取得するためにも使用できます。最後に、デストラクチャリング値が未定義の場合、デストラクチャリングプロセスで変数のデフォルト値を定義することもできます。

定数 arr = [ 5, 'b', 4, 'd', 'e', 'f', 2 ];
定数{
 6: x, // x = 2
 0: y, // y = 5
 2: z, // z = 4
 長さ: カウント、// カウント = 7
 name = 'array', // name = 'array' (arr には存在しません)
 ...restData // restData = { '1': 'b', '3': 'd', '4': 'e', '5': 'f' }
} = arr;

要約する

これで、Javascript の分解代入構文に関するこの記事は終わりです。より関連性の高い JS 分解代入構文のコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。