前端 Loadsh 经常使用的方法总结

Lodash 是 JavaScript 前端最主流、最实用的工具函数库,原生 JS 处理数组、对象、数据判断、性能优化语法繁琐、容易踩坑,Lodash 可以一行代码解决绝大多数业务数据处理问题

一、数组高频操作

1. _groupBy

按自定义规则分组,返回键值对对象

适用:日历按天分组、类型分类、列表汇总

javascript 复制代码
const dayGroup = _.groupBy(currentMonthList, item => dayjs(item.date).format('YYYY-MM-DD'))

2. _.uniq 数组去重

一维数组快速去重

_.uniq(1,2,2,3) // 1,2,3

3. _.uniqBy 对象数组去重

根据对象某个字段去重

// 根据id去重 _.uniqBy(list, 'id')

4. _.filter 条件过滤

筛选符合条件数据,不改变原数组

_.filter(list, item => item.status === 1)

5. _.find 查找第一个匹配项

找到即返回,性能高于 filter

6. _.findLast 查找最后一个匹配项

找到即返回,性能高于 filter

_.find(list, { id: 10 })

7. _.sortBy 数组排序

支持多字段排序

// 先按时间,再按序号排序 _.sortBy(list, 'time', 'sort')

8. _.flattenDeep 深度扁平化

多维数组转一维

_.flattenDeep(1,\[2,\[3]]) // 1,2,3

9. _.reverse 反转数组

安全反转,不修改原数组

10._.take 截取前 N 条数据

11. _.takeRight 截取最后 N 条数据

_.take(list, 10) // 取前10条

12. _.difference 数组差值

A 数组有,B 数组没有的数据

13. _.intersection 数组交集

两个数组共同存在的数据

_.difference(1,2,3,2) // 1,3

二、对象高频操作

1. _.cloneDeep 深拷贝

彻底解决引用赋值问题,修改新对象不影响原对象

const copyData = _.cloneDeep(formData)

2. _.pick 提取对象指定字段

只保留需要的属性

_.pick(user, 'name','age','id')

3. _.omit 删除对象指定字段

剔除不需要、敏感字段

_.omit(user, 'password','token')

4. _.merge 对象深度合并

深层对象递归合并,优于 Object.assign 浅合并

_.merge(defaultForm, editForm)

5. _.isEqual 对象深度对比

对比两个对象内容是否完全一致,原生 === 对比地址无效

6. _.assign 浅合并对象

_.isEqual(obj1, obj2)

三、通用判断工具方法

1. _.isEmpty 万能判空

空数组、空对象、null、undefined、空字符串全部识别

_.isEmpty(\[\])

_.isEmpty({})

_.isEmpty(null)

2. _.isArray 判断是否数组

3. _.isObject 判断是否对象

4. .isString/.isNumber 类型判断

5. _.isNil 判断是否 null /undefined

四、函数性能优化

1. _.debounce 防抖

const search = _.debounce(()=>{},500)

2. _.throttle 节流

滚动、拖拽、高频点击,限制执行频率

3. _.delay 延迟执行

_.delay(()=>{},1000) // 1秒后执行

五、字符串 & 命名转换

1._.camelCase 转驼峰

_.camelCase('user-info') // userInfo

2. _.kebabCase 转短横线

_.kebabCase('userInfo') // user-info

3._.upperFirst 首字母大写

4. _.lowerCase 全部小写

六、随机数 & 工具方法

1 ._.random (min,max) 生成随机数

2. _.now () 获取时间戳

3. _.sample 随机取出数组一项

4. _.shuffle 打乱数组顺序
相关推荐
古茗前端团队1 小时前
急招!前端|测试|后端|产品(名额多,速来)
前端·后端·架构
Lsx_2 小时前
不只是 Prompt:用 Superpowers Skill 给 AI 编程装上工程化工作流
前端·ai编程·claude
小碗细面2 小时前
前端 Prompt 工程实战:如何搭建场景化 Prompt 库
前端·ai编程
阿瑞IT2 小时前
2026年 AI Agent 生产化落地全景:四大高频故障根因分析与工程解法
前端
木木剑光2 小时前
我开源了一个 React 组件库,沉淀了多个高频组件和实用 Hooks
前端·javascript·react.js
kyriewen2 小时前
DeepSeek API 高峰时段涨价 2 倍,便宜大碗的时代要结束了?
前端·ai编程·deepseek
Moment3 小时前
牛逼,NextJs 从 16.3 开始全面拥抱 Agent Native 🥰🥰🥰
前端·后端·面试
沸点小助手3 小时前
6月沸点活动获奖名单公示|本周互动话题上新🎊
前端·后端
Csvn3 小时前
React 19 `use()` 来了:以后数据加载可以不用 useEffect?
前端·react.js
没落英雄3 小时前
从零开始搭建一个 AI Agent —— LangChain + TypeScript 实战手记
前端·人工智能·架构