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