停止使用 JavaScript 中的 find()方法

傻梦兽
2,136 阅读4分钟

大家好，我是梦兽。一个 WEB 全栈开发和 Rust 爱好者。如果你对 Rust 非常感兴趣，可以关注梦兽编程公众号获取群，进入和梦兽一起交流。

忘记 JavaScript 中的 find()方法：探讨更清洁代码的替代方法。

首先，我们可以说Map 数据结构虽然被许多人熟知但很少使用，其实它的作用不容小觑。本文将重点讨论一些基本概念，并明确 Map 的目的以及何时可以发挥其优势。

大 O 表示法是什么？

理解大 O 表示法对于分析算法和数据结构的效率和可扩展性至关重要。它允许开发者评估随着输入数据大小的增加，算法的表现如何。该表示法提供了一种标准化的方法来表达算法运行时间最坏情况下的变化与输入大小之间的关系。作为开发者，选择具有良好时间复杂度的算法和数据结构以确保高效性能，特别是处理大型数据集时尤为重要。

Untitled.png

Untitled 1.png

find()方法是如何工作的？

众所周知，JavaScript 中的 find()方法对数组执行线性搜索。它返回第一个满足给定条件的元素，并遍历所有数据直到找到该元素。因此，在最坏的情况下，即要找的项目是数组的最后一个元素，我们说它的时间复杂度是 O(n)。这种情况在 Aditya Bhargava 的《Grokking Algorithms》一书中被举例说明如下：

Untitled 2.png 假设我们是市场的新员工，试图从我们的产品列表中找出顾客购买的产品价格。我们对每一件商品从头到尾重复这个过程。听起来并不是一个实际的工作体验，对吧？现在想象有一个更有经验的同事，他能记住所有产品的价格，并能直接告诉你每个产品的价格。听起来很不错，对吧？事实上，这位经验丰富的同事能够以 O(1)的时间复杂度——即与产品数量无关的常数时间——给出所有价格，这就是我们的哈希映射。让我们更深入地了解一下哈希映射。

什么是哈希映射以及它有多快？

哈希映射本质上是一种存储结构，可以将键映射到对应的值。当你提供一个键时，它会返回与该键相关的值，并且你可以使用相同的键值在这些哈希表中执行插入和删除操作。因此，它是一种非常快速的存储系统，对于这些操作的时间复杂度都为 O(1)。

Untitled 3.png 然而，有一些需要注意的地方；例如，使用不良的哈希函数分布的键可能会导致冲突，这会使搜索变得困难。或者哈希表的填充率超过大约 70%也可能导致性能损失。

何时以及为何使用 Map 优于使用数组？

在项目中，我们通常更多地在用户交互组件中使用 find()方法。例如，我们需要根据动态路由中的参数获取数据、操纵特定数据或检索从下拉菜单中选择或输入字段中输入的数据的情况，都需要像 find 和有时 filter 这样的方法。所有这些操作都是线性的，时间复杂度为 O(n)。让我们看看使用 Map 完成所有这些任务是多么简单。

Untitled 4.png

Untitled 5.png

Untitled 5.png

什么是 Map？

JavaScript 中的 Map 提供了一种用于将键映射到值的数据结构。与由一系列数字索引的数组不同，Map 可以使用任何值作为键。这种灵活性使得 Map 在各种场景中都非常有用，尤其是在处理复杂数据结构或需要快速访问数据的情况下。 下面是一个示例代码片段，展示如何将数据转换为 Map，并确保键是唯一的：

let hashData = null;
const getUsers = async () => {
    try {
        const response = await fetch("https://dummyjson.com/users");
        const data = await response.json();
        hashData = new Map(data.users.map((user) => [user.username, user]));
        // username is unique
    } catch (error) {
        console.error("Hata:", error);
    }
};

通过这种方式，我们可以使用 get 方法在 Map 数据结构中访问与键关联的值，时间复杂度为 O(1)，与数据的大小无关。此外，使用 has 方法，我们可以用 O(1)的时间复杂度来检查数据是否存在，而不是使用 includes 方法的时间复杂度为 O(n)。键是区分大小写的，这为我们提供了便利。Map 数据结构的方法包括：

Untitled 7.png

  • get(key)：返回与指定键关联的值。
  • has(key)：检查是否有与指定键关联的值。
  • set(key, value)：设置键的值。
  • delete(key)：删除键的值。

Untitled 8.png

创建和维护这个博客以及相关的库带来了十分庞大的工作量，即便我十分热爱它们，仍然需要你们的支持。或者转发文章。通过赞助我，可以让我有能投入更多时间与精力在创造新内容，开发新功能上。赞助我最好的办法是微信公众号看看广告。

avatar
文章
阅读
粉丝