Lodash-JavaScript的实用工具库

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大幅减少产物体积。官网https://lodash.com/docs中文网https://www.lodashjs.com/快速集成安装依赖如果正在使用 Node.js 的包管理器 npm打开终端或命令提示符进入项目根目录然后执行以下命令# 核心库ES 模块版本npminstalllodash-es按需引入完成安装后就可以在项目中导入并使用 lodash-es 提供的工具函数。Lodash-es 支持按需导入可以显著减少打包体积是现代 JavaScript 项目中的首选工具库。// 单函数引入推荐import{debounce}fromlodash-es;import{cloneDeep,merge}fromlodash-es;importchunkfromlodash-es/chunk;// 也可以从单独文件导入更利于 Tree-shakingimportdebouncefromlodash-es/debounce;importthrottlefromlodash-es/throttle;核心高频功能数组Arraylodash-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)→2without排除指定值非原地without([1,2,3,4], 2, 4)→[1,3]findIndex、findLastIndex查找索引findIndex([1,2,3], n n 1)→1import{chunk,uniqBy,intersection,flattenDeep}fromlodash-es// 分页分块constpageschunk(dataList,10)// 按 id 去重constuniqueUsersuniqBy(userList,id)// 求共同好友constcommonFriendsintersection(myFriends,theirFriends)// 递归扁平嵌套数据constflatListflattenDeep(nestedData)集合Collectionlodash-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)→2every(coll, pred)是否全部满足every([1,2,3], n n 0)→truesome(coll, pred)是否有任一满足some([1,2,3], n n 2)→truecountBy(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)→truesize(coll)集合大小size({a:1,b:2})→2import{groupBy,orderBy,keyBy,countBy}fromlodash-es// 按部门分组员工constemployeesByDeptgroupBy(employees,department)// 按年龄降序、姓名升序排序constsortedorderBy(users,[age,name],[desc,asc])// 转 id 为 key 的映射O(1) 查找constuserMapkeyBy(userList,id)constuseruserMap[targetId]// 快速查找// 统计各角色人数constroleCountcountBy(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)import{debounce,throttle}fromlodash-es// 防抖输入停止 300ms 后触发搜索consthandleSearchdebounce((keyword){fetchSearchResults(keyword)},300)// 节流滚动加载1 秒内最多触发一次consthandleScrollthrottle((){loadMoreData()},1000)语言Lang类型判断、比较、转换。函数简要说明示例isEqual深度比较相等isEqual({a:{b:1}}, {a:{b:1}})→trueisMatch对象是否匹配子集isMatch({a:1,b:2}, {a:1})→trueisEmpty是否为空isEmpty({})→true;isEmpty([1])→falseisArray是否数组isArray([1])→trueisBoolean是否布尔值isBoolean(true)→trueisFunction是否函数isFunction(() {})→trueisInteger是否整数isInteger(3)→trueisNil是否 null/undefinedisNil(null)→trueisNumber是否数字isNumber(3)→trueisObject对象判断isPlainObject({})→true;isPlainObject(new Date())→falseisString字符串/符号判断isString(abc)→trueisDate特殊类型判断isDate(new Date())→trueisMap、isSet集合类型判断isSet(new Set())→trueisArrayBuffer、isTypedArray二进制类型判断isTypedArray(new Uint8Array())→trueeq(a, b)严格相等eq(NaN, NaN)→true区别于gt、gte、lt、lte大于/大于等于/小于/小于等于gt(3, 1)→truecastArray将值转为数组castArray(1)→[1];castArray([1])→[1]toArray(val)转为数组toArray({a:1,b:2})→[1,2]toInteger、toNumbertoLength、toSafeInteger类型转换toInteger(3.7)→3数学Math函数简要说明示例add、subtract、multiply、divide四则运算add(1, 2)→3ceil、floor、round取整/四舍五入ceil(4.006, 2)→4.01max、maxBy、min、minBy最大最小值maxBy([{n:1},{n:3},{n:2}], n)→{n:3}mean平均值mean([4,6])→5sum求和sumBy([{n:1},{n:3}], n)→4数字Number函数简要说明示例clamp(num, min, max)限制在范围内clamp(15, 0, 10)→10inRange(num, start, end)是否在范围内inRange(3, 2, 4)→truerandom(min, max, floating)随机数random(1, 10)→5对象Object对象处理是 lodash 最核心的能力之一涵盖安全取值赋值、深拷贝、属性筛选等是日常开发中减少样板代码的利器。函数简要说明示例get(obj, path, default)安全取值路径不存在时返回默认值get({a:{b:1}}, a.b.c, N/A)→N/Aset(obj, path, val)安全深度赋值set({}, a.b.c, 3)→{a:{b:{c:3}}}has(obj, path)判断属性是否存在has({a:{b:1}}, a.b)→trueunset(obj, path)删除属性unset({a:{b:1}}, a.b)→truemerge(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查找 keyfindKey({a:1,b:2}, v v 1)→bimport{get,set,cloneDeep,omit,merge}fromlodash-es// 安全取值避免 Cannot read property 错误constuserNameget(response,data.user.name,未知用户)// 深拷贝表单数据constformCopycloneDeep(originalForm)// 剔除敏感字段后返回给前端constsafeUseromit(user,[password,salt])// 深度合并配置constfinalConfigmerge({},defaultConfig,userConfig)字符串String字符串处理涵盖命名格式转换、填充、截断等实用工具。函数简要说明示例camelCase转驼峰camelCase(foo_bar-baz)→fooBarBazkebabCase转短横线kebabCase(fooBar)→foo-barsnakeCase转下划线snakeCase(fooBar)→foo_barlowerCase、upperCase全小写/全大写按单词分隔lowerCase(FooBar)→foo barcapitalize首字母大写其余小写capitalize(hello)→HelloupperFirst、lowerFirst仅首字母大小写upperFirst(hello world)→Hello worldstartCase每个单词首字母大写startCase(--foo-bar--)→Foo Bardebar去除变音符号deburr(déjà vu)→deja vustartsWith、endsWith前缀/后缀判断startsWith(hello,he)→trueescape、unescapeHTML 转义/反转义escape(div)→divescapeRegExp转义正则特殊字符escapeRegExp((abc))→$abc$truncate截断truncate(hello world,{length:5})→he...repeat重复repeat(ab, 3)→abababpadStart、padEnd填充padStart(5,3,0)→005pad两端填充pad(abc, 8, _-)→_-abc_-_trim、trimStart、trimEnd去除首尾空白trim( hello )→hellosplit(str, sep, limit)分割字符串split(a-b-c,-,2)→[a,b]template(str)编译模板template(hi % name %)({name:Tom})→hi Tomwords(str)提取单词数组words(hello world)→[hello,world]import{camelCase,kebabCase,snakeCase,padStart}fromlodash-es// 后端返回下划线字段转驼峰constkeycamelCase(user_name)// userName// 生成 CSS 类名constclassNamekebabCase(UserProfile)// user-profile// 日期补零constmonthpadStart(String(5),2,0)// 05总结Lodash-es 是现代 JavaScript 开发中不可或缺的工具库。通过按需导入和合理使用可以显著提升开发效率和代码质量。记住始终使用 ES 模块语法导入并根据项目需求选择合适的函数避免不必要的依赖。