又来了一个工具库 es-toolkit – 和 Lodash 对比一下

欢迎大家来到IT世界,在知识的湖畔探索吧!

前端的工具库，最早的热门库为 Underscore，后来 Lodash 逐渐替代 Underscore，成为了主流工具库。Lodash 的灵感来源于 Underscore，在随后的迭代中，Lodash 的功能、兼容性、模块化能力、社区生态都超过了 Underscore，基本是前端项目的工具集标配，除了 Lodash, Ramda 是另外一个比较热门的工具库。

不过 Lodash 的最新版本发布是在三年前，在前端生态喜欢不断推新和 ES 语法每年都有在更新的推动下，新的更现代化工具集库就开始出现了，比如 Radash 和 es-toolkit 等等。Radash 的 1.0.0 版本是在三年前发布，现在已更新到 12.1.0，而 es-toolkit 的第一个版本发布仅仅是两个月前。

Radash 的特点是：

• 它是用 Typescript 编写的
• 源码中使用的语法更加的新
• 提供了一些 Lodash 没有的实用方法（tryit、parallel、retry 等等）

更多可以查看这篇文章了解情况：Lodash 已过时，试试它吧！[1]

本文主要介绍 es-toolkit 的特点。

es-toolkit 的特点

es-toolkit 的特点有：

• 通过其现代化的实现，es-toolkit 显著减少了其包体积，与 Lodash 等其他库相比，可以减少高达 97%。
• es-toolkit 设计时考虑了性能，与类似 Lodash 的替代库相比，平均性能提升了2倍。
• 全面的运行时支持，除了 Web 和 Node，还支持了 Bun、Deno 运行环境，可以通过 JSR[2] 安装到 Deno。

打包体积

官方给出的相关方法的打包体积数据，可以看到 es-toolkit 打包体积小了很多。

欢迎大家来到IT世界,在知识的湖畔探索吧!

但是你要是实际去看看两边的 API 能力，就会发现这个数据有些水分，从下图就可以看出 Lodash 的 debounce 支持的能力更多。

接着来看下 es-toolkit 的 debounce 源码：

export function debounce 
  
    void>( func: F, debounceMs: number, { signal }: DebounceOptions = {} ): F & { cancel: () => void } { let timeoutId: number | null = null; const debounced = function (...args: Parameters 
   
     ) { if (timeoutId !== null) { clearTimeout(timeoutId); } if (signal?.aborted) { return; } timeoutId = setTimeout(() => { func(...args); timeoutId = null; }, debounceMs) as any; } as F & { cancel: () => void }; const onAbort = function () { debounced.cancel(); }; debounced.cancel = function () { if (timeoutId !== null) { clearTimeout(timeoutId); timeoutId = null; } }; signal?.addEventListener('abort', onAbort, { once: true }); return debounced; } 
    
  

欢迎大家来到IT世界,在知识的湖畔探索吧!

可以看到 es-toolkit 的 debounce 源码相对比较简单，其中 cancel 方法是通过外部传入一个 AbortController 示例来完成的，API 是比较现代化，但是使用上却没有 Lodash 方便。

欢迎大家来到IT世界,在知识的湖畔探索吧!// lodash cancel debounce const lodashDeounceFn = lodash.debounce(() => console.log(1), 250)； lodashDeounceFn(); lodashDeounceFn.cancel() // es-toolkit cancel debouce const controller = new AbortController(); const signal = controller.signal; const debouncedWithSignalFunction = debounce(() => console.log(1), 250, { signal }); // 如果在此期间没有再次调用，则在1秒后输出 'Function executed' debouncedWithSignalFunction(); // 取消了防抖函数的调用 controller.abort(); 

性能对比

官方给的性能对比数据：

和打包体积类似，虽然 es-toolkit 的 omit 方法性能更高，但是两边支持的能力其实是不太一样的。

Lodash 的 omit 方法可以支持深层的对象属性忽略，而 es-toolkit 只能是第一层属性的忽略。

// es-toolkit 的源码 export function omit 
   
     , K extends keyof T>(obj: T, keys: K[]): Omit 
    
      { const result = { ...obj }; for (const key of keys) { delete result[key]; } return result as Omit 
     
       ; } // es-toolkit 的 omit 的使用 omit({ a: { b: 1 }, c: 2 }, ['a.b', 'c']); // 返回是 { a: { b: 1 } } // lodash 的 omit 的使用 lodash.omit({ a: { b: 1 }, c: 2 }, ['a.b', 'c']); // 返回 { a: {} } 
      
     
   

es-toolkit 中的一些方法

flattenObject

扁平化的对象。

欢迎大家来到IT世界,在知识的湖畔探索吧!const nestedObject = { a: { b: { c: 1 } }, d: [2, 3] }; const flattened = flattenObject(nestedObject); console.log(flattened); // 输出: // { // 'a.b.c': 1, // 'd.0': 2, // 'd.1': 3 // } 

camelCase

字符串转换为驼峰命名法

import { camelCase } from 'es-toolkit/string'; camelCase('camelCase'); // 返回 'camelCase' camelCase('some whitespace'); // 返回 'someWhitespace' camelCase('hyphen-text'); // 返回 'hyphenText' camelCase('HTTPRequest'); // 返回 'httpRequest' 

delay

延迟执行代码指定的毫秒数，支持一个可选的 AbortSignal 来取消延迟。

欢迎大家来到IT世界,在知识的湖畔探索吧!async function foo() { const controller = new AbortController(); const signal = controller.signal; setTimeout(() => controller.abort(), 50); // 在 50 毫秒后取消延迟 try { await delay(1000, { signal }); } catch (error) { console.log(error); // 将会输出 'The operation was aborted' } } 

拓展

无论是 Radash 还是 es-toolkit，提供的 clone 方法都是浅复制，深复制的话就要使用 JS 原生的现代化方法 structuredClone。不过 structuredClone 不能复制函数和 DOM 节点等等，如果要复制的对象中包括此类属性，方法就会抛出异常，相对来说 Lodash 的复制方法功能更强大，使用也更方便。

const obj = { n: 2 } const objWithFn = { n: 2, f: () => console.log(1) } const fn = () => { console.log('fn') } // lodash _.cloneDeep(obj) // 返回 { n: 2 } _.cloneDeep(objWithFn).f() // 输出 1 _.cloneDeep(fn) // 返回 {} // 原生方法 structuredClone(obj) // 返回 { n: 2 } structuredClone(objWithFn) // Uncaught DOMException: Failed to execute 'structuredClone' on 'Window' structuredClone(fn) // Uncaught DOMException: Failed to execute 'structuredClone' on 'Window' 

不过你使用 Radash 或者 es-toolkit 的话，也是可以单独安装 Lodash 的 CloneDeep, 对应包为 lodash.clonedeep。

总结

es-toolkit 相比与 Lodash 来说，还是有很长一段路要走，毕竟第一个版本是两个月前。不过 es-toolkit 中是有在用更现代化的 API，如果你这些感兴趣，可以参与 es-toolkit 的开源建设。

整体来看，喜欢尝鲜的可以在小项目试试 es-toolkit，其他情况还是建议使用 Lodash，或者可以使用 Radash。

参考资料

[1] Lodash 已过时，试试它吧！: https://juejin.cn/post/

[2] JSR: https://jsr.io/@es-toolkit/es-toolkit