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

相关推荐
王哲晓1 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
理想不理想v1 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云1 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
aPurpleBerry2 小时前
JS常用数组方法 reduce filter find forEach
javascript
ZL不懂前端3 小时前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x3 小时前
ESLint 使用教程(一):从零配置 ESLint
javascript·eslint
我血条子呢3 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
半开半落3 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt
理想不理想v4 小时前
vue经典前端面试题
前端·javascript·vue.js