Lodash 入门：从零开始
起源与目标
前端开发中，数据处理占了业务逻辑的 "半壁江山"，但原生 JavaScript API 在复杂场景下总显得 "力不从心"。而 Lodash 作为前端生态中最经典的工具库之一，提供了很多处理数组、对象、字符串等的便捷方法，旨在简化常见的数组、对象、字符串、函数以及其他数据结构的操作。Lodash 并非 "花里胡哨的工具集合"，而是基于前端开发痛点诞生的 "解决方案库"。它的核心价值，在于用更优雅的方式解决 "原生 API 搞不定或搞不好" 的问题，彻底告别 "数据处理焦虑"。
由于原生 Lodash 库为了保持广泛浏览器兼容性，默认使用 CommonJS 模块格式（适用于Node.js环境和老版浏览器），这可能导致在现代前端项目中引入整个库时，即使只使用其中少数几个函数，也需加载整个库的代码，造成不必要的网络传输和客户端资源消耗。lodash-es 应运而生，旨在为那些支持ES模块的项目提供一个更轻量、更易于优化的Lodash版本。Lodash-es 是流行 JavaScript 工具库 Lodash 的 ES 模块版本，提供了与 lodash 完全一致的 API，但采用原生 ES Module 格式导出，能大幅简化开发中的数据处理、数组/对象操作、函数防抖节流、深拷贝等场景的代码，提升开发效率和代码健壮性。是现代前端工程的首选工具库，配合 Vite、Webpack、Rollup 等打包工具可以实现完美的 Tree Shaking，大幅减少产物体积。
- 官网：lodash.com/docs
- 中文网：www.lodashjs.com/
快速集成
安装依赖
如果正在使用 Node.js 的包管理器 npm，打开终端或命令提示符，进入项目根目录，然后执行以下命令：
bash
# 核心库（ES 模块版本）
npm install lodash-es按需引入
完成安装后，就可以在项目中导入并使用 lodash-es 提供的工具函数。Lodash-es 支持按需导入，可以显著减少打包体积，是现代 JavaScript 项目中的首选工具库。
javascript
// 单函数引入（推荐）
import { debounce } from 'lodash-es';
import { cloneDeep, merge } from 'lodash-es';
import chunk from 'lodash-es/chunk';
// 也可以从单独文件导入（更利于 Tree-shaking）
import debounce from 'lodash-es/debounce';
import throttle from 'lodash-es/throttle';核心高频功能
数组（Array）
lodash-es 提供了丰富的数组处理函数，涵盖分块、扁平化、去重、排序等常见场景。
| 函数 | 简要说明 | 示例 |
|---|---|---|
| uniq | 去重 | uniqBy([{id:1},{id:1},{id:2}], 'id') → [{id:1},{id:2}] |
| difference | 差集 | difference([1,2,3],[2,4]) → [1,3] |
| intersection | 交集 | intersection([1,2,3],[2,3,4]) → [2,3] |
| union | 并集 | union([1,2],[2,3]) → [1,2,3] |
| drop、dropRight | 去掉前/后 n 个元素 | drop([1,2,3], 1) → [2,3] |
| take、takeRight | 取前/后 n 个元素 | take([1,2,3], 2) → [1,2] |
| fill | 填充数组 | fill(Array(3), 'a') → ['a','a','a'] |
| pull、pullAll、pullAt | 原地移除元素 | pull([1,2,3,4], 2, 4) → [1,3] |
| remove | 原地移除满足条件的元素 | remove([1,2,3], n => n > 1) → 移除 [2,3]，返回 [2,3] |
| slice | 截取（不修改原数组） | slice([1,2,3,4], 1, 3) → [2,3] |
| sortedIndex、sortedIndexOf | 有序数组操作 | sortedIndex([10,20,30], 25) → 2 |
| without | 排除指定值（非原地） | without([1,2,3,4], 2, 4) → [1,3] |
| findIndex、findLastIndex | 查找索引 | findIndex([1,2,3], n => n > 1) → 1 |
javascript
import { chunk, uniqBy, intersection, flattenDeep } from 'lodash-es'
// 分页分块
const pages = chunk(dataList, 10)
// 按 id 去重
const uniqueUsers = uniqBy(userList, 'id')
// 求共同好友
const commonFriends = intersection(myFriends, theirFriends)
// 递归扁平嵌套数据
const flatList = flattenDeep(nestedData)集合（Collection）
lodash-es 集合方法统一处理数组和对象，涵盖分组、排序、查找、转换等数据操作。
| 函数 | 简要说明 | 示例 |
|---|---|---|
| forEach、forEachRight | 遍历 | forEach([1,2], n => console.log(n)) |
| map(coll, iter) | 映射 | map([1,2,3], n => n * 2) → [2,4,6] |
| filter(coll, pred) | 过滤 | filter([1,2,3], n => n > 1) → [2,3] |
| reject(coll, pred) | 排除满足条件的 | reject([1,2,3], n => n > 1) → [1] |
| find(coll, pred)、findLast | 查找第一个匹配 | find([1,2,3], n => n > 1) → 2 |
| every(coll, pred) | 是否全部满足 | every([1,2,3], n => n > 0) → true |
| some(coll, pred) | 是否有任一满足 | some([1,2,3], n => n > 2) → true |
| countBy(coll, iter) | 按条件计数分组 | countBy(['a','b','a']) → {a:2,b:1} |
| keyBy(coll, iter) | 按 key 组装对象 | keyBy([{id:1},{id:2}], 'id') → {1:{id:1},2:{id:2}} |
| groupBy | 按条件分组 | groupBy([1, 2, 3, 4, 5], n => n % 2 === 0 ? 'even' : 'odd') |
| sortBy | 排序 | sortBy(users, ['name','age']) |
| includes(coll, val, fromIndex) | 是否包含 | includes({a:1,b:2}, 2) → true |
| size(coll) | 集合大小 | size({a:1,b:2}) → 2 |
javascript
import { groupBy, orderBy, keyBy, countBy } from 'lodash-es'
// 按部门分组员工
const employeesByDept = groupBy(employees, 'department')
// 按年龄降序、姓名升序排序
const sorted = orderBy(users, ['age', 'name'], ['desc', 'asc'])
// 转 id 为 key 的映射，O(1) 查找
const userMap = keyBy(userList, 'id')
const user = userMap[targetId] // 快速查找
// 统计各角色人数
const roleCount = countBy(users, 'role')函数（Function）
函数工具包括防抖、节流、缓存等性能优化利器，是前端交互优化的常用手段。
| 函数 | 简要说明 | 示例 |
|---|---|---|
| debounce(fn, wait, options) | 防抖 | debounce(handleSearch, 300) |
| throttle(fn, wait, options) | 节流 | throttle(onScroll, 200) |
| once(fn) | 只执行一次 | once(initApp) |
| before(n, fn) | 最多执行 n 次 | before(3, log) |
| delay(fn, wait, ...args) | 延迟执行 | delay(() => console.log('hi'), 1000) |
javascript
import { debounce, throttle } from 'lodash-es'
// 防抖：输入停止 300ms 后触发搜索
const handleSearch = debounce((keyword) => {
fetchSearchResults(keyword)
}, 300)
// 节流：滚动加载，1 秒内最多触发一次
const handleScroll = throttle(() => {
loadMoreData()
}, 1000)语言（Lang）
类型判断、比较、转换。
| 函数 | 简要说明 | 示例 |
|---|---|---|
| isEqual | 深度比较相等 | isEqual({a:{b:1}}, {a:{b:1}}) → true |
| isMatch | 对象是否匹配子集 | isMatch({a:1,b:2}, {a:1}) → true |
| isEmpty | 是否为空 | isEmpty({}) → true; isEmpty([1]) → false |
| isArray | 是否数组 | isArray([1]) → true |
| isBoolean | 是否布尔值 | isBoolean(true) → true |
| isFunction | 是否函数 | isFunction(() => {}) → true |
| isInteger | 是否整数 | isInteger(3) → true |
| isNil | 是否 null/undefined | isNil(null) → true |
| isNumber | 是否数字 | isNumber(3) → true |
| isObject | 对象判断 | isPlainObject({}) → true; isPlainObject(new Date()) → false |
| isString | 字符串/符号判断 | isString('abc') → true |
| isDate | 特殊类型判断 | isDate(new Date()) → true |
| isMap、isSet | 集合类型判断 | isSet(new Set()) → true |
| isArrayBuffer、isTypedArray | 二进制类型判断 | isTypedArray(new Uint8Array()) → true |
| eq(a, b) | 严格相等 | eq(NaN, NaN) → true（区别于 ===） |
| gt、gte、lt、lte | 大于/大于等于/小于/小于等于 | gt(3, 1) → true |
| castArray | 将值转为数组 | castArray(1) → [1]; castArray([1]) → [1] |
| toArray(val) | 转为数组 | toArray({a:1,b:2}) → [1,2] |
| toInteger、toNumber toLength、toSafeInteger | 类型转换 | toInteger(3.7) → 3 |
数学（Math）
| 函数 | 简要说明 | 示例 |
|---|---|---|
| add、subtract、multiply、divide | 四则运算 | add(1, 2) → 3 |
| ceil、floor、round | 取整/四舍五入 | ceil(4.006, 2) → 4.01 |
| max、maxBy、min、minBy | 最大最小值 | maxBy([{n:1},{n:3},{n:2}], 'n') → {n:3} |
| mean | 平均值 | mean([4,6]) → 5 |
| sum | 求和 | sumBy([{n:1},{n:3}], 'n') → 4 |
数字（Number）
| 函数 | 简要说明 | 示例 |
|---|---|---|
| clamp(num, min, max) | 限制在范围内 | clamp(15, 0, 10) → 10 |
| inRange(num, start, end) | 是否在范围内 | inRange(3, 2, 4) → true |
| random(min, max, floating) | 随机数 | random(1, 10) → 5 |
对象（Object）
对象处理是 lodash 最核心的能力之一，涵盖安全取值赋值、深拷贝、属性筛选等，是日常开发中减少样板代码的利器。
| 函数 | 简要说明 | 示例 |
|---|---|---|
| get(obj, path, default) | 安全取值，路径不存在时返回默认值 | get({a:{b:1}}, 'a.b.c', 'N/A') → 'N/A' |
| set(obj, path, val) | 安全深度赋值 | set({}, 'a.b.c', 3) → {a:{b:{c:3}}} |
| has(obj, path) | 判断属性是否存在 | has({a:{b:1}}, 'a.b') → true |
| unset(obj, path) | 删除属性 | unset({a:{b:1}}, 'a.b') → true |
| merge(obj, ...sources) | 深度合并 | merge({a:1},{b:{c:2}}) → {a:1,b:{c:2}} |
| assign(obj, ...sources) | 浅合并 | assign({a:1},{b:2}) → {a:1,b:2} |
| pick(obj, paths) | 提取指定属性 | pick({a:1,b:2,c:3},['a','c']) → {a:1,c:3} |
| omit(obj, paths) | 排除指定属性 | omit({a:1,b:2,c:3},['b']) → {a:1,c:3} |
| keys(obj)、 values | 获取键/值 | keys({a:1,b:2}) → ['a','b'] |
| entries(obj) | 获取 key, value 对 | entries({a:1}) → [['a',1]] |
| fromPairs(pairs) | 数组转对象 | fromPairs([['a',1]]) → {a:1} |
| defaults(obj, ...sources) | 填充默认值 | defaults({a:1},{a:3,b:2}) → {a:1,b:2} |
| findKey(obj, pred) / findLastKey | 查找 key | findKey({a:1,b:2}, v => v > 1) → 'b' |
javascript
import { get, set, cloneDeep, omit, merge } from 'lodash-es'
// 安全取值，避免 Cannot read property 错误
const userName = get(response, 'data.user.name', '未知用户')
// 深拷贝表单数据
const formCopy = cloneDeep(originalForm)
// 剔除敏感字段后返回给前端
const safeUser = omit(user, ['password', 'salt'])
// 深度合并配置
const finalConfig = merge({}, defaultConfig, userConfig)字符串（String）
字符串处理涵盖命名格式转换、填充、截断等实用工具。
| 函数 | 简要说明 | 示例 |
|---|---|---|
| camelCase | 转驼峰 | camelCase('foo_bar-baz') → 'fooBarBaz' |
| kebabCase | 转短横线 | kebabCase('fooBar') → 'foo-bar' |
| snakeCase | 转下划线 | snakeCase('fooBar') → 'foo_bar' |
| lowerCase、upperCase | 全小写/全大写（按单词分隔） | lowerCase('FooBar') → 'foo bar' |
| capitalize | 首字母大写其余小写 | capitalize('hello') → 'Hello' |
| upperFirst、lowerFirst | 仅首字母大小写 | upperFirst('hello world') → 'Hello world' |
| startCase | 每个单词首字母大写 | startCase('--foo-bar--') → 'Foo Bar' |
| debar | 去除变音符号 | deburr('déjà vu') → 'deja vu' |
| startsWith、endsWith | 前缀/后缀判断 | startsWith('hello','he') → true |
| escape、unescape | HTML 转义/反转义 | escape('<div>') → '<div>' |
| escapeRegExp | 转义正则特殊字符 | escapeRegExp('(abc)') → '$abc$' |
| truncate | 截断 | truncate('hello world',{length:5}) → 'he...' |
| repeat | 重复 | repeat('ab', 3) → 'ababab' |
| padStart、padEnd | 填充 | padStart('5',3,'0') → '005' |
| pad | 两端填充 | pad('abc', 8, '_-') → '_-abc_-_' |
| trim、trimStart、trimEnd | 去除首尾空白 | trim(' hello ') → 'hello' |
| split(str, sep, limit) | 分割字符串 | split('a-b-c','-',2) → ['a','b'] |
| template(str) | 编译模板 | template('hi <%= name %>')({name:'Tom'}) → 'hi Tom' |
| words(str) | 提取单词数组 | words('hello world') → ['hello','world'] |
javascript
import { camelCase, kebabCase, snakeCase, padStart } from 'lodash-es'
// 后端返回下划线字段转驼峰
const key = camelCase('user_name') // 'userName'
// 生成 CSS 类名
const className = kebabCase('UserProfile') // 'user-profile'
// 日期补零
const month = padStart(String(5), 2, '0') // '05'总结
Lodash-es 是现代 JavaScript 开发中不可或缺的工具库。通过按需导入和合理使用，可以显著提升开发效率和代码质量。记住始终使用 ES 模块语法导入，并根据项目需求选择合适的函数，避免不必要的依赖。
