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

0 阅读2分钟

🧩 一、数组处理

函数功能示例
_.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'

📌 推荐使用组合

举个业务中常见的例子:

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

🧰 快速参考图(Mermaid)

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

📚 推荐练习项目

适用水平项目
初级在 Vue/React 中封装表格查询功能,使用 _.get/_.merge
中级实现“标签去重+分组显示”功能
高级封装数据格式转换器(深层字段映射、字段重命名)