阅读视图

发现新文章,点击刷新页面。

✅ 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'

📌 推荐使用组合

举个业务中常见的例子:

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
中级 实现“标签去重+分组显示”功能
高级 封装数据格式转换器(深层字段映射、字段重命名)
❌