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