lodash-es js工具函数

文章目录

- 为什么选择 Lodash
- 安装和文档
- 基本使用
- - 节流：throttle
  - - 参数
    - 返回
    - 例子
  - 防抖：debounce
  - - 参数
    - 返回
    - 例子
  - 浅拷贝：clone
  - - 参数
    - 返回
    - 例子
  - 深拷贝：cloneDeep
  - - 参数
    - 返回
    - 例子
  - 随机数：random
  - - 参数
    - 返回
    - 例子
  - 判断是否是isNaN
  - - 参数
    - 返回
    - 例子

lodash-es、lodash 都是封装js的工具函数，二者是一样的东西就是版本不同，推荐使用lodash-es

为什么选择 Lodash

Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 Lodash 的模块化方法非常适用于：

遍历 array、object 和 string
对值进行操作和检测
创建符合功能的函数

安装和文档

npm i lodash-es

Lodash 中文文档

Lodash-es 文档

基本使用

import { debounce，isNaN， isNumber，cloneDeep，throttle} from ‘lodash-es’;

节流：throttle

_.throttle(func, [wait=0], [options=])创建一个节流函数，在 wait 秒内最多执行 func 一次的函数。该函数提供一个 cancel 方法取消延迟的函数调用以及 flush 方法立即调用。可以提供一个 options 对象决定如何调用 func 方法，与|或决定 wait 前后如何触发。 func 会传入最后一次传入的参数给这个函数。随后调用的函数返回是最后一次 func 调用的结果。

注意: 如果 leading 和 trailing 都设定为 true 则 func 允许 trailing 方式调用的条件为: 在 wait 期间多次调用。

如果 wait 为 0 并且 leading 为 false, func调用将被推迟到下一个点，类似setTimeout为0的超时。

查看David Corbacho’s article 了解_.throttle 与_.debounce 的区别。

参数

func (Function): 要节流的函数。
[wait=0] (number): 需要节流的毫秒。
[options=] (Object): 选项对象。
[=true] (boolean): 指定调用在节流开始前。
[=true] (boolean): 指定调用在节流结束后。

(Function): 返回节流的函数。

例子

// 避免在滚动时过分的更新定位
jQuery(window).on('scroll', _.throttle(updatePosition, 100));
 
// 点击后就调用 `renewToken`，但5分钟内超过1次。
var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
jQuery(element).on('click', throttled);
 
// 取消一个 trailing 的节流调用。
jQuery(window).on('popstate', throttled.cancel);

防抖：debounce

_.debounce(func, [wait=0], [options=])

创建一个 debounced（防抖动）函数，该函数会从上一次被调用后，延迟 wait 毫秒后调用 func 方法。 debounced（防抖动）函数提供一个 cancel 方法取消延迟的函数调用以及 flush 方法立即调用。可以提供一个 options（选项）对象决定如何调用 func 方法，与|或决定延迟前后如何触发（注：是先调用后等待还是先等待后调用）。 func 调用时会传入最后一次提供给 debounced（防抖动）函数的参数。后续调用的 debounced（防抖动）函数返回是最后一次 func 调用的结果。

注意: 如果 leading 和 trailing 选项为 true, 则 func 允许 trailing 方式调用的条件为: 在 wait 期间多次调用防抖方法。

如果 wait 为 0 并且 leading 为 false, func调用将被推迟到下一个点，类似setTimeout为0的超时。

SeeDavid Corbacho’s articlefor details over the differences between_.debounce and_.throttle.

参数

func (Function): 要防抖动的函数。
[wait=0] (number): 需要延迟的毫秒数。
[options=] (Object): 选项对象。
[=false] (boolean): 指定在延迟开始前调用。
[] (number): 设置 func 允许被延迟的最大值。
[=true] (boolean): 指定在延迟结束后调用。

(Function): 返回新的 debounced（防抖动）函数。

例子

// 避免窗口在变动时出现昂贵的计算开销。
jQuery(window).on('resize', _.debounce(calculateLayout, 150));
 
// 当点击时 `sendMail` 随后就被调用。
jQuery(element).on('click', _.debounce(sendMail, 300, {
  'leading': true,
  'trailing': false
}));
 
// 确保 `batchLog` 调用1次之后，1秒内会被触发。
var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
var source = new EventSource('/stream');
jQuery(source).on('message', debounced);
 
// 取消一个 trailing 的防抖动调用
jQuery(window).on('popstate', debounced.cancel);

浅拷贝：clone

_.clone(value)

创建一个 value 的浅拷贝。

注意: 这个方法参考自structured clone algorithm 以及支持 arrays、array buffers、 booleans、 date objects、maps、 numbers， Object 对象, regexes, sets, strings, symbols, 以及 typed arrays。 arguments对象的可枚举属性会拷贝为普通对象。一些不可拷贝的对象，例如error objects、functions, DOM nodes, 以及 WeakMaps 会返回空对象。

参数

value (*): 要拷贝的值

(*): 返回拷贝后的值。

例子

var objects = [{ 'a': 1 }, { 'b': 2 }];
 
var shallow = _.clone(objects);
console.log(shallow[0] === objects[0]);
// => true

深拷贝：cloneDeep

_.cloneDeep(value)

这个方法类似_.clone，除了它会递归拷贝 value。（注：也叫深拷贝）。

参数

value (*): 要深拷贝的值。

(*): 返回拷贝后的值。

例子

var objects = [{ 'a': 1 }, { 'b': 2 }];
 
var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// => false

随机数：random

_.random([lower=0], [upper=1], [floating])

产生一个包括 lower 与 upper 之间的数。如果只提供一个参数返回一个0到提供数之间的数。如果 floating 设为 true，或者 lower 或 upper 是浮点数，结果返回浮点数。

注意: JavaScript 遵循 IEEE-754 标准处理无法预料的浮点数结果。

参数

[lower=0] (number): 下限。
[upper=1] (number): 上限。
[floating] (boolean): 指定是否返回浮点数。

(number): 返回随机数。

例子

_.random(0, 5);
// => an integer between 0 and 5
 
_.random(5);
// => also an integer between 0 and 5
 
_.random(5, true);
// => a floating-point number between 0 and 5
 
_.random(1.2, 5.2);
// => a floating-point number between 1.2 and 5.2

判断是否是isNaN

_.isNaN(value)

检查 value 是否是 NaN。

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

参数

value (*): 要检查的值。

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

例子

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

秒客网