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 发展,很多语言特性已经能够实现原生支持,当不需要兼容较早的浏览器,其实可以不引入 Lodashunderscore

但是,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() 等。

相关推荐
海天胜景7 分钟前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘27 分钟前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
苦夏木禾32 分钟前
js请求避免缓存的三种方式
开发语言·javascript·缓存
超级土豆粉40 分钟前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
乆夨(jiuze)1 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
小彭努力中1 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
小飞悟2 小时前
前端高手才知道的秘密:Blob 居然这么强大!
前端·javascript·html
code_YuJun2 小时前
Promise 基础使用
前端·javascript·promise
Codebee2 小时前
OneCode自主UI设计体系:架构解析与核心实现
前端·javascript·前端框架
邢同学爱折腾2 小时前
当前端轮播图遇上Electron: 变身一款丝滑的 图片查看器
javascript·electron