曾經看過 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()來增加數字。但事實是它的能力遠不止於此——相信我。
計算購物車總計
真正的場景是計算購物車中產品的總成本，同時考慮折扣和稅金。看看這個：
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() 如何使用戶尋找變得非常簡單：
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() 是你最好的朋友。它將這些嵌套數組平滑為一個級別：
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() 如何使其乾淨：
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() 比大多數開發人員想像的更強大。
開發自訂表格排序器
這是一個處理不同資料型別的真實表排序器：
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中文網其他相關文章！
