JS の構造化代入の 5 つの一般的なシナリオと例について話しましょう

この記事では、JavaScript に関する関連知識をお届けします。主に 5 つの一般的なシナリオと、js の構造化と代入の例について説明します。興味のある友人は参照してください。すべての人に役立つことを願っています。ヘルプ。

分割代入構文は JavaScript 式であり、分割代入を通じて、オブジェクト/配列から属性/値を取り出し、他の変数に割り当てることができます。この構文は、配列やオブジェクトから値を簡単に取得できるようにする ECMAscript 6 仕様によって導入された新しい構文です。

1. データの抽出

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

const product = {
    id: 1,
    title: "Nike Air Zoom Pegasus 38",
    product_image: "/resources/products/01.jpeg",
    shown: "White/Pure Platinum/Midnight Navy/Wolf Grey",
    price: 120,
};
const { id, price, title } = product;

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

console.log(id); // 1
console.log(price); // 120
console.log(title); // Nike Air Zoom Pegasus 38

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

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

const products = [
    {
        id: 1,
        title: "Nike Air Zoom Pegasus 38",
        price: 120,
    },
    {
        id: 2,
        title: "Nike Air Zoom Alphafly NEXT%",
        price: 275,
    },
    {
        id: 3,
        title: "Nike Zoom Fly 4",
        price: 89.0,
    },
];

ここでは、製品リストは複数のレベルにネストされており、必要に応じて製品情報にアクセスするには、それを分解することができ、場合によっては複数のレベルでアイテム オブジェクトのプロパティを取得できます。

const [tmp, { id, title, price }] = products;
console.log(id); // 2
console.log(title); // Nike Air Zoom Alphafly NEXT%
console.log(price); // 275

上記のコードは、その使用法を示すためにのみ使用されており、プロジェクト開発中にこの方法で配列内のオブジェクト情報を取得することはお勧めできません。

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

const products = {
    1: {
        title: "Nike Air Zoom Pegasus 38",
        price: 120,
    },
    2: {
        title: "Nike Air Zoom Alphafly NEXT%",
        price: 275,
    },
    3: {
        title: "Nike Zoom Fly 4",
        price: 89.0,
    },
};
const {
    2: { id, title, price },
} = products;
console.log(id); // 2
console.log(title); // Nike Air Zoom Alphafly NEXT%
console.log(price); // 275

JavaScript では、データを変数やメソッドにすることができるため、次のように構造化代入は関数パラメーターの定義での使用にも適しています。 ##

const printArticle = ({ title, remark }) => {
    console.log(title);
    console.log(remark);
};
printArticle({
    title: "JavaScript 解构赋值",
    remark: "解构赋值的实用场景介绍",
});

ReactやVueなどのフレームワークを使う場合、メソッドの導入など代入を分解する箇所がたくさんあります。

2. エイリアス値

プロパティとは別の名前の変数を作成したい場合は、オブジェクト分割のエイリアス関数を使用できます。

const { identifier: aliasIdentifier } = expression;

identifier はアクセスするプロパティの名前で、aliasIdentifier は変数名です。具体的な使用法は次のとおりです:

const products = {
    1: {
        title: "Nike Air Zoom Pegasus 38",
        price: 120,
    },
    2: {
        title: "Nike Air Zoom Alphafly NEXT%",
        price: 275,
    },
    3: {
        title: "Nike Zoom Fly 4",
        price: 89.0,
    },
};
const {
    2: { price: productPrice },
} = products;

console.log(productPrice); // 275

3. 動的プロパティ

動的名を使用して変数プロパティを抽出できます (プロパティ名は実行時にわかります):

const { [propName]: identifier } = expression;

propName 式はプロパティ名 (通常は文字列) として評価され、識別子は構造化後に作成される変数名を示す必要があります。使用法は次のとおりです。

const products = {
    1: {
        title: "Nike Air Zoom Pegasus 38",
        price: 120,
    },
    2: {
        title: "Nike Air Zoom Alphafly NEXT%",
        price: 275,
    },
    3: {
        title: "Nike Zoom Fly 4",
        price: 89.0,
    },
};
const productKey = "1";
const { [productKey]: product } = products;
console.log(product); // { title: 'Nike Air Zoom Pegasus 38', price: 120 }

上記のコードでは、

productKey# を更新することで更新できます。## の値により、product の値も変更されます。 4. オブジェクト分割の Rest

Rest 構文を分割に追加すると、Rest プロパティは、分割モードで取得されなかった残りの列挙可能なプロパティ キーを収集します。

const { identifier, ...rest } = expression;

構造化後、変数識別子には属性値が含まれます。

rest

変数は、残りのプロパティを備えた通常のオブジェクトです。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const product = { title: &quot;Nike Air Zoom Pegasus 38&quot;, price: 120, quantity: 5, category_id: 1, reviews: 9830, total: 45, }; const { title, ...others } = product; console.log(others); // { price: 120, quantity: 5, category_id: 1, reviews: 9830, total: 45 }</pre><div class="contentsignin">ログイン後にコピー</div></div>配列の場合、Rest 実装を通じて最初と最後の値を取得できます:

const numbers = [1, 2, 3];
const [head, ...tail] = numbers;
console.log(head); // 1
console.log(tail); // [ 2, 3 ]

5. デフォルト値

前述したように、デフォルト値:

const RGBA = [255, 34];
const [R, G, B = 0, A = 1] = RGBA;
console.log(R); // 255
console.log(G); // 34
console.log(B); // 0
console.log(A); // 1

このようにして、

B

と A が定義されていない場合でもデフォルト値が存在することを確認できます。 概要

構造化は、JavaScript の ES6 バージョンに追加された非常に便利な機能です。構造を分割すると、オブジェクトや配列からプロパティやデータを個別の変数に迅速かつ簡単に抽出できます。これはネストされたオブジェクトに対して機能し、

...

演算子を使用して配列の割り当てを割り当てることができます。 推奨学習: 「

JavaScript ビデオ チュートリアル

」

以上がJS の構造化代入の 5 つの一般的なシナリオと例について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。