一、Lodash官网
Lodash 简介 | Lodash中文文档 | Lodash中文网
二、理解Lodash
Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。它提供了大量的函数来帮助你处理数组、数值、对象、字符串等,使你的代码更加简洁、易读和高效。Lodash 的设计哲学是让你能够使用函数式编程的方法来操作数据,同时避免修改原始数据(除非明确指定)。
三、Lodash具备哪些能力
序号 | 能力 | 解释 |
1 | 数组 / Array | 如过滤、映射、排序、分块、去重、查找、比较等 |
2 | 集合 / Collection | 如并集、交集、差集、子集、筛选等 |
3 | 函数 | 如柯里化、防抖、节流、合成、条件判断等; |
4 | 语言 | 提供了一系列用于检查类型、验证值等的函数 |
5 | 数学 | 如求和、平均数、最大值、最小值、随机数等; |
6 | 数字 | clamp(number, [lower], upper)返回限制在 lower 和 upper 之间的值。inRange(number, [start=0], end)检查 n 是否在 start 与 end 之间random([lower=0], [upper=1], [floating])产生一个包括 lower 与 upper 之间的数 |
7 | 对象 | 如深拷贝、合并、遍历、转换、比较等 |
8 | Seq | Seq 模块(或称为序列)提供了一种链式调用的方式来处理数据,同时支持惰性计算(Lazy Evaluation),这意味着只有在需要最终结果时,才会执行链中的操作。这种机制可以显著提高处理大数据集时的性能,因为它允许在数据实际被使用之前避免不必要的计算。 |
9 | 字符串 | 如切割、重复、填充、大小写转换、字符串匹配、转义等; |
10 | 实用函数 | |
11 | Properties | |
12 | Methods | |
Lodash虽然提供了很多方法,但并不意味着在实际开发中一定要全部使用。在使用Lodash时,应根据实际需要选取合适的方法,以提高代码的可读性和执行效率。 |
四、vue3 ts 项目安装
4.1、安装
pnpm install lodash
pnpm install @types/lodash
4.2、全局引入
在项目的入口文件(main.ts)中全局引入Lodash,并将其挂载。
但请注意,这种方式虽然方便,但可能会增加项目的打包体积,因为Lodash是一个相对较大的库。
main.ts
import _ from 'lodash'
app.config.globalProperties.$lodash = _
import { createApp, getCurrentInstance } from 'vue'
import './style.css'
import '@v3/assets/styles/tailwind.css'
import '@v3/assets/styles/reset.css'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import router from './routers/index'
import { api } from './api/index'
import 'vue-global-api'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import _ from 'lodash'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
const app = createApp(App)
app.use(ElementPlus)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(pinia)
app.use(router)
app.config.globalProperties.$api = api
app.config.globalProperties.$lodash = _
app.mount('#app')
页面使用
<script setup lang="ts">
let Lodash = internalInstance && internalInstance.appContext.config.globalProperties.$lodash
getUser(params).then((res: any)=>{
console.log('lodash', Lodash.hasIn(res, ['payload']))
// true
}
</script>
感觉比较麻烦,后边找找看简便方法
出于性能和打包体积的考虑,通常不推荐全局引入Lodash。更好的做法是按需引入。
4.3、按需引入
在组件或文件中,根据需要引入Lodash的特定函数。这样做的好处是可以只引入你需要的函数,从而减小项目的打包体积。
<script setup lang="ts">
import { defineComponent } from 'vue'
import { debounce } from 'lodash'
// 使用debounce函数
const handleInput = debounce((value: string) => {
console.log(value)
}, 500)
</script>
<template>
<input type="text" @input="handleInput($event.target.value)" />
</template>
五、配置TypeScript以支持Lodash
由于你已经安装了@types/lodash,TypeScript应该能够自动识别Lodash的类型定义。但是,如果你在使用TypeScript时遇到了与Lodash相关的类型错误或警告,请确保你的tsconfig.json文件配置正确。特别是,如果你的项目中使用了ES模块导入方式,并且遇到了默认导入的警告,你可能需要在tsconfig.json中添加以下配置
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"esModuleInterop": true
}
}
六、常用方法
6.1、hasIn
let result = hasIn(res, ['payload']) ? res.payload : []
对象路径正确 返回 true ,否则 false
<script setup lang="ts">
import { hasIn } from 'lodash'
getUser(params).then((res: any)=>{
console.log('lodash-hasIn', hasIn(res, ['payload']))
// true 测试成功
}
</script>
6.2、待补充
更多内容待补充
参考链接
lodash.hasIn | Lodash中文文档 | Lodash中文网