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