无意间看到了公司项目中同事有用到lodash的方法就看了一下,它内部封装了诸多对字符串、数组、对象等常见数据类型的处理函数,Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。可以直接调用,比如数组去重,防抖函数等等,这样可以简化很多代码。lodash的方法有很多,官方文档都有说明,文章中提到的是我平时用到的会比较多的一些方法。
Array:适用于数组类型,比如填充数据、查找元素、数组分片等操作
Collection:适用于数组和对象类型,部分适用于字符串,比如分组、查找、过滤等操作
Function:适用于函数类型,比如节流、延迟、缓存、设置钩子等操作
Lang:普遍适用于各种类型,常用于执行类型判断和类型转换
Math:适用于数值类型,常用于执行数学运算
Number:适用于生成随机数,比较数值与数值区间的关系
Object:适用于对象类型,常用于对象的创建、扩展、类型转换、检索、集合等操作
Seq:常用于创建链式调用,提高执行性能(惰性计算)
String:适用于字符串类型
首先通过npm全局安装ladash
npm i -save lodash \\全局安装
习惯把一些方法封装在utils工具包里,然后再挂载到全局,因为挂载在全局成本还是挺大的,所以都是一些项目中比较常用的方法。按需引入了如下方法:
import _get from 'lodash/get'
import _map from 'lodash/map'
import _uniq from 'lodash/uniq'
import _pick from 'lodash/pick'
import _omit from 'lodash/omit'
import _isNaN from 'lodash/isNaN'
import _property from 'lodash/property'
import _findIndex from 'lodash/findIndex'
import _isUndefined from 'lodash/isUndefined'
import _isString from 'lodash/isString'
import _debounce from 'lodash/debounce'
_get
语法:
_.get(object, path, [defaultValue])
@description get方法,用于解决a.b.c.d出现undefined导致代码保存不继续向下执行
@param {Object} [object] 目标对象
@param {String} [path] 需要取值路径
@param {*} [defaultVal] 值不存在时候的默认值
@example
var object = { 'a': [{ 'b': { 'c': 3 } }] };
utils._get(object, 'a[0].b.c'); // => 3 (推荐使用)
utils._get(object, ['a', '0', 'b', 'c']); // => 3
utils._get(object, 'a.b.c', 'default'); // => 'default' (推荐使用)
_get = function (object, path, defaultVal) {
return _get(object, path, defaultVal)
}
_getObjArray
@description 返回指定对象的 key 的值的数组,支持多层属性嵌套获取,如:obj.x.y.z,快速获取数组内需要的key值数组
@param {Array} [objects] 目标对象
var objects = [
{ 'a': { 'b': { 'c': 2 } } },
{ 'a': { 'b': { 'c': 1 } } }
]
utils._getObjArray(object, 'a.b.c') => [2, 1]
_getObjArray = function (objects, path) {
return _map(objects, _property(path))
}
_findIndex
@description 该方法类似find,区别是该方法返回第一个通过 predicate 判断为真值的元素的索引值(index),而不是元素本身。
@param {Array} [array] 目标对象
@returns {Number} -1为没找到对应的值,其余为数组对应的index
users = [
{ 'user': 'barney', 'active': false },
{ 'user': 'fred', 'active': false },
{ 'user': 'pebbles', 'active': true }
]
utils._findIndex(array, function(o) { return o.user == 'barney'; }) => 0
utils._findIndex(array, { 'user': 'fred', 'active': false }) => 1 (推荐使用)
utils._findIndex(array, ['active', false]) => 0 (推荐使用)
utils._findIndex(array, 'active') => 2 (推荐使用)
_findIndex = function (array, predicate, fromIndex = 0) {
return _findIndex(array, predicate, fromIndex)
}
_uniq
@description 数组去重(纯数组)
@example
var a =[1, 2, 1, 5, 1, 9]
utils._uniq(a) => [1, 2, 5, 9]
_pick
@description 创建一个从 object 中选中的 key 的对象。
@example
var object = { 'a': 1, 'b': '2', 'c': 3 }
utils._pick(object, ['a', 'c']) => { 'a': 1, 'c': 3 }
var object = { 'a': 1, 'b': '2', 'c': 3 }
utils._pick(object, ['a', 'c']) => { 'a': 1, 'c': 3 }
_omit
@description 反向版 pick
@example
var object = { 'a': 1, 'b': '2', 'c': 3 }
utils._pick(object, ['a', 'c']) => { 'b': '2' }
_isUndefined
@description 判断是否为undefined
@returns 返回布尔值
@example
var a
utils._isUndefined(a) => true
_isUndefined
@description 判断是否为undefined
@returns 返回布尔值
@example
var a
utils._isUndefined(a) => true
_isNaN
@description 判断是否为NaN
@returns 返回布尔值
@example
var a = +'str'
utils._isNaN(a) => true
_isString
@description 判断是否String
@returns 返回布尔值
@example
var a = +'str'
utils._isString('abc') => true
utils._isString(1) => false
_debounce
@description 防抖函数
防抖函数真的太棒了,系统里那么多按钮都需要防抖处理。比如导出按钮,当然除了防抖函数我还另外上锁,避免由于网络原因造成的用户多次点击触发多次请求。
// 导出
export: utils._debounce(() => {
if (this.exportLock) return
this.exportLock = true
exportCommonData({
...this.formQuery,
...this.filter
}).then(res => {
delete this.exportLock
res.url && window.open(res.url)
})
}, 1000),