vue/vue3 项目中lodash函数的使用,提升工作效率的好帮手!

前言:

        分享下个人使用的一个好的js库,里面封装了大量的方法,比如数组根据对象某个属性去重,比如我们移动端中经常会有防抖节流的应用场景,拷贝对象的时候,修改他的值,老是影响源数据,等等系列的问题都可以有很便捷的方法来解决!

官方地址与api:

Lodash 中文文档(v4.15.0)lodash 是一个 JavaScript 的实用工具库, 表现一致性, 模块化, 高性能, 以及 可扩展.icon-default.png?t=N7T8http://lodash.net/docs/4.15.0.html

具体使用方法:

一、安装这个库,npm/pnpm/yarn/cnpm都可以  yarn的话用 yarn add

npm i @types/lodash

找  tsconfig.json 文件,没有创建,有修改

"esModuleInterop": true,

vue/vue3 项目中lodash函数的使用,提升工作效率的好帮手!_第1张图片

二、页面上引入的话有三种方法

import * as _ from 'lodash' //引入所有
import _ from "lodash"; //定义变量_ (_是官方推荐的,你可以自由定义),接受所有
import { assign } from "lodash"; // 按需引入,推荐使用这个

三、好了,准备工作结束,开始使用把

1、uniqBy:根据数组的某个属性去重
import { uniqBy } from "lodash";
messageList = uniqBy(messageList, "msg_id");// 数组、你的对象内的字段
2、cloneDeep:深拷贝
import { cloneDeep} from "lodash";
const arr= cloneDeep(oldArr)
3、debounce:防抖,200ms执行一次
import { debounce } from "lodash";
const handleScroll = ()=>{
}
debounce(handleScroll, 200)
4、forEach :循环,可以循环对象+数组
import { forEach } from "lodash";
// 循环对象
forEach({ 'a': 1, 'b': 2 }, function(value, key) {
  console.log(key); // a   b
});
// 循环数组
forEach(item.list, (listItem) => {
 
});
5、includes:数组,对象,字符串中是否包含

需要注意的是,他支持三个参数,前两个跟js中是一样的,第三个值是下标

import { includes} from "lodash";

includes([1, 2, 3], 1);// => true
includes([1, 2, 3], 1, 2);// => false  这里是说在数组的下标为2的值,是否==1
includes({ 'user': 'fred', 'age': 40 }, 'fred');// => true
includes('pebbles', 'eb');// => true
6、filter:过滤,使用跟js的filter过滤差不多,不过搜索条件支持的不仅仅是函数,还有对象、数组、字符串
import { filter } from "lodash";


const arr = [
  { 'user': 'barney', 'age': 36, 'active': true },
  { 'user': 'fred',   'age': 40, 'active': false }
];

//跟js中的filter一样,支持函数
filter(arr, (o)=>!o.active );

// 通过对象过滤
filter(arr, { 'age': 36});// 结果是:{ 'user': 'barney', 'age': 36, 'active': true }

// 根据数组过滤 active===false
filter(arr, ['active', false]);//结果是:{ 'user': 'fred',   'age': 40, 'active': false }

// 根据字符串过滤
filter(arr, 'active');// =>结果是: { 'user': 'barney', 'age': 36, 'active': true }
7、find:查找,可以针对数组、对象进行查找,返回指定数据 || undefined

和js提供的方法相比较,一个是可以对 对象进行查找,二是支持第三个参数,就是下标

import { find } from "lodash";

// 对象中查找
find(obj, (item) => item.value === 111)

// 数组中查找,跟js一样的
find(arr, (item) => item.value === 111)

...个人分享就到这里了,如果有想看更多支持方法的,看看官方api把!!!

你可能感兴趣的:(ts,vue3.0,vue,前端,vue3,vue.js,javascript)