JavaScript の構造化代入の一般的なシナリオと例 5 つ

序文

構造化代入構文は、オブジェクト/配列からプロパティ/値を取得し、他の変数に割り当てるために使用できる JavaScript 式です。この構文は、配列やオブジェクトから値を取得しやすくする新しい構文を ECMAscript 6 仕様で導入したものです。

1. データを抽出する

この簡単な製品オブジェクトの例から始めて、JavaScript でオブジェクトを分解する方法を見てみましょう。

定数積 = {
    id: 1,
    タイトル: 「ナイキ エアズーム ペガサス 38」、
    製品イメージ: "/resources/products/01.jpeg",
    表示:「ホワイト/ピュアプラチナ/ミッドナイトネイビー/ウルフグレー」
    価格: 120,
};
const { id, price, title } = 製品;

次に、対応するプロパティに次のようにアクセスできます。

コンソールログ(id); // 1
console.log(価格); // 120
console.log(title); // ナイキ エアズーム ペガサス 38

構造化分解により、コードをより明確かつ簡潔にすることができます。より複雑なオブジェクトを分解する必要がある場合はどうすればよいでしょうか?つまり、オブジェクト内のオブジェクトです。

ここで、次のように、製品リストデータから製品の 1 つの属性を取得する必要があるとします。

定数製品 = [
    {
        id: 1,
        タイトル: 「ナイキ エアズーム ペガサス 38」、
        価格: 120,
    },
    {
        id: 2,
        タイトル: 「ナイキ エア ズーム アルファフライ ネクスト%」
        価格: 275,
    },
    {
        id: 3,
        タイトル: 「ナイキ ズーム フライ 4」
        価格: 89.0,
    },
];

ここでは、製品リストが複数のレベルにネストされています。製品情報にアクセスする必要がある場合は、できるだけ多くのレベルを分解して、製品オブジェクトのプロパティを取得できます。

const [tmp, { id, title, price }] = 製品;
コンソールログ(id); // 2
console.log(title); // ナイキ エア ズーム アルファフライ NEXT%
console.log(価格); // 275

上記のコードは使用方法を示すためだけに使用されています。プロジェクト開発中にこの方法で配列内のオブジェクト情報を取得することは推奨されません。

通常、データリストは必ずしも配列である必要はありません。取得効率の点では、配列よりもマップオブジェクトの方が効率的です。上記のデータは、次のようにマップオブジェクトに変更できます。

定数製品 = {
    1: {
        タイトル: 「ナイキ エアズーム ペガサス 38」、
        価格: 120,
    },
    2: {
        タイトル: 「ナイキ エア ズーム アルファフライ ネクスト%」
        価格: 275,
    },
    3: {
        タイトル: 「ナイキ ズーム フライ 4」
        価格: 89.0,
    },
};
定数{
    2: { id, タイトル, 価格 },
} = 製品;
コンソール.log(id); // 2
console.log(title); // ナイキ エア ズーム アルファフライ NEXT%
console.log(価格); // 275

JavaScript では、データは変数やメソッドになる可能性があるため、次のように、構造化代入は関数パラメータの定義にも適しています。

const printArticle = ({ タイトル、コメント }) => {
    console.log(タイトル);
    console.log(コメント);
};
印刷記事({
    タイトル: 「JavaScript 分割代入」、
    備考: 「構造化割り当ての実践的なシナリオの紹介」
});

ReactやVueなどのフレームワークを使用する場合、メソッドの導入など、分解割り当てを行う箇所が多くあります。

2. エイリアス値

プロパティとは異なる名前の変数を作成する場合は、オブジェクト分解のエイリアス機能を使用できます。

const { 識別子: aliasIdentifier } = 式;

identifier はアクセスするプロパティの名前であり、aliasIdentifier は変数名です。具体的な使い方は以下のとおりです。

定数製品 = {
    1: {
        タイトル: 「ナイキ エアズーム ペガサス 38」、
        価格: 120,
    },
    2: {
        タイトル: 「ナイキ エア ズーム アルファフライ ネクスト%」
        価格: 275,
    },
    3: {
        タイトル: 「ナイキ ズーム フライ 4」
        価格: 89.0,
    },
};
定数{
    2: { 価格: 製品価格 },
} = 製品;

console.log(製品価格); // 275

3. 動的プロパティ

動的な名前を使用して変数属性を抽出できます (属性名は実行時に認識されます)。

const { [propName]: 識別子 } = 式;

propName 式はプロパティ名 (通常は文字列) に評価され、識別子は次のように、分解後に作成された変数名を示す必要があります。

定数製品 = {
    1: {
        タイトル: 「ナイキ エアズーム ペガサス 38」、
        価格: 120,
    },
    2: {
        タイトル: 「ナイキ エア ズーム アルファフライ ネクスト%」
        価格: 275,
    },
    3: {
        タイトル: 「ナイキ ズーム フライ 4」
        価格: 89.0,
    },
};
定数productKey = "1";
const { [productKey]: 製品 } = 製品;
console.log(product); // { title: 'Nike Air Zoom Pegasus 38', price: 120 }

上記のコードでは、productKey の値を更新することで product の値を更新できます。

4. オブジェクトの分解における休息

分解に REST 構文を追加します。REST プロパティは、分解パターンによって取得されなかった残りの列挙可能なプロパティキーを収集します。

const { 識別子、...残り } = 式;

分解後、変数識別子にはプロパティ値が含まれます。 REST 変数は、REST プロパティを持つプレーンオブジェクトです。

定数積 = {
    タイトル: 「ナイキ エアズーム ペガサス 38」、
    価格: 120,
    数量: 5,
    カテゴリID: 1,
    レビュー: 9830,
    合計: 45,
};
const { タイトル、...その他 } = 製品;
console.log(others); // { 価格: 120、数量: 5、カテゴリID: 1、レビュー: 9830、合計: 45 }

配列の場合、Rest を使用して最初の値と最後の値を取得できます。

定数数値 = [1, 2, 3];
const [head, ...tail] = 数値;
コンソール.log(ヘッド); // 1
console.log(末尾); // [ 2, 3 ]

5. デフォルト値

前述したように、配列を分解するときにデフォルト値を割り当てることができます。

定数RGBA = [255, 34];
定数[R、G、B = 0、A = 1] = RGBA;
コンソールログ(R); // 255
コンソールログ(G); // 34
コンソール.log(B); // 0
コンソールログ(A); // 1

これにより、B と A が定義されていない場合でもデフォルト値が確保されます。

要約する

デストラクチャリングは、JavaScript の ES6 バージョンに追加された非常に便利な機能です。構造化分解を使用すると、オブジェクトや配列からプロパティやデータをすばやく簡単に抽出して、個別の変数にすることができます。ネストされたオブジェクトでも適切に機能し、... 演算子を使用して配列に割り当てることができます。

これで、JavaScript の分割代入の一般的なシナリオと例 5 つについての記事は終了です。より関連性の高い JS 分割代入の例については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: