作者：Rishi Purwar✏️
如果您构建 JavaScript 应用程序已经有一段时间了，您可能使用过 Lodash 等实用程序库。这些库包含有用的函数，使 JavaScript 编码变得更容易、更高效。但随着您的项目的增长并且您开始使用更多的实用函数，您可能会注意到您的包大小也开始增加。
当您依赖像 Lodash 这样的重型库时尤其如此，这让您想知道是否有更好的替代方案。
这就是 es-toolkit 的用武之地 - 一个现代的、高性能的 JavaScript 实用程序库，它是轻量级的，并且具有可靠的 TypeScript 支持，使其成为 Lodash 等流行库的绝佳替代品。
以下是 es-toolkit 和 Lodash 之间的主要比较：
让我们深入了解这些差异的本质，看看如何在 JavaScript 项目中使用 es-toolkit。
以下是 es-toolkit 带来的快速浏览：
为了真正了解 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 是多么容易。在本节中，我们将探讨 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 利用现代 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，并在下面的评论中与我们分享您的经验。快乐编码！
毫无疑问，前端变得越来越复杂。当您向应用程序添加新的 JavaScript 库和其他依赖项时，您需要更多的可见性以确保您的用户不会遇到未知问题。
LogRocket 是一个前端应用程序监控解决方案，可让您重放 JavaScript 错误，就像它们发生在您自己的浏览器中一样，以便您可以更有效地对错误做出反应。
LogRocket 可以与任何应用程序完美配合，无论框架如何，并且具有用于记录来自 Redux、Vuex 和 @ngrx/store 的其他上下文的插件。您无需猜测问题发生的原因，而是可以汇总并报告问题发生时应用程序所处的状态。 LogRocket 还监控您的应用程序的性能，报告客户端 CPU 负载、客户端内存使用情况等指标。
自信地构建 — 开始免费监控。
以上是es-toolkit，Lodash 的替代品的详细内容。更多信息请关注PHP中文网其他相关文章！
