🧩 一、数组处理
函数 | 功能 | 示例 |
---|---|---|
_.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 |
中级 | 实现"标签去重+分组显示"功能 |
高级 | 封装数据格式转换器(深层字段映射、字段重命名) |