透過現實場景解釋 JavaScript 陣列方法

曾經看過 JavaScript 陣列方法文件並問自己它們在現實生活中到底是如何運作的嗎？

我記得當我開始編碼時，我真的用頭撞牆來理解這些方法。相信我，陣列方法不僅僅是為了破解技術面試，它們是你在現實世界開發中日常表現的朋友。

今天，我將向您展示在實際專案中何時以及如何使用這些陣列方法。

當您完成閱讀時，您會發現數組方法使您的程式碼更加清晰和可讀…更不用說，還有助於保持程式碼的理智和可維護性。

讓我們從最基礎的開始

映射（）和過濾器（）

首先，讓我們從幾個您很可能每天都會使用的陣列方法開始 - map() 和 filter()。

使用map()建構產品價格計算器

因此，您正在建立一個電子商務網站，並且您有一個需要打折 20% 的產品清單。

您的商品資料可能如下：

 const products = [
    { name: "Gaming Mouse", price: 59.99 },
    { name: "Mechanical Keyboard", price: 129.99 },
    { name: "4K Monitor", price: 349.99 }
];

map() 不再寫混亂的 for 循環，而是讓其變得超級乾淨：

const discountedPrices = products.map(product => ({
    ...product,
    price: (product.price * 0.8).toFixed(2)
}));

現在每個價格都有折扣，我們保留了所有原始產品資訊。乾淨簡單。

使用filter()建立智慧搜尋功能

現在讓我們建立一些更酷的東西 - 一個真正跨多個領域工作的智慧搜尋。

假設我們有以下使用者資料：

const users = [
    { name: "Sarah Smith", email: "sarah@gmail.com", role: "developer" },
    { name: "John Doe", email: "john@company.com", role: "designer" },
    { name: "Mike Wilson", email: "mike@gmail.com", role: "developer" }
];

這是使用filter()輕鬆搜尋的方法：

const searchUsers = (query) => {
    return users.filter(user => 
        user.name.toLowerCase().includes(query.toLowerCase()) ||
        user.email.toLowerCase().includes(query.toLowerCase()) ||
        user.role.toLowerCase().includes(query.toLowerCase())
    );
};

沒錯，您可以搜尋姓名、電子郵件和角色。試試 searchUsers("dev")，它只會過濾開發人員。

如果您認為這很酷，請等待我們在下一節中介紹 reduce()。

reduce() - 不只是求和

大多數開發者主要使用reduce()來增加數字。但事實是它的能力遠不止於此——相信我。

計算購物車總計

真正的場景是計算購物車中產品的總成本，同時考慮折扣和稅金。看看這個：

const cartItems = [
    { name: "Nike Air Max", price: 129.99, quantity: 2, discount: 20 },
    { name: "Adidas Hoodie", price: 89.99, quantity: 1, discount: 0 },
    { name: "Running Socks", price: 12.99, quantity: 3, discount: 10 }
];


const cartTotal = cartItems.reduce((total, item) => {
    const itemTotal = item.price * item.quantity;
    const discount = (itemTotal * item.discount) / 100;
    return total + (itemTotal - discount);
}, 0);

不錯吧？您只需要實現一個功能，即可實現數量、折扣、總計計算。

文件統計工具

處理文字文件怎麼樣？我們計算所有單字、字元和句子：

const documentStats = paragraphs.reduce((stats, paragraph) => {
    return {
        words: stats.words + paragraph.split(' ').length,
        characters: stats.characters + paragraph.length,
        sentences: stats.sentences + paragraph.split(/[.!?]+/).length - 1,
        paragraphs: stats.paragraphs + 1
    };
}, { words: 0, characters: 0, sentences: 0, paragraphs: 0 });

所以，你沒有看到reduce() 一次處理多件事是多麼美妙嗎？這比使用單獨的循環要好得多。

專業提示：如果你的reduce()回呼變得太大，小函數總是不錯的選擇。

find() 和 some()

讓我們解決兩種方法，讓您的身份驗證和審核系統變得更簡單。

建立使用者驗證系統

曾經建置過登入系統嗎？以下是 find() 如何使用戶尋找變得非常簡單：

 const products = [
    { name: "Gaming Mouse", price: 59.99 },
    { name: "Mechanical Keyboard", price: 129.99 },
    { name: "4K Monitor", price: 349.99 }
];

不再有笨重的迴圈或複雜的 if 語句。 find() 準確地回傳您需要的內容。

建構內容審核工具

這就是 some() 的閃光點 - 檢查內容是否符合禁用的單字或模式：

const discountedPrices = products.map(product => ({
    ...product,
    price: (product.price * 0.8).toFixed(2)
}));

看看 some() 如何幫助我們同時檢查多個條件。乾淨、可讀且可維護。

快速提示： some() 一旦找到匹配項就會停止檢查。處理大型資料集時的效能完美。

flat() 和 flatMap()

陣列扁平化器

您是否嘗試過展平巢狀陣列？ flat() 是你最好的朋友。它將這些嵌套數組平滑為一個級別：

const users = [
    { name: "Sarah Smith", email: "sarah@gmail.com", role: "developer" },
    { name: "John Doe", email: "john@company.com", role: "designer" },
    { name: "Mike Wilson", email: "mike@gmail.com", role: "developer" }
];

您甚至可以使用深度參數來指定要展平的深度。如果沒有深度，則預設為 1。

flatMap() - 具有多個回應的評論系統

將 flatMap() 視為巢狀陣列上的 flat() 和 map() 的組合。它映射您的數組並展平結果 - 一次完成！

這是一個真正的評論系統，每個評論可以有多個回應：

const searchUsers = (query) => {
    return users.filter(user => 
        user.name.toLowerCase().includes(query.toLowerCase()) ||
        user.email.toLowerCase().includes(query.toLowerCase()) ||
        user.role.toLowerCase().includes(query.toLowerCase())
    );
};

當您需要轉換項目並處理巢狀結果時，flatMap() 是完美的選擇。這就像用一種方法獲得兩種方法一樣！

這是另一個實際範例 - 從社群媒體貼文中提取主題標籤：

const cartItems = [
    { name: "Nike Air Max", price: 129.99, quantity: 2, discount: 20 },
    { name: "Adidas Hoodie", price: 89.99, quantity: 1, discount: 0 },
    { name: "Running Socks", price: 12.99, quantity: 3, discount: 10 }
];


const cartTotal = cartItems.reduce((total, item) => {
    const itemTotal = item.price * item.quantity;
    const discount = (itemTotal * item.discount) / 100;
    return total + (itemTotal - discount);
}, 0);

看看 flatMap() 如何處理潛在空結果的轉換和展平？相當光滑！

every() 和 include()

建立表單驗證系統

讓我們嘗試創建我們日常使用的東西 - 一個強大的表單驗證器。以下是 every() 如何使其乾淨：

const documentStats = paragraphs.reduce((stats, paragraph) => {
    return {
        words: stats.words + paragraph.split(' ').length,
        characters: stats.characters + paragraph.length,
        sentences: stats.sentences + paragraph.split(/[.!?]+/).length - 1,
        paragraphs: stats.paragraphs + 1
    };
}, { words: 0, characters: 0, sentences: 0, paragraphs: 0 });

every() 檢查是否所有規則都通過。您可以看到它非常適合驗證您需要一切真實的情況。

建置權限檢查器

以下是includes()如何讓權限檢查變得非常容易：

const users = [
    { id: 1, email: "alex@tech.com", password: "hashed_password_1", attempts: 0 },
    { id: 2, email: "sam@tech.com", password: "hashed_password_2", attempts: 1 }
];

const authenticateUser = (email, password) => {
    const user = users.find(u => u.email === email);
    if (!user) return { status: "error", message: "User not found" };

    if (user.attempts >= 3) return { status: "error", message: "Account locked" };

    return validatePassword(user, password);
};

includes() 讓我們的程式碼讀起來像簡單的英文。比複雜的 if 語句或迴圈要好得多。

對資料進行排序 (sort())

您是否曾經需要對資料進行排序，而不僅僅是基本的字母順序？ sort() 比大多數開發人員想像的更強大。

開發自訂表格排序器

這是一個處理不同資料型別的真實表排序器：

const bannedWords = ["spam", "scam", "inappropriate"];

const moderateContent = (content) => {
    const containsBannedWords = bannedWords.some(word => 
        content.toLowerCase().includes(word)
    );

    const hasSpamPatterns = content.includes("!!!") || content === content.toUpperCase();

    return {
        isSpam: containsBannedWords || hasSpamPatterns,
        reason: containsBannedWords ? "Banned words detected" : "Spam patterns found"
    };
};

不同欄位不再有單獨的函數。只需一台分類機即可處理所有事情！

建立排行榜系統

看看這個處理搶七的排行榜排序器：

 const products = [
    { name: "Gaming Mouse", price: 59.99 },
    { name: "Mechanical Keyboard", price: 129.99 },
    { name: "4K Monitor", price: 349.99 }
];

看看我們如何處理多個排序標準？先得分，然後獲勝，然後最短的比賽時間打破平局。

快速提示：如果您需要保留原始順序，請務必在排序之前複製陣列。

最佳實踐和性能

在開始之前，讓我們用一些小智慧來總結一下，這將使您的陣列方法更好地工作。

何時使用哪種方法

這是我根據您想要做的事情提供的實用指南：

const discountedPrices = products.map(product => ({
    ...product,
    price: (product.price * 0.8).toFixed(2)
}));

所以，不要再擔心 forEach 與 for 迴圈了。重點關注這些。

做與不做其實很重要

最後，在你離開之前。始終尋找一種方法讓事情變得更容易、更好。例如：

而不是這個：

const users = [
    { name: "Sarah Smith", email: "sarah@gmail.com", role: "developer" },
    { name: "John Doe", email: "john@company.com", role: "designer" },
    { name: "Mike Wilson", email: "mike@gmail.com", role: "developer" }
];

總是這樣做：

const searchUsers = (query) => {
    return users.filter(user => 
        user.name.toLowerCase().includes(query.toLowerCase()) ||
        user.email.toLowerCase().includes(query.toLowerCase()) ||
        user.role.toLowerCase().includes(query.toLowerCase())
    );
};

就是這樣！您現在已經掌握了 JavaScript 陣列方法的實際知識。明智地使用它們！

記住：程式碼可讀性比微最佳化更好。首先選擇讓你的程式碼最清晰的方法。

有疑問嗎？在下面的評論中打我吧！ ？

---

在 X（以前的 Twitter）上關注我，獲取每日 JavaScript 智慧！我分享簡短的程式碼技巧，調試實際問題，並研究 Web 開發。

保持好奇心並記住：聰明的開發人員會複製貼上，但聰明的開發人員會理解他們正在複製的內容。在下一篇文章中見到你！ ✨

以上是透過現實場景解釋 JavaScript 陣列方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！