vue3+ts,记录lodash常用的实用的函数

---

前言

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。lodash的很多方法在遍历 array、object 和 string等操作上，使得编写代码的难度降低。这里附上官网链接：https://www.lodashjs.com/
在前端开发中，使用lodash能够大幅度提高前端编程的效率和代码可读性，使得代码编写更加快捷、简洁、易懂。建议大家都能使用，毕竟是真的香。

---

一、lodash安装和导入

1. lodash安装

npm i --save lodash

2. lodash引入

//全局引入
import _ from 'lodash'; 
// 或者按需引入
const _ = require('lodash');

二、lodash常用的实用的方法

①_.join

这个函数的意思是将数组的每个值通过分隔符号拼接起来形成一个字符串，最后这个函数返回这个字符串。

//语法
_.join(数组, '分隔符号')
//举个例子
_.join(['2', '4', '6'], '~');
// => '2~4~6'

②_.split

这个方法的作用是：将一串字符串通过字符串中的分隔符号拆成数组，最后这个函数返回一个数组。

//语法
_.split(字符串变量, 分隔符号, 限制结果的数量)
//举个例子
_.split('3-2-1', '-', 2);
// => ['3', '2']

③_.forEach

这个方法的意思就是对数组或者集合做循环遍历，最后返回这个集合。

//语法
_.forEach(集合：数组或对象, 每次迭代调用的函数)
//举个例子
_.forEach(infoList,(info)=>{
  console.log(info)
})

④_.filter

这个函数的作用是：返回一个新的过滤后的数组。

//语法
_.filter(集合：数组或对象, 每次迭代调用的函数)
//举个例子
const filterList = _.filter(infoList,(info)=>{
//通过遍历infoList得到一个一个info,过滤出info的属性userAge为25的数据,最后返回给filterList集合
  info.userAge = 25
})

⑤_.find

这个函数的作用是：返回一条匹配的数据。

//语法
_.find(集合：数组或对象, 每次迭代调用的函数, 开始搜索的索引位置)
//举个例子，这个例子是返回infoList集合中，属性userName为张三的数据，如果有多条匹配的数据就返回第一条，实例中返回的数据就是item
const item = _.find(infoList,{userName:'张三'})
//再举一个
var users = [
  { 'user': 'barney',  'age': 36, 'active': true },
  { 'user': 'fred',    'age': 40, 'active': false },
  { 'user': 'pebbles', 'age': 1,  'active': true }
];
_.find(users, function(o) { return o.age < 40; });
// => object for 'barney'

⑥_.assign

这个函数的作用是：可简单理解为属性拷贝，把源对象的属性复制给目标对象。类似Java中的BeanUtils.copyProperties（源对象，目标对象）。

//语法
_.assign(目标对象, 源对象)
//举个例子,把res.result对象的属性都拷贝给detail对象，detail对象将拥有源对象的属性和值。
const detail = reactive<Partial<any>>({})
_.assign(detail, res.result)

⑦_.keys

这个函数的作用：返回一个以对象的可枚举属性名创建的数组

//语法
_.keys(对象)
//举个例子
const form = reactive({
  id: '',
  userName: '',
  userEmail: ''
})
console.log(_keys(form))
//返回的数组打印值如下图所示

⑧_.pick

这个函数的作用是：创建一个从 object 中选中的属性的对象。

//语法
_.pick(object, [属性])
//举个例子
var object = { 'a': 1, 'b': '2', 'c': 3 };
_.pick(object, ['a', 'c']);
// => { 'a': 1, 'c': 3 }

⑨_.debounce

这是防抖函数,防抖主要是用在输入框输入触发一些请求，为了减少请求次数优化性能而采取的措施。
这个函数的作用：高频的事件操作带来了函数的多次调用影响性能。
原理：在一定的时间间隔N秒后才执行该事件，如果在N秒内又触发了该事件则重新计时。（就像我们玩原神时角色被冰怪冻结了，得需要一定的时间才能解冻）
应用场景:
（1）输入框连续输入值后，直等到最后一次输入完才进行相关的事件操作
（2）点赞、表单提交、防止重复提交。

//语法
_.debounce(要防抖动的函数, 需要延迟的毫秒数, 选项对象)
//举个例子
// 当点击时 `sendMail` 随后就被调用。
jQuery(element).on('click', _.debounce(sendMail, 300, {
  'leading': true,
  'trailing': false
}));

⑩_.forIn

这个函数的作用是：遍历对象的自身和对象的可枚举属性。

//语法
_.forIn(object, 每次迭代时调用的函数)
//举个例子
const queryParams = reactive<Record<string, string | null | number>>({
  id: '',
  userName: '',
  userEmail: ''
})
_.forIn(queryParams, (value, key) => {
    //循环遍历打印queryParams对象的键
    console.log(key) 
  })
// =>id , userName , userEmail

⑩_.map

这个函数的作用是：返回新的映射后数组。

//语法
_.map(集合：数组或对象, 每次迭代时调用的函数)
//举个例子
var users = [
  { 'user': '张三' },
  { 'user': '李四' }
];
_.map(users, 'user');
// => ['张三', '李四']

---

总结

以上是我目前在开发中遇到的常用的且实用的函数，后续还有我也会继续在本篇文章继续更新总结记录。