es-toolkit，Lodash 的替代品

作者：Rishi Purwar✏️

如果您构建 JavaScript 应用程序已经有一段时间了，您可能使用过 Lodash 等实用程序库。这些库包含有用的函数，使 JavaScript 编码变得更容易、更高效。但随着您的项目的增长并且您开始使用更多的实用函数，您可能会注意到您的包大小也开始增加。

当您依赖像 Lodash 这样的重型库时尤其如此，这让您想知道是否有更好的替代方案。

这就是 es-toolkit 的用武之地 - 一个现代的、高性能的 JavaScript 实用程序库，它是轻量级的，并且具有可靠的 TypeScript 支持，使其成为 Lodash 等流行库的绝佳替代品。

以下是 es-toolkit 和 Lodash 之间的主要比较：

• es-toolkit 提供与 Lodash 类似的关键实用函数，涵盖函数、数组、对象、字符串、数学、谓词和 Promise 等领域
• es-toolkit 的函数通常比 Lodash 的函数更快，因为它们在实现中使用现代 JavaScript API 并使用 TypeScript 进行类型检查，从而减少了对额外防御代码的需求。
• 性能基准测试表明，es-toolkit 函数的性能优于 Lodash 等效项，有时甚至明显领先
• 与 Lodash 的同类函数相比，es-toolkit 的函数包大小明显更小，从而实现更快的加载时间和更好的性能
• es-toolkit 通过利用现代 JavaScript 功能并避免 Lodash 中的相互依赖性来解决性能和包大小挑战
• es-toolkit 函数大多是独立的，可以防止无意中包含不必要的代码，这与 Lodash 不同，实用函数通常是相互依赖的

让我们深入了解这些差异的本质，看看如何在 JavaScript 项目中使用 es-toolkit。

es-toolkit的主要特点

以下是 es-toolkit 带来的快速浏览：

• 功能包括用于缓存函数结果的 memoize 和用于限制函数调用频率的 debounce
• 像uniq这样的数组可以过滤掉重复项和差异来找出数组之间的不同之处
• 用于处理JavaScript对象的工具，例如用于深度克隆的cloneDeep和用于将嵌套对象转换为平面结构的flattenObject
• 字符串操作工具，包括 kebabCase 将字符串转换为 kebab-case
• 数学助手，例如 random 来生成随机数，round 来四舍五入
• 类型保护函数（如 isNil）可轻松检查 null 或未定义值
• 用于处理异步代码的实用程序，例如延迟暂停执行一段时间

性能和捆绑包大小比较

为了真正了解 es-toolkit 的优势，让我们将其性能和捆绑包大小与 Lodash 进行比较。

表现

es-toolkit 的函数通常比 Lodash 的函数更快，因为它们在实现中使用现代 JavaScript API。例如，es-toolkit的omit函数比lodash的omit函数快约11.8倍。

下表比较了 es-toolkit 和 lodash-es 对于各种功能的性能：

Function	es-toolkit@0.0.1	lodash-es@4.17.21	Difference
omit	4,767,360 times	403,624 times	11.8×
pick	9,121,839 times	2,663,072 times	3.43×
differenceWith	9,291,897 times	4,275,222 times	2.17×
difference	10,436,101 times	5,155,631 times	2.02×
intersectionWith	8,074,722 times	3,814,479 times	2.12×
intersection	9,999,571 times	4,630,316 times	2.15×
unionBy	6,435,983 times	3,794,899 times	1.69×
union	5,059,209 times	4,771,400 times	1.06×
dropRightWhile	7,529,559 times	5,606,439 times	1.34×
groupBy	5,000,235 times	5,206,286 times	0.96×

捆绑尺寸

当谈到捆绑包大小时，es-toolkit 确实很出色。较小的捆绑包大小意味着您的 Web 应用程序加载速度更快且性能更好，尤其是在较慢的网络上。

以下是 es-toolkit 和 lodash-es 中一些常见函数的包大小比较：

Function	es-toolkit@0.0.1	lodash-es@4.17.21	Difference
sample	88 bytes	2,000 bytes	-95.6 percent
difference	91 bytes	3,190 bytes	-97.2 percent
sum	152 bytes	413 bytes	-63.2 percent
debounce	144 bytes	1,400 bytes	-89.7 percent
throttle	110 bytes	1,460 bytes	-92.5 percent
pick	657 bytes	3,860 bytes	-83.0 percent
zip	797 bytes	1,790 bytes	-55.5 percent

es-toolkit 的功能比 Lodash 的功能要小得多。例如，es-toolkit 中的示例函数只有 88 字节，而 Lodash 中的相同函数有 2,000 字节——小了近 96%！

在 JavaScript 应用程序中使用 es-toolkit

让我们看一些示例，看看在 JavaScript 应用程序中使用 es-toolkit 是多么容易。在本节中，我们将探讨 es-toolkit 如何处理常见任务，例如去抖动、限制、从对象中选取特定属性以及从数组中删除重复项。

你猜怎么着？为了让事情变得更加简单，我在 GitHub 上整理了一个入门代码存储库，您可以立即克隆并开始试验。您将找到我们将介绍的所有示例的 HTML 和 CSS 代码，以及入门所需的一切。查看此处的存储库并继续操作。

去抖动示例

假设您正在为一个网站构建一个搜索功能，用户可以在其中查找有关不同主题的信息。

您希望在用户键入时获取数据，但不想为每次击键发送请求；否则，您可能会因过多的调用而淹没 API。这就是 es-toolkit 的去抖动功能派上用场的地方。

工作原理如下：

import { debounce } from "es-toolkit";

// a function that simulates an API call
function fetchData(query) {
  console.log(`Fetching data for: ${query}`);
}

// Using es-toolkit debounce function
const debouncedFetchData = debounce(fetchData, 1000);

document.getElementById("search-input").addEventListener("input", (event) => {
    const query = event.target.value;
    debouncedSearch(query);
});

在下面的演示中，尽管我输入了五个字母，但 fetchData 函数只有在我停止输入一秒钟后才会被调用。

这样，我们就可以避免使用 debounce 函数在每次按键时发出不必要的 API 请求。
 

油门示例

假设您的网页上有一个按钮，单击该按钮会加载更多帖子。为了防止点击按钮太快而导致多次 API 调用，您可以使用 es-toolkit 中的throttle 功能。它确保 API 调用仅在设定的时间间隔内发生，即使按钮被单击多次也是如此。

使用方法如下：

// Throttle Example
import { throttle } from "es-toolkit";

// Function to fetch posts from an API
async function fetchPosts() {
  console.log("Fetching new posts...");
  const response = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await response.json();
  console.log("Posts fetched:", posts);
}
// Create a throttled version of fetchPosts
const throttledFetchPosts = throttle(fetchPosts, 2000);

// Set up an event listener on the button
document.getElementById("fetch-more-posts").addEventListener("click", () => {
  console.log("button clicked");
  throttledFetchPosts();
});

在这个例子中，即使用户快速点击“Fetch More Posts”按钮，fetchPosts 函数也只会每两秒触发一次，如下面的演示所示。
 

选取示例

假设您有详细的用户个人资料数据，但您只想在用户摘要组件中显示特定属性，例如用户名、电子邮件和年龄。选择功能可以帮助您轻松提取这些属性。

以下是其工作原理的演示：

// Pick Example
import { pick } from "es-toolkit";

// dummy user data
const user = {
  id: 1,
  username: "johndoe",
  firstName: "John",
  lastName: "Doe",
  email: "john.doe@example.com",
  age: 30,
  address: {
    street: "123 Main St",
    city: "Anytown",
    country: "USA",
  },
  phoneNumber: "1234-5678",
};

// Use pick to select specific properties
const pickedUser = pick(user, ["username", "email", "age"]);

console.log("pickedUser", pickedUser)

在此示例中，pick 函数从用户对象中提取用户名、电子邮件和年龄属性。控制台日志将输出：

import { debounce } from "es-toolkit";

// a function that simulates an API call
function fetchData(query) {
  console.log(`Fetching data for: ${query}`);
}

// Using es-toolkit debounce function
const debouncedFetchData = debounce(fetchData, 1000);

document.getElementById("search-input").addEventListener("input", (event) => {
    const query = event.target.value;
    debouncedSearch(query);
});

独特的例子

想象一下您正在运行一个博客，用户可以在其中添加标签来对他们的帖子进行分类。您要确保每个标签仅出现一次。这就是 es-toolkit 中的 uniq 函数超级有用的地方。它可以帮助您从数组中过滤掉重复项并获取唯一标签的列表。

这是一个实际示例：

// Throttle Example
import { throttle } from "es-toolkit";

// Function to fetch posts from an API
async function fetchPosts() {
  console.log("Fetching new posts...");
  const response = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await response.json();
  console.log("Posts fetched:", posts);
}
// Create a throttled version of fetchPosts
const throttledFetchPosts = throttle(fetchPosts, 2000);

// Set up an event listener on the button
document.getElementById("fetch-more-posts").addEventListener("click", () => {
  console.log("button clicked");
  throttledFetchPosts();
});

在上面的示例中，uniq 函数从标签数组中删除重复项。控制台日志将输出：

// Pick Example
import { pick } from "es-toolkit";

// dummy user data
const user = {
  id: 1,
  username: "johndoe",
  firstName: "John",
  lastName: "Doe",
  email: "john.doe@example.com",
  age: 30,
  address: {
    street: "123 Main St",
    city: "Anytown",
    country: "USA",
  },
  phoneNumber: "1234-5678",
};

// Use pick to select specific properties
const pickedUser = pick(user, ["username", "email", "age"]);

console.log("pickedUser", pickedUser)

es-toolkit 如何解决性能和捆绑包大小挑战

您可能对 es-toolkit 如何应对这些挑战感到好奇。在底层，es-toolkit 利用现代 JavaScript API 来提供更快的性能和更小的包大小。

最重要的是，es-toolkit 使用 TypeScript，这有助于删除许多通常在运行时检查参数类型的额外防御代码。这不仅使代码运行更有效，而且还最大限度地减少了任何可能减慢速度的不必要的开销。

另一个关键区别是 Lodash 实用函数通常是相互依赖的，这意味着导入一个函数可能会同时引入许多其他函数。相比之下，es-toolkit 功能大多是独立的，这有助于保持包的轻量级。

要真正看到差异，您可以使用 webpack-bundle-analyzer 来可视化包的大小。我已经为您设置好了一切，因此您需要做的就是签出主分支并从克隆存储库的根运行 npm i && npm run build ，它将打开一个页面，其中包含有关您的包的所有详细信息。

下图显示了使用 es-toolkit 时的包大小。您可以看到大多数 es-toolkit 功能都是独立的，这导致包大小更小。

 

现在，让我们将上面示例中的 import 语句中的 es-toolkit 替换为 lodash-es，并再次运行 npm run build 以检查 lodash-es 包的大小。

下图显示 Lodash 函数大多是相互依赖的，仅导入一个函数时就会引入许多其他实用程序：

 

结论

es-toolkit 可以成为 Lodash 等实用程序库的绝佳替代品，尤其是当性能和包大小是关键考虑因素时。它的小包大小、现代 JavaScript 功能的使用以及可靠的 TypeScript 支持使其成为开发人员的绝佳选择。

我希望您发现 es-toolkit 的探索对您的 JavaScript 项目有所帮助，但不要就此停止！我鼓励您在自己的应用程序中尝试 es-toolkit，并在下面的评论中与我们分享您的经验。快乐编码！

---

您是否添加新的 JS 库来提高性能或构建新功能？如果他们反其道而行怎么办？

毫无疑问，前端变得越来越复杂。当您向应用程序添加新的 JavaScript 库和其他依赖项时，您需要更多的可见性以确保您的用户不会遇到未知问题。

LogRocket 是一个前端应用程序监控解决方案，可让您重放 JavaScript 错误，就像它们发生在您自己的浏览器中一样，以便您可以更有效地对错误做出反应。

LogRocket 可以与任何应用程序完美配合，无论框架如何，并且具有用于记录来自 Redux、Vuex 和 @ngrx/store 的其他上下文的插件。您无需猜测问题发生的原因，而是可以汇总并报告问题发生时应用程序所处的状态。 LogRocket 还监控您的应用程序的性能，报告客户端 CPU 负载、客户端内存使用情况等指标。

自信地构建 — 开始免费监控。

以上是es-toolkit，Lodash 的替代品的详细内容。更多信息请关注PHP中文网其他相关文章！