Skip to main content

Lodash 函数类操作

一、限定：n 次后调用 _.after​

_.after(n, func)

参数

  • n (number): func 方法应该在调用多少次后才执行。
  • func (Function): 用来限定的函数。

返回

  • (Function): 返回新的限定函数。

创建一个函数，当他被调用 n 或更多次之后将触发 func。

var saves = ['profile', 'settings'];
 
var done = _.after(saves.length, function() {
  console.log('done saving!');
});
 
_.forEach(saves, function(type) {
  asyncSave({ 'type': type, 'complete': done });
});
// => 2次 `asyncSave`之后，输出 'done saving!'。

二、限定：超 n 次后不调用 _.before​

_.before(n, func)

参数

  • n (number): 超过多少次不再调用 func（注：限制调用 func 的次数）。
  • func (Function): 限制执行的函数。

返回

  • (Function): 返回新的限定函数。

创建一个调用 func 的函数。 调用次数不超过 N 次。之后再调用这个函数，将返回最后一个调用的结果。

与 _.after 相反。

jQuery(element).on('click', _.before(5, addContactToList));
// => 最多允许添加 4 个联系人到列表里

三、限制参数 _.ary​

_.ary(func, [n=func.length])

参数

  • func (Function): 需要被限制参数个数的函数。
  • n (number): 限制的参数数量。

返回

  • (Function): 返回新的覆盖函数。

创建一个最多接受 N 个参数，忽略多余参数的方法。

_.map(['6', '8', '10'], _.ary(parseInt, 1));
// => [6, 8, 10]

四、参数量返回结果或函数 _.curry​

_.curry(func, [arity=func.length])

参数

  • func (Function): 用来柯里化（curry）的函数。
  • arity (number): 需要提供给 func 的参数数量。

返回

  • (Function): 返回新的柯里化（curry）函数。

创建一个函数，该函数接收 func 的参数。

当该函数被调用时，如果 func 所需要传递的所有参数都已提供，则直接返回 func 所执行的结果。否则继续返回一个函数，并接收剩余的 func 参数。

可以使用 arity 强制需要累积的参数个数。

var abc = function(a, b, c) {
  return [a, b, c];
};
 
var curried = _.curry(abc);
 
curried(1)(2)(3);
// => [1, 2, 3]
 
curried(1, 2)(3);
// => [1, 2, 3]
 
curried(1, 2, 3);
// => [1, 2, 3]

curried(1)(3)(2)
// => [1, 3, 2]
 
// 使用了占位符
curried(1)(_, 3)(2);
// => [1, 2, 3]

五、防抖动函数 _.debounce​

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

参数

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

返回

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

创建一个防抖动函数，该函数会在 wait 毫秒后调用 func 方法。

1、cancel 方法取消延迟的函数调用。

2、flush 方法立即调用。

3、options 对象决定如何调用 func 方法。

4、options.leading 与 options.trailing 决定延迟前后如何触发。

func 调用时会传入最后一次提供给防抖动函数的参数，随后调用的防抖动函数返回是最后一次 func 调用的结果。

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

// 避免窗口在变动时出现昂贵的计算开销。
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);

六、频率节流函数 _.throttle​

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

参数

  • func (Function): 要节流的函数。
  • wait (number): 需要节流的毫秒，默认为 0。
  • options (Object): 选项对象。
  • options.leading (boolean): 指定调用在节流开始前，默认为 true。
  • options.trailing (boolean): 指定调用在节流结束后，默认为 true。

返回

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

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

1、cancel 方法取消延迟的函数调用。

2、flush 方法立即调用。

3、options 对象决定如何调用 func 方法。

4、options.leading 与 options.trailing 决定 wait 前后如何触发。

func 会传入最后一次传入的参数给这个函数。 随后调用的函数返回是最后一次 func 调用的结果。

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

// 避免在滚动时过分的更新定位
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);

七、堆栈清空后调用 _.defer​

_.defer(func, [args])

参数

  • func (Function): 要延迟的函数。
  • args (...*): 会在调用时传给 func 的参数。

返回

  • (number):返回计时器 id。

推迟调用 func，直到当前堆栈清理完毕。调用时，任何附加的参数会传给 func。

_.defer(function(text) {
  console.log(text);
}, 'deferred');
// => 一毫秒或更久一些输出 'deferred'。

八、延迟时间调用 _.delay​

_.delay(func, wait, [args])

参数

  • func (Function): 要延迟的函数。
  • wait (number): 要延迟的毫秒数。
  • args (...*): 会在调用时传入到 func 的参数。

返回

  • (number): 返回计时器 id

延迟 wait 毫秒后调用 func。调用时，任何附加的参数会传给 func。

_.delay(function(text) {
  console.log(text);
}, 1000, 'later');
// => 一秒后输出 'later'。

九、缓存返回内容 _.memoize​

_.memoize(func, [resolver])

参数

  • func (Function): 需要缓存化的函数.
  • resolver (Function): 这个函数的返回值作为缓存的 key。

返回

  • (Function): 返回缓存化后的函数。

创建一个会缓存 func 结果的函数。如果提供了 resolver，就用 resolver 的返回值作为 key 缓存函数的结果。

默认情况下用第一个参数作为缓存的 key，func 在调用时 this 会绑定在缓存函数上。

var object = { 'a': 1, 'b': 2 };
var other = { 'c': 3, 'd': 4 };
 
var values = _.memoize(_.values);
values(object);
// => [1, 2]
 
values(other);
// => [3, 4]
 
object.a = 2;
values(object);
// => [1, 2]
 
// 修改结果缓存。
values.cache.set(object, ['a', 'b']);
values(object);
// => ['a', 'b']
 
// 替换 `_.memoize.Cache`。
_.memoize.Cache = WeakMap;

十、函数结果取反 _.negate​

_.negate(predicate)

参数

  • predicate (Function): 需要对结果取反的函数。

返回

  • (Function): 返回一个新的取反函数。

创建一个对 func 结果取反的函数。当这个函数被调用时，this 会绑定到这个创建的函数，并传入对应参数。

function isEven(n) {
  return n % 2 == 0;
}
 
_.filter([1, 2, 3, 4, 5, 6], _.negate(isEven));
// => [1, 3, 5]

十一、仅调用一次 _.once​

_.once(func)

参数

  • func (Function): 指定的触发的函数。

返回

  • (Function): 返回新的受限函数。

创建一个只能调用 func 一次的函数。重复调用返回第一次调用的结果。func 调用时，this 绑定到创建的函数，并传入对应参数。

var initialize = _.once(createApplication);
initialize();
initialize();
// `initialize` 只能调用 `createApplication` 一次。