Lodash 的终极进化Radashi

发布于:2025-08-07 ⋅ 阅读:(14) ⋅ 点赞:(0)

前言

Lodash 是一个非常流行、功能强大且成熟的 JavaScript 实用工具库,它提供了大量用于处理数组、对象、字符串、函数等数据类型的实用函数。

尤其它提供的深度操作、高阶函数(防抖节流)、强大的集合处理工具以及函数式编程支持等,在许多项目中具有重要价值。

首次和Lodash握手,是因为一个“用户”频繁点击按钮触发接口不停被调用的bug……

项目开发中对“防抖”的普遍需求应运而生。

开始是自己写一个“setTimeout”函数,并通过clear清理来控制触发,后来—始终觉得自己写的函数“简陋了”。

于是开始使用功能极其丰富的 JavaScript 工具库——lodash:

包含数百个方法,覆盖了日常开发中的绝大多数数据处理和操作需求,例如:

  • 数组处理: mapfilterreducefindfindIndexflattenchunkuniqsortBygroupBykeyBy 等(许多功能原生 JS 现在也有,但 Lodash 提供了更多选项或更便捷的语法)。

  • 对象处理: assign (类似 Object.assign), merge (深度合并), pickomitkeysvalueshasgetsetclone (浅拷贝), cloneDeep (深拷贝), isEqual (深度比较) 等。cloneDeep 和 isEqual 尤其常用且省心。

  • 函数处理: debouncethrottle (控制函数执行频率,防抖节流), currypartial (函数柯里化和偏应用), memoize (函数记忆化) 等。debounce 和 throttle 是 Lodash 的明星函数。

  • 集合处理: 统一处理数组和对象的方法 (forEachmapreduce 等可以同时处理数组和对象)。

  • 实用工具: randomrangetimesisEmptyisNilisObjectisFunction 等类型判断和辅助函数。

  • 字符串处理: camelCasekebabCasesnakeCasecapitalizetrimpad 等格式化函数。

Lodash 的痛点

ES6 及后续标准的全面普及,让 Lodash 的光芒逐渐暗淡。

Array.fromObject.assign、可选链 ?.、空值合并 ?? 等原生语法糖,覆盖了 Lodash80% 的日常用例。

Tree-Shaking 与 Bundle 分析工具的兴起,让“按需引入”不再是 Lodash 的专利;相反,Lodash 的 ES5 底层实现庞大的 CommonJS 封装 反而成为打包体积的累赘。

  • 诞生于 ES5,语法老旧
    大量 arguments 对象、for 循环、函数嵌套,与现代箭头函数、解构格格不入,读源码像在“考古”。

  • Tree-Shaking 不友好
    内部交叉引用成“蜘蛛网”,只引一个 debounce 也打包 20+ 辅助函数。

  • 巨型单包发布
    CommonJS 默认导出整个命名空间,体积只增不减;想用 ESM 还得额外装 lodash-es

  • 原生能力已覆盖
    ES2020+ 已有 structuredCloneObject.fromEntriesArray.flatMap 等,Lodash 仍保留历史兼容分支。

  • 配置繁琐
    babel-plugin-lodashlodash-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 可以作为脚手架的默认选项~


网站公告

今日签到

点亮在社区的每一天
去签到