Lodash 使用及常用方法

发布时间：2023-04-25 文章分类：WEB开发, 电脑百科 投稿人：李佳 字号： 默认 | 大 | 超大 打印

简介

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。它内部封装了诸多对字符串、数组、对象等常见数据类型的处理函数,Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。

官网

Lodash 简介 | Lodash 中文文档 | Lodash 中文网

    Array：适用于数组类型，比如填充数据、查找元素、数组分片等操作
    Collection：适用于数组和对象类型，部分适用于字符串，比如分组、查找、过滤等操作
    Function：适用于函数类型，比如节流、延迟、缓存、设置钩子等操作
    Lang：普遍适用于各种类型，常用于执行类型判断和类型转换
    Math：适用于数值类型，常用于执行数学运算
    Number：适用于生成随机数，比较数值与数值区间的关系
    Object：适用于对象类型，常用于对象的创建、扩展、类型转换、检索、集合等操作
    Seq：常用于创建链式调用，提高执行性能（惰性计算）
    String：适用于字符串类型


使用

1、首先通过npm全局安装ladash

npm i -save lodash   \\全局安装

Lodash 使用及常用方法

2、按需引入了如下方法：

方法一：
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'
方法二：
import {debounce, isString, isUndefined, isNaN, map} from 'lodash'

常见方法

含义：将数组（array）拆分成多个 size 长度的区块，并将这些区块组成一个新数组。

例子：

_.chunk(['a', 'b', 'c', 'd'], 2);
// => [['a', 'b'], ['c', 'd']]
_.chunk(['a', 'b', 'c', 'd'], 3);
// => [['a', 'b', 'c'], ['d']]

@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]

该方法类似_.find，区别是该方法返回第一个通过 predicate 判断为真值的元素的索引值（index），而不是元素本身。

参数：

  1. array (Array): 要搜索的数组。
  2. [predicate=_.identity] (Array|Function|Object|string): 这个函数会在每一次迭代调用。
  3. [fromIndex=0] (number): The index to search from.

返回值：

(number): 返回找到元素的 索引值（index），否则返回 -1。

例子：

var users = [
  { 'user': 'barney',  'active': false },
  { 'user': 'fred',    'active': false },
  { 'user': 'pebbles', 'active': true }
];
_.findIndex(users, function(o) { return o.user == 'barney'; });
// => 0
// The `_.matches` iteratee shorthand.
_.findIndex(users, { 'user': 'fred', 'active': false });
// => 1
// The `_.matchesProperty` iteratee shorthand.
_.findIndex(users, ['active', false]);
// => 0
// The `_.property` iteratee shorthand.
_.findIndex(users, 'active');
// => 2

创建一个去重后的array数组副本。使用了SameValueZero 做等值比较。只有第一次出现的元素才会被保留

参数：

  1. array (Array): 要检查的数组。

返回值：

(Array): 返回新的去重后的数组。

例子：

_.uniq([2, 1, 2]);
// => [2, 1]

@description 判断是否为undefined

@returns 返回布尔值

 var a
 utils._isUndefined(a) => true

检查 value 是否是 NaN。
注意: 这个方法基于Number.isNaN，和全局的isNaN 不同之处在于，全局的isNaN对 于 undefined 和其他非数字的值返回 true。

参数：

  1. value (*): 要检查的值。

返回值：

(boolean): 如果 value 是一个 NaN，那么返回 true，否则返回 false。

例子：

_.isNaN(NaN);
// => true
_.isNaN(new Number(NaN));
// => true
isNaN(undefined);
// => true
_.isNaN(undefined);
// => false

防抖函数真的太棒了，系统里那么多按钮都需要防抖处理。比如导出按钮，当然除了防抖函数我还另外上锁，避免由于网络原因造成的用户多次点击触发多次请求。

// 导出
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),

​ 检查 value 是否为一个空对象，集合，映射或者set。 判断的依据是除非是有枚举属性的对象，length 大于 0 的 arguments object, array, string 或类jquery选择器。

​ 对象如果被认为为空，那么他们没有自己的可枚举属性的对象。

​ 类数组值，比如arguments对象，array，buffer，string或者类jQuery集合的length 为 0，被认为是空。类似的，map（映射）和set 的size 为 0，被认为是空。

参数：

value (*): 要检查的值。

返回值：

(boolean): 如果 value 为空，那么返回 true，否则返回 false。

例子：

_.isEmpty(null);
// => true
 
_.isEmpty(true);
// => true
 
_.isEmpty(1);
// => true
 
_.isEmpty([1, 2, 3]);
// => false
 
_.isEmpty({ 'a': 1 });
// => false
标签 , ,