可以在 JavaScript 中解構數組並使您的程式碼看起來乾淨-js教程-PHP中文網

可以在 JavaScript 中解構數組並使您的程式碼看起來乾淨

王林

發布： 2024-08-12 18:37:12

原創

675 人瀏覽過

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

登入後複製

運作原理：

fruits 陣列包含三個元素。
使用 [apple、mango、banana]，我們將數組解構為三個變量，每個變數對應數組中的一個元素，順序相同。

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

登入後複製