当前位置：首页 > news >正文

Lodash 的终极进化Radashi

news 2025/8/9 22:56:36

前言

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 可以作为脚手架的默认选项~

查看全文

http://www.dtcms.com/a/318207.html