通过现实场景解释 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中文网其他相关文章！