前言
Lodash 是一个非常流行、功能强大且成熟的 JavaScript 实用工具库,它提供了大量用于处理数组、对象、字符串、函数等数据类型的实用函数。
尤其它提供的深度操作、高阶函数(防抖节流)、强大的集合处理工具以及函数式编程支持等,在许多项目中具有重要价值。
首次和Lodash握手,是因为一个“用户”频繁点击按钮触发接口不停被调用的bug……
项目开发中对“防抖”的普遍需求应运而生。
开始是自己写一个“setTimeout”函数,并通过clear清理来控制触发,后来—始终觉得自己写的函数“简陋了”。
于是开始使用功能极其丰富的 JavaScript 工具库——lodash:
包含数百个方法,覆盖了日常开发中的绝大多数数据处理和操作需求,例如:
数组处理:
map
,filter
,reduce
,find
,findIndex
,flatten
,chunk
,uniq
,sortBy
,groupBy
,keyBy
等(许多功能原生 JS 现在也有,但 Lodash 提供了更多选项或更便捷的语法)。对象处理:
assign
(类似Object.assign
),merge
(深度合并),pick
,omit
,keys
,values
,has
,get
,set
,clone
(浅拷贝),cloneDeep
(深拷贝),isEqual
(深度比较) 等。cloneDeep
和isEqual
尤其常用且省心。函数处理:
debounce
,throttle
(控制函数执行频率,防抖节流),curry
,partial
(函数柯里化和偏应用),memoize
(函数记忆化) 等。debounce
和throttle
是 Lodash 的明星函数。集合处理: 统一处理数组和对象的方法 (
forEach
,map
,reduce
等可以同时处理数组和对象)。实用工具:
random
,range
,times
,isEmpty
,isNil
,isObject
,isFunction
等类型判断和辅助函数。字符串处理:
camelCase
,kebabCase
,snakeCase
,capitalize
,trim
,pad
等格式化函数。
Lodash 的痛点
ES6 及后续标准的全面普及,让 Lodash 的光芒逐渐暗淡。
Array.from
、Object.assign
、可选链 ?.
、空值合并 ??
等原生语法糖,覆盖了 Lodash80%
的日常用例。
Tree-Shaking
与 Bundle
分析工具的兴起,让“按需引入”不再是 Lodash 的专利;相反,Lodash 的 ES5 底层实现、庞大的 CommonJS 封装 反而成为打包体积的累赘。
诞生于 ES5,语法老旧
大量arguments
对象、for
循环、函数嵌套,与现代箭头函数、解构格格不入,读源码像在“考古”。Tree-Shaking 不友好
内部交叉引用成“蜘蛛网”,只引一个debounce
也打包 20+ 辅助函数。巨型单包发布
CommonJS 默认导出整个命名空间,体积只增不减;想用 ESM 还得额外装lodash-es
。原生能力已覆盖
ES2020+ 已有structuredClone
、Object.fromEntries
、Array.flatMap
等,Lodash 仍保留历史兼容分支。配置繁琐
babel-plugin-lodash
、lodash-webpack-plugin
一出错就“一夜回到解放前”。类型支持滞后
@types/lodash
与源码不同步,版本差异导致类型报错。
使用vue3后问题尤为明显……
Radash 横空出世
- 100% TypeScript 编写,类型提示一步到位;
- 函数粒度的 ES Module 导出,天然支持 Tree-Shaking;
- 源码简洁、单测覆盖率高,社区反响热烈。
但好景不长,2023 年 9 月后,Radash 作者因精力原因 停止维护。
Radashi 一个“继承 + 超越”的活跃分支
更新:每天都有 PR 合并,凌晨 5 点自动发 beta 包;
性能:每个 PR 自动跑 benchmark,拒绝负优化;
体积:新增函数若 >1 KB 即触发 review;
文档API: 多语言自动生成 + 持续更新
安装和迁移
npm i radashi@^12
,全局替换 from 'radash'
→ from 'radashi'
,0 成本切换。
确保 vite.config.ts
开启 ESBuild 压缩即可自动摇树:
export default defineConfig({
plugins: [vue()],
esbuild: { drop: ['console', 'debugger'] }
})
丝滑的迁移-旧项目升级
# 1. 卸载旧库
npm remove radash lodash
# 2. 安装新库
npm i radashi@^12
# 3. 全局替换(VS Code)
# 查找:from 'radash'
# 替换:from 'radashi'
# 4. 构建/测试
npm run build && npm test
若出现类型提示差异,也可以对照官方 Lodash Parity 页面: https://radashi.js.org/lodash-parity 轻松的修改。
Vue 3 极速上手
在之前头疼的vue3表现尤为出色:兼容ts,语法上——开箱即用
防抖搜索(debounce
)
<script setup lang="ts">
import { debounce } from 'radashi'
import { ref } from 'vue'
const keyword = ref('')
// 300 ms 防抖,自动推导类型
const onInput = debounce((e: Event) => {
keyword.value = (e.target as HTMLInputElement).value
// TODO: 触发搜索 API
}, 300)
</script>
<template>
<input placeholder="Search…" @input="onInput" />
<p>查询内容:{{ keyword }}</p>
</template>
深拷贝 + 安全取值(cloneDeep
& get
)
<script setup lang="ts">
import { cloneDeep, get } from 'radashi'
import { reactive } from 'vue'
const source = reactive({ a: { b: [10, 20, 30] } })
const copy = cloneDeep(source)
// 安全读取深层路径,不存在返回默认值 0
const value = computed(() => get(copy, 'a.b.2', 0)) // 30
</script>
<template>
<p>深拷贝后读取:{{ value }}</p>
</template>
总结
Lodash 是一个久经考验、功能极其丰富的 JavaScript 工具库。它在简化代码、提高开发效率、处理复杂数据操作以及提供跨浏览器一致性方面表现出色。虽然现代 JavaScript 原生特性的发展减少了对 Lodash 的绝对依赖,但它提供的深度操作、高阶函数(防抖节流)、强大的集合处理工具以及函数式编程支持等,使其在许多项目中仍然具有重要价值。关键在于明智地、按需地使用它,而不是盲目引入整个库。
从 Lodash 的 “大而全” 到 Radashi 的 “小而精”,前端工具库完成了从 “功能覆盖” 到 “体验优先” 的范式转移。
对于新的vue3或react项目,优先使用原生特性,引入 Radashi 可以作为脚手架的默认选项~