HOW - Lodash 使用指南和源码学习

目录

我们经常在项目里遇到 Lodash 函数的引入,如:

  • debounce(Function)
  • cloneDeep(Lang)
  • isNull(Lang)
  • isUndefined(Lang)
  • isNil(Lang)
  • isEqual(Lang)
  • range(Util)
  • uniqBy(Array)
  • compact(Array)
  • flattenDeep(Array)
  • truncate(String)
  • omit, pick(Object)
  • merge(Object)
  • partition(Collection)

一、什么是 lodash

A modern JavaScript utility library delivering modularity, performance & extras.

Lodash 是一个 JavaScript 实用工具库,提供了许多常用的函数方法,用于简化 JavaScript 编程中的常见任务。它提供了对数组、集合、对象、函数、字符串等数据类型的操作和处理方法,以及一些实用的辅助函数。

主要特点包括:

  1. 高性能: Lodash 专注于性能优化,其方法实现都经过了精心设计和测试,以保证在各种环境下都能提供高效的性能。
  2. 跨浏览器兼容性: Lodash 提供了对于不同浏览器和 JavaScript 运行环境的兼容支持,可以在各种浏览器和环境中安全使用。
  3. 模块化: Lodash 的模块化设计使得你可以按需引入所需的方法,而不必一次性引入整个库。这有助于减小项目的体积,并提高应用程序的性能。
  4. 社区活跃: Lodash 拥有庞大的用户群体和活跃的社区支持,你可以在社区中获得丰富的资源、文档和示例。

二、为什么需要 Lodash

之前有人提过:You-Dont-Need-Lodash-Underscore。理由是随着 ECMAScript 发展,很多语言特性已经能够实现原生支持,当不需要兼容较早的浏览器,其实可以不引入 Lodash 或 underscore。

但是,Lodash 支持非常多性能提升明显和兼容性更优的特性。甚至,ECMAScript 语言标准也在某种程度上向 Lodash 实现靠近。

Lodash makes JavaScript easier by taking the hassle out of working with arrays , numbers , objects , strings, etc.

Lodash's modular methods are great for:

  • Iterating arrays, objects, & strings
  • Manipulating & testing values
  • Creating composite functions

因此,Lodash API 的底层实现也非常值得开发者去学习。

三、API 分类

Array

这些函数用于对数组进行操作和处理,包括对数组的遍历、筛选、映射、合并、排序等操作。例如 .map()、 .filter()、.reduce()、.concat()、_.sortBy() 等。

Collection

这些函数用于对集合数据进行操作,包括对象、数组和类数组对象等,它们提供了对集合中的元素进行遍历、筛选、映射等操作。例如 .forEach()、.groupBy()、_.countBy() 等。

Date

这些函数用于处理日期和时间,包括获取当前时间、格式化日期、比较日期、添加或减去时间等操作。例如 .now()、 .format()、.isEqual()、.add()、_.subtract() 等。

Function

这些函数用于对函数进行操作和处理,包括函数的柯里化、节流、防抖、组合等操作。例如 .curry()、 .throttle()、.debounce()、.flow() 等。

Lang

这些函数用于对基本数据类型和语言特性进行操作和判断,例如判断数据类型、比较值相等性、生成唯一 ID 等操作。例如 .isArray()、.isEqual() 等。

Math

这些函数用于数学运算和处理,包括计算数组中的最大值、最小值、求和、平均值等操作。例如 .max()、 .min()、.sum()、.mean() 等。

Number

这些函数用于处理数字类型的数据,包括数字的格式化、范围限制、四舍五入、精度处理等操作。例如 .toNumber()、 .clamp()、.round()、.roundTo() 等。

Object

这些函数用于对对象进行操作和处理,包括对象的克隆、合并、转换、遍历等操作。例如 .clone()、 .merge()、.pick()、.mapValues() 等。

String

这些函数用于处理字符串,包括字符串的格式化、拆分、连接、截取、大小写转换等操作。例如 .trim()、 .split()、.join()、.truncate()、_.lowerCase() 等。

Seq

这些函数用于创建链式调用的序列,允许对集合进行一系列的链式操作,例如映射、过滤、排序等操作。它们提供了链式调用的方式来处理数据,使得代码更加清晰和易于理解。例如 _.chain()

Util

这些函数提供了一些实用的工具函数,用于辅助开发者进行调试、性能优化等操作。例如 .times()、.noop()、_.uniqueId() 等。

相关推荐
toooooop84 小时前
CRMEB 故障排查笔记:安全网关只放行 GET/POST 怎么办
前端·javascript·vue.js·thinkphp6·crmeb
软件技术NINI4 小时前
基于SpringBoot和Vue的项目评审系统
javascript·vue.js·spring boot·后端·spring·毕业设计·毕设
vipxieliang5 小时前
JavaScript 模板字符串与标签模板:不只是拼接
前端·javascript
Dream-Y.ocean15 小时前
鸿蒙PC平台宅匠 3D 室内设计适配实战:基于 Electron 壳方案的 Three.js 双渲染引擎与参数化户型编辑器开发
javascript·3d·harmonyos
Highcharts.js16 小时前
Highcharts Gantt使用符号的自定义数据标签开发甘特图示例
javascript·甘特图·highcharts·图表开发·实战代码·响应式图表
kyriewen19 小时前
Skills 榜前 10 我全装了:只有 3 个能直接用
前端·javascript·程序员
工控丫丫20 小时前
帆软看板中经常使用的公式函数及经常搭的组合
前端·javascript·数据库
Dream-Y.ocean1 天前
鸿蒙PC平台星图遥感适配实战:基于 Electron 壳方案的纯 JavaScript 遥感图像处理引擎开发
javascript·electron·harmonyos
螺丝钉tina1 天前
[Playwright ][16]Playwright + TypeScript API 自动化测试实战:API测试
前端·javascript·typescript
Highcharts.js1 天前
React 中原生支持使用 JSX 组件配置自定义表格 Highcharts Grid
前端·javascript·react.js·前端框架·jsx·highcharts·自定义表格