作者：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中文網其他相關文章！
