lodash一些好用的函数

1._debounce和_.throttle 防抖和节流

throttle Demo走起（Vue写法）

testThrottle: _.throttle(function() {
  console.log("throttle");
}, 5000, {
  leading: true,
  trailing: false
})

testThrottle方法被绑定在一个按钮上，demo最终的效果是 ：

①按钮点击后控制台立马打印了throttle——19:39:00；

②5秒内点击多次按钮，最终只打印一次throttle——19:39:05前；

③5秒后再点击一次，会重新打印throttle——19:39:05后；

PS：lodash默认trailing为true，那么最终的效果是在点击时会立即打印throttle，且5秒后又会再打印一次，即节流之前和之后都会执行该节流函数。

throttle 总结走起

预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新的时间周期。

简言之：结束时间点不会随点击改变

debounce Demo走起

testDebounce: _.debounce(function() {
  console.log("debounce");
}, 2000, {
  leading: true,
  trailing: false
})

testDebounce方法被绑定在一个按钮上，demo最终的效果是 ：

1、按钮点击后控制台立马打印了debounce——19:39:00；

2、5秒内点击多次按钮，最终只打印一次debounce——19:39:05前，假设19:39:04完成了最后一次点击；

3、相对于最后一次点击的5秒后再点击一次，会重新打印debounce——19:39:09后；

PS：lodash默认leading为false、trailing为true，那么最终的效果是在点击后等待5秒才会打印debounce，即延迟之前不执行函数，而是在延迟之后执行。

debounce 总结走起

当调用动作触发一段时间后，才会执行该动作，若在这段时间间隔内又调用此动作则将重新计算时间间隔。

简言之：结束时间点会随点击改变

综上所述，适用情况如下：

throttle

（1）对于键盘事件，当用户键入非常频繁，但我们又必须要在一定时间（阀值）内执行处理函数的时候。例如：一些网页游戏的键盘事件。

（2）对于鼠标移动和窗口滚动，鼠标的移动和窗口的滚动会带来大量的事件，但是在一段时间内又必须看到页面的效果。例如：对于可以拖动的div，如果使用debounce，那么div会在拖动停止后突然跳到目标位置；这时就需要使用throttle。

debounce

（1）对于键盘事件，当用户输入比较频繁的时候，可以通过debounce合并键盘事件处理。例如：需要在用户输入完成时进行字符串校验。

（2）对于ajax请求的情况。例如：当页面下拉超过一定范围就通过ajax请求新的页面内容，这时候可以通过debounce合并ajax请求事件。

 

2. _transfrom方法

_.transform(object, [iteratee=_.identity], [accumulator])，这个方法可以用于复杂类型的深度比较，详见 实际开发的问题第34

_.reduce的替代方法;此方法将转换object对象为一个新的accumulator对象，结果来自iteratee处理自身可枚举的属性。 每次调用可能会改变 accumulator 对象。如果不提供accumulator，将使用与[[Prototype]]相同的新对象。iteratee调用4个参数：(accumulator, value, key, object)。如果返回 false，iteratee 会提前退出。

参数

1. object (Object): 要遍历的对象
2. [iteratee=_.identity] (Function): 每次迭代时调用的函数。
3. [accumulator] (*): 定制叠加的值。

返回

(*): 返回叠加后的值。

例子

_.transform([2, 3, 4], function(result, n) {
  result.push(n *= n);  return n % 2 == 0;
}, []);
// => [4, 9] 这里的意思是到9的时候return的是false，所以这时候就不会再继续执行函数了

　　

_.transform({ 'a': 1, 'b': 2, 'c': 1 }, function(result, value, key) {
  (result[value] || (result[value] = [])).push(key);
}, {});
// => { '1': ['a', 'c'], '2': ['b'] }  这里相当于是把key和value的位置反过来了，对于相同的value会进行合并