JavaScript で配列を構造化し、コードをきれいに見せる方法-jsチュートリアル-php.cn

JavaScript で配列を構造化し、コードをきれいに見せる方法

王林

リリース： 2024-08-12 18:37:12

オリジナル

672 人が閲覧しました

ays to Destructure Array in JavaScript & make your code look clean

こんにちは！ ?

あなたが素晴らしい仕事をしていることを願っています! SMYです！ ?今日は、配列の分割を使ったクールな JavaScript マジックを紹介します。 ?

?コンテンツ：

⚡ 待て、何?
⚡ でもなぜ?
⚡ でもどうやって?
1️⃣ 配列を時系列に分割する
2️⃣ インデックスによる配列の構造化
3️⃣ オブジェクト内の配列の構造化
4️⃣ 動的インデックスを使用した配列の構造化

⚡ 待って、何？

配列の分割は JavaScript の優れた機能で、配列から値 (またはオブジェクトのプロパティ) を個別の変数に抽出できるようになります。コードをかっこよく見せるためだけではなく、よりクリーンで読みやすいコードを書くことが重要です。さまざまな方法で配列を構造化する方法を詳しく見てみましょう!

⚡ でもなぜ?

分割すると、コードがより簡潔で表現力豊かになります。インデックスによって配列要素にアクセスする代わりに、値を変数に直接抽出できます。これにより、コードが簡素化され、エラーが減り、理解しやすくなります。

⚡ でもどうやって？

いくつかの例を示しながら、配列を分割する各方法を見てみましょう!

1️⃣ 配列を時系列に分割する

これは配列を構造解除する最も簡単な方法です。変数は、出現順に配列要素と一致します。

const fruits = ['apple', 'mango', 'banana'];
const [apple, mango, banana] = fruits;

console.log(apple); // apple
console.log(mango); // mango
console.log(banana); // banana

ログイン後にコピー

仕組み:

フルーツ配列には 3 つの要素が含まれています。
[apple、mango、banana] を使用して、配列を 3 つの変数に分解し、それぞれが配列内の要素に同じ順序で対応します。

2️⃣ インデックスによる配列の構造化

JavaScript では、配列リテラル自体内のインデックスによって配列を直接構造解除することはできませんが、Object.entries を使用するか、値を手動で設定することによって、少しの回避策を講じることで、同様の結果を得ることができます。

const fruits = ['apple', 'mango', 'banana'];
const {0: apple, 1: mango, 2: banana} = fruits;

console.log(apple); // apple
console.log(mango); // mango
console.log(banana); // banana

ログイン後にコピー

仕組み:

ここでは、配列インデックスをキーとして扱うことによって構造化を模倣する構文を使用します。インデックスによる構造化は直接サポートされていないため、これはむしろ回避策ですが、アイデアはインデックスを介して配列要素と変数を整列させることです。

3️⃣ オブジェクト内の配列の構造化

オブジェクト内にネストされている配列を構造解除することもできます。これにより、ネストされた構造内の特定の要素をターゲットにすることができます。

const fruitsPerSeason = {
  summer: ['grapes', 'pineapple'],
  winter: ['kiwis', 'oranges']
};

const { summer: [grape, pineapple], winter: [kiwi, orange] } = fruitsPerSeason;

console.log(grape); // grapes
console.log(pineapple); // pineapple
console.log(kiwi); // kiwis
console.log(orange); // oranges

ログイン後にコピー

仕組み:

fruitsPerSeason は、各プロパティが配列であるオブジェクトです。
オブジェクト内で構造を分割することにより、これらの配列から特定の要素を個別の変数に抽出します。

4️⃣ 動的インデックスを使用した配列の構造化

より動的なアプローチとして、インデックスを保持する変数と分割構造を組み合わせることができます。

const fruitsPerSeason = {
  summer: ['pineapple', 'grapes'],
  winter: ['kiwis', 'oranges']
};

const pineappleIdx = 0, kiwisIdx = 0;
const { summer: [_, pineapple], winter: [_, kiwis] } = fruitsPerSeason;

console.log(pineapple); // pineapple
console.log(kiwis); // kiwis

ログイン後にコピー