lodash作用（Lodash 使用及常用方法）

简介

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 \\全局安装

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

常见方法

_.chunk(array, [size=1])

含义：将数组（array）拆分成多个 size 长度的区块

 

 

 

 

 

 

 

，并将这些区块组成一个新数组














。

例子：

_.chunk([a, b, c, d], 2); // => [[a, b], [c, d]] _.chunk([a, b, c, d], 3); // => [[a, b, c], [d]] _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]

_.findIndex(array, [predicate=_.identity], [fromIndex=0])

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

参数：

array (Array): 要搜索的数组 
  
  
  
  
  
  
  。 [predicate=_.identity] (Array|Function|Object|string): 这个函数会在每一次迭代调用 


 


 


 


 


 


 


 

。 [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

_.uniq(array)

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

参数：

array (Array): 要检查的数组

 

 

 

 

 

 

 

。

返回值：

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

例子：

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

@description 判断是否为undefined

@returns 返回布尔值

var a utils._isUndefined(a) => true _.isNaN(value)

检查 value 是否是 NaN 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 。

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















。

参数：

value (*): 要检查的值                      。

返回值：

(boolean): 如果 value 是一个 NaN














，那么返回 true
  
  
  
  
  
  
  
 ，否则返回 false 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 。

例子：

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

防抖函数真的太棒了 
  
  
  
  
  
  
  ，系统里那么多按钮都需要防抖处理






















。比如导出按钮 


 


 


 


 


 


 


 

，当然除了防抖函数我还另外上锁
 
 
 
 
 
 
 
，避免由于网络原因造成的用户多次点击触发多次请求               。

// 导出 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), _.isEmpty (value)

​ 检查 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