✅ Lodash 常用函数精选(按用途分类)

🧩 一、数组处理

函数 功能 示例
_.chunk 将数组拆分成指定大小的块 _.chunk([1,2,3,4], 2) → [[1,2],[3,4]]
_.uniq 去重 _.uniq([1,2,2,3]) → [1,2,3]
_.flatten / _.flattenDeep 扁平化数组 _.flatten([1,[2,[3]]]) → [1,2,[3]]
_.intersection 求交集 _.intersection([1,2],[2,3]) → [2]
_.difference 求差集 _.difference([1,2,3],[2]) → [1,3]
_.zip 多数组按索引组合 _.zip(['a','b'],[1,2]) → [['a',1],['b',2]]

🧱 二、对象操作

函数 功能 示例
_.get 安全取值(避免深层访问报错) _.get(obj, 'a.b.c', '默认')
_.set 安全赋值 _.set(obj, 'a.b.c', 123)
_.merge 深度合并对象 _.merge(obj1, obj2)
_.omit / _.pick 删除/保留指定属性 _.omit(user, ['password'])
_.cloneDeep 深拷贝 _.cloneDeep(obj)

🔧 三、函数工具

函数 功能 示例
_.debounce 防抖 输入框防止频繁触发请求
_.throttle 节流 滚动监听时控制触发频率
_.once 只执行一次 初始化操作
_.memoize 缓存函数调用结果 重复调用节省性能

💡Vue 和 React 中常与防抖节流配合使用!


📊 四、集合处理(对象数组常用)

函数 功能 示例
_.groupBy 按字段分组 _.groupBy(users, 'age')
_.orderBy 排序 _.orderBy(users, ['age'], ['desc'])
_.filter 条件过滤(增强版) _.filter(users, {active: true})
_.map 转换集合 _.map(users, 'name')
_.find / _.findLast 查找符合条件的第一项 _.find(users, {id: 1})

🧠 五、类型判断

函数 功能 示例
_.isArray 判断是否数组 _.isArray([])
_.isEmpty 判断是否为空 _.isEmpty({}) → true
_.isEqual 判断值是否深度相等 _.isEqual(obj1, obj2)
_.isPlainObject 是否普通对象 _.isPlainObject({})

🧪 六、字符串处理

函数 功能 示例
_.camelCase 转驼峰 _.camelCase('hello world') → 'helloWorld'
_.kebabCase 转中划线格式 _.kebabCase('Hello World') → 'hello-world'
_.capitalize 首字母大写 _.capitalize('hello') → 'Hello'
_.trim 去除两端空格 _.trim(' abc ') → 'abc'

📌 推荐使用组合

举个业务中常见的例子:

less 复制代码
ts
复制编辑
// 多维对象中取值 + 判断是否为空
if (!_.isEmpty(_.get(userInfo, 'profile.name'))) {
  console.log('用户已填写名称');
}

🧰 快速参考图(Mermaid)

css 复制代码
mermaid
复制编辑
graph LR
A[Lodash核心函数] --> B[数组类]
A --> C[对象类]
A --> D[函数类]
A --> E[集合类]
A --> F[类型判断]
A --> G[字符串类]

📚 推荐练习项目

适用水平 项目
初级 在 Vue/React 中封装表格查询功能,使用 _.get/_.merge
中级 实现"标签去重+分组显示"功能
高级 封装数据格式转换器(深层字段映射、字段重命名)
相关推荐
用户81274828151201 分钟前
安卓java端service如何在native进程进行访问-跨进程通讯高端知识
前端
Shirley~~2 分钟前
Web Audio API
前端
TEC_INO2 分钟前
STM32_11:DMA
java·前端·stm32
鹏北海3 分钟前
qiankun微前端通信与路由方案总结
前端·微服务·架构
韩曙亮4 分钟前
【Web APIs】浏览器本地存储 ② ( window.sessionStorage 本地存储常用 API 简介 | 代码示例 )
开发语言·前端·javascript·localstorage·sessionstorage·web apis·浏览器本地存储
time_rg5 分钟前
深入理解react——2. Concurrent Mode
前端·react.js
0_16 分钟前
封装了一个vue版本 Pag组件
前端·javascript·vue.js
Stirner8 分钟前
A2UI : 以动态 UI 代替 LLM 文本输出的方案
前端·llm·agent
Code知行合壹11 分钟前
Vue.js进阶
前端·javascript·vue.js
我叫唧唧波16 分钟前
【微前端】qiankun基础
前端·前端框架