Lodash
目录
Lodash 是什么
Lodash 是一个 JavaScript 的实用工具库，封装了 JavaScript 常用的函数和数据操作，提高了开发效率并且减少了代码量。
Lodash 是 Underscore.js 的前端大型衍生项目，提供了诸如数组操作，字符串操作，对象操作等工具函数。
Lodash 库是按照模块化方式进行构建，每个模块都可以单独使用。
2023 年了，还需要用 Lodash 吗？
ECMAScript 提出了很多新的方法，拓展了很多特性，很多功能已经不再需要使用 Lodash 就能实现，况且 Lodash 在 2021 年就停止了更新。
Github 上有个仓库解释了为什么不再需要 Lodash:You Don`t Need Lodash Underscore。
youmightnotneed也有相关资料关于 Lodash 实现与原生 ES 语法实现。
但是像深度拷贝、链式调用、节流、防抖等原生 ES 难以实现的操作还需要使用 Lodash，而且技多不压身，学一下也没坏处。
安装和使用
通过pnpm安装:
pnpm i lodash @types/lodash使用:
import { chunk } from "lodash"; //[!code focus]
chunk(["a", "b", "c", "d"], 2); // [ [ 'a', 'b' ], [ 'c', 'd' ] ]更多模块以及使用方式参考官网文档
模块索引
Array
chunk
compact
concat
difference
differenceBy
differenceWith
drop
dropRight
dropRightWhile
dropWhile
fill
findIndex
findLastIndex
first -> head
flatten
flattenDeep
flattenDepth
fromPairs
head
indexOf
initial
intersection
intersectionBy
intersectionWith
join
last
lastIndexOf
nth
pull
pullAll
pullAllBy
pullAllWith
pullAt
remove
reverse
slice
sortedIndex
sortedIndexBy
sortedIndexOf
sortedLastIndex
sortedLastIndexBy
sortedLastIndexOf
sortedUniq
sortedUniqBy
tail
take
takeRight
takeRightWhile
takeWhile
union
unionBy
unionWith
uniq
uniqBy
uniqWith
unzip
unzipWith
without
xor
xorBy
xorWith
zip
zipObject
zipObjectDeep
zipWith
Collection
countBy
each -> forEach
eachRight -> forEachRight
every
filter
find
findLast
flatMap
flatMapDeep
flatMapDepth
forEach
forEachRight
groupBy
includes
invokeMap
keyBy
map
orderBy
partition
reduce
reduceRight
reject
sample
sampleSize
shuffle
size
some
sortBy
Date
now
Function
after
ary
before
bind
bindKey
curry
curryRight
debounce
defer
delay
flip
memoize
negate
once
overArgs
partial
partialRight
rearg
rest
spread
throttle
unary
wrap
Lang
castArray
clone
cloneDeep
cloneDeepWith
cloneWith
conformsTo
eq
gt
gte
isArguments
isArray
isArrayBuffer
isArrayLike
isArrayLikeObject
isBoolean
isBuffer
isDate
isElement
isEmpty
isEqual
isEqualWith
isError
isFinite
isFunction
isInteger
isLength
isMap
isMatch
isMatchWith
isNaN
isNative
isNil
isNull
isNumber
isObject
isObjectLike
isPlainObject
isRegExp
isSafeInteger
isSet
isString
isSymbol
isTypedArray
isUndefined
isWeakMap
isWeakSet
lt
lte
toArray
toFinite
toInteger
toLength
toNumber
toPlainObject
toSafeInteger
toString
Object
assign
assignIn
assignInWith
assignWith
at
create
defaults
defaultsDeep
entries -> toPairs
entriesIn -> toPairsIn
extend -> assignIn
extendWith -> assignInWith
findKey
findLastKey
forIn
forInRight
forOwn
forOwnRight
functions
functionsIn
get
has
hasIn
invert
invertBy
invoke
keys
keysIn
mapKeys
mapValues
merge
mergeWith
omit
omitBy
pick
pickBy
result
set
setWith
toPairs
toPairsIn
transform
unset
update
updateWith
values
valuesIn
Seq
_
chain
tap
thru
prototype[Symbol.iterator]
prototype.at
prototype.chain
prototype.commit
prototype.next
prototype.plant
prototype.reverse
prototype.toJSON -> value
prototype.value
prototype.valueOf -> value
String
camelCase
capitalize
deburr
endsWith
escape
escapeRegExp
kebabCase
lowerCase
lowerFirst
pad
padEnd
padStart
parseInt
repeat
replace
snakeCase
split
startCase
startsWith
template
toLower
toUpper
trim
trimEnd
trimStart
truncate
unescape
upperCase
upperFirst
words
Util
attempt
bindAll
cond
conforms
constant
defaultTo
flow
flowRight
identity
iteratee
matches
matchesProperty
method
methodOf
mixin
noConflict
noop
nthArg
over
overEvery
overSome
property
propertyOf
range
rangeRight
runInContext
stubArray
stubFalse
stubObject
stubString
stubTrue
times
toPath
uniqueId
Properties
VERSION
templateSettings
templateSettings.escape
templateSettings.evaluate
templateSettings.imports
templateSettings.interpolate
templateSettings.variable
Methods
templateSettings.imports._
常用功能
防抖(debounce)
<script setup>
import { debounce } from "lodash";
const debounceMethod = debounce(() => {
console.log("防抖: 延时2秒执行");
}, 2000);
</script>
<template>
<div>
<button @click="debounceMethod()">防抖</button>
</div>
</template>节流(throttle)
<script setup>
import { throttle } from "lodash";
const throttleMethod = throttle(() => {
console.log("节流: 2秒内最多执行一次");
}, 2000);
</script>
<template>
<div>
<button @click="throttleMethod()">节流</button>
</div>
</template>