JS ES6における構造化分解についてお話しましょう

概要

es6 では、配列またはオブジェクトから指定された要素を取得する新しい方法が追加されました。これが今日お話しする「デストラクチャリング」です。

まず配列の分解について話しましょう

構造化分解する前に、通常はインデックスに基づいて配列内の指定された要素を取得します。

定数arr = [1, 2, 3]; 
定数a = arr[1];

分解後、次のメソッドを使用して配列内の要素をすばやく取得できます。

定数arr = [1, 2, 3];
定数[a, b, c] = arr;

コンソールにログ出力します。
コンソールログ(b);
コンソールログ(c);

これはそれぞれa、b、cの値を出力します。

1

2

3

最初の 2 つの要素のみを取得したい場合は、次のように記述できます。

定数arr = [1, 2, 3];
定数[a, b] = arr;

コンソールにログ出力します。
コンソールログ(b);

スプレッド演算子を組み合わせて、配列で指定された複数の要素を取得することもできます。次に例を示します。

定数arr = [1, 2, 3];
定数[a, ...brr] = arr;

コンソールにログ出力します。
コンソールログ(brr);

このように、brr は 1 以外の要素で構成される配列となり、a と brr の印刷された値は次のようになります。

1

[23]

配列内の特定の要素のみを取得したい場合はどうすればよいでしょうか?たとえば、配列に 2 つだけ取得したい場合は、どのように記述すればよいでしょうか?

定数arr = [1, 2, 3];
定数[, a] = arr;
コンソールにログ出力します。

上記では、特定の位置にある要素を取得するために、分解が配列自体の位置と一致するように、プレースホルダーとしてコンマを使用しています。
ご覧のとおり、構造化分解の出現により、配列内の指定された位置にある 1 つ以上の要素を取得することが容易になりました。これはコード内での重要な応用でもあります。

配列の分解について話した後、

オブジェクトの解体

配列の分割とは異なり、オブジェクトの分割はプロパティ名に基づいて一致します。オブジェクトには配列の添え字のような順序がないため、添え字を使用して抽出することはできません。
たとえば、オブジェクト obj を定義し、その name 属性の値を取得したい場合は、次のように記述できます。

定数オブジェクト = {
    名前: 'wudixiaodoujie'、
    年齢: 18
};
定数名 = obj;
console.log(名前);
武藤小豆傑

定数年齢 = 0;
定数 age: perAge } = obj;
console.log(年齢ごと);
18

オブジェクトの分解は広く使用されています。たとえば、オブジェクトのプロパティやメソッドを頻繁に呼び出す必要がある場合は、分解によって変数に割り当てることができます。変数を介して呼び出すと、ある程度コードの量を減らすことができます。

以上がJS ES6におけるデコンストラクションの詳しい内容です。JS ES6におけるデコンストラクションの詳細については、123WORDPRESS.COMの他の関連記事もご覧ください。