Lodash基础以及在防抖与节流中的应用

简介

Lodash 是一个一致性、模块化 、高性能的 JavaScript 工具库
它提供了大量的函数，如数组处理、字符串操作、对象处理、函数式编程、日期处理等功能，可以大大提高开发效率
官方中文文档：lodashjs.com

安装

$ npm i -g npm  // 全局安装
$ npm i --save lodash  //安装库并将其保存到项目的依赖项中

导入库

import _ from 'lodash'  // 引入整个lodash

import throttle from 'lodash/throttle' // 只引入需要的工具函数 ==> 打包文件变小了

应用

1 、_.throttle() 节流
可以限制一个函数在一段时间内只能调用一次
优化高频事件触发处理，比如鼠标在网页上快速滑动时, mouseenter事件高频触发, 导致界面高频更新，

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

参数：

• func (Function): 要节流的函数。
• [wait=0] (number): 需要节流的毫秒。
• [options=] (Object): 选项对象。
• [options.leading=false] (boolean): 第一次不立即调用
• [options.trailing=true] (boolean): 最后一次延迟调用

创建一个节流函数，在 wait 秒内最多执行 func 一次的函数。

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

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

showSubCategorys: throttle(function (index) {
        // 如果已经移出了整个div, 不需要更新
        // if (this.currentIndex === -2) return
        console.log(index)
        this.currentIndex = index
      }, 200, {trailing: false}),// 最后不延迟执行

2、 _.debounce() 防抖
可以限制一个函数在短时间内多次调用
就是在规定时间连续输入时只取最后一次的值（只要输入时停顿的时间不超过规定值那么就不会执行）并返回一个 新的函数。它接受两个参数：要限制的函数和延迟时间（以毫秒为单位）。

const debounceFunc = _.debounce((num) => console.log(num), 1000);
// debounceFunc('0')

3、_.cloneDeep()
cloneDeep()方法可以深度复制一个对象或数组，返回一个新的对象或数组。

const cloneDeepObj = { a: { b: { c: 1 } } };
const newObj = _.cloneDeep(cloneDeepObj);
newObj.a.b.c = 2;
console.log(cloneDeepObj.a.b.c, newObj.a.b.c, 'cloneDeep-cloneDeep-cloneDeep-cloneDeep'); // 1 2 cloneDeep-cloneDeep-cloneDeep-cloneDeep

4、pick()
创建一个从 object 中选中的属性的对象。

const pickObj = { a: 1, b: 2, c: 3 };
const newPickObj = _.pick(pickObj, ['a', 'c']);
console.log(newPickObj, 'pick-pick-pick-pick'); // { a: 1, c: 3 } pick-pick-pick-pick

5、after(n, func) 被调用n次之后马上触发func
6、before(n, func)：调用n次后不再执行func，n次后的返回值为第n次返回值
7、curry | curryRight ：柯里化
柯里化可以将一个接受多个参数的函数转换为一系列只接受一个参数的函数。

var abc = function(a, b, c) {
  return [a, b, c];
};
 
var curried = _.curry(abc);
 // 逐个传入参数1，2，3
curried(1)(2)(3); // [1,2,3]

curried(1)(2)(3) 的写法是将参数逐个传入这个柯里化函数的返回值，每次传入一个参数后都会返回一个新的函数，直到所有参数都传入完毕。
这样的写法可以实现函数的连续调用，非常方便。
8、defer ： 推迟调用func，直到当前堆栈清理完毕
9、unary ： 创建一个最多接受一个参数的函数，忽略多余的参数