防止提交按钮被瞬间点击多次,导致大量的请求被重复发送
jQuery(window).on('resize', _.debounce(calculateLayout, 150)); // 取消一个 trailing 的防抖动调用 jQuery(window).on('popstate', debounced.cancel);throttle - 节流阀,在 wait 秒内最多执行 func 一次的函数。
应用:避免在页面滚动时频繁的更新定位
jQuery(window).on('scroll', _.throttle(updatePosition, 100)); // 取消一个 trailing 的节流调用。 jQuery(window).on('popstate', throttled.cancel);debounce 和 throttle 的区别:
debounce 和 throttle 都有 leading 和 trailing 的配置项。在都是默认值的情况下,使得这两个函数适用场景不一样,前者更多的是反抖,后者是节流。而当两者配置项相同的话,可以理解是一致的。
var time_v = 2000; // debounce leading/trailing 的默认值 _.debounce(() => console.log(_.random(10, 20)), time_v, { leading: false, trailing: true }); // throttle leading/trailing 的默认值 _.throttle(() => console.log(_.random(10, 20)), time_v, { leading: true, trailing: true }); (6)缓存结果memoize - 缓存函数的计算结果
应用:缓存耗时较长的计算
var object = { a: 1, b: 2 }; var other = { c: 3, d: 4 }; var values = _.memoize(_.values); // usage values(object); // => [1, 2] values(other); // => [3, 4] // 验证缓存是否生效 object.a = 2; values(object); // => [1, 2] ( 证明把 object 的地址当成了缓存 key ) // 修改缓存结果 values.cache.set(object, [5, 6]); values(object); // => [ 5, 6 ] // 清除缓存 values.cache.clear(object); values(object); // => [ 2, 2 ] (7)翻转断言函数negate
应用:可跟 filter 搭配
function isEven(n) { return n % 2 == 0; } _.filter([1, 2, 3, 4, 5, 6], _.negate(isEven)); // => [1, 3, 5] 5、Lang (1)拷贝clone - 浅拷贝
cloneDeep - 深拷贝
var objects = [{ a: 1 }, { b: 2 }]; var shallow = _.clone(objects); console.log(shallow === objects); //false console.log(shallow[0] === objects[0]); //true var deep = _.cloneDeep(objects); console.log(deep[0] === objects[0]); //false (2)判断相等eq - 浅比较
isEqual - 深比较
var object = { 'a': 1 }; var other = { 'a': 1 }; _.eq(object, object); // => true _.eq(object, other); // => false _.isEqual(object, other); // => true object === other; // => false (3)判断类型isArray/isArrayLike/isArrayLikeObject - isArrayLikeObject = ArrayLike or Object
注意:
isArray isArrayLike isArrayLikeObject[] T T T
"123" F T F
document.body.children F T T
isElement - DOM 元素。
isError
isNil - null or undefined。
isNaN - NaN
推荐使用这个而不是原生的isNaN(),因为会把 undefined 当成 true。
isObject/isObjectLike/isPlainObject
注意:javaScript 中数组和函数也是对象,所以:
isObject isObjectLike isPlainObject{} T T T
[] T T F
function(){} T F F
isSafeInteger - 基于 Number.isSafeInteger()
拓展:什么是安全整数?首先,JavaScript 能够准确表示的整数范围在-2^53到2^53之间(不含两个端点),超过这个范围,无法精确表示这个值。
于是 ES6 引入了Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER这两个常量,用来表示这个范围的上下限。
而Number.isSafeInteger()则是用来判断一个整数是否落在这个范围之内。在 lodash 里,可以用isSafeInteger()代替。
注意:验证运算结果是否落在安全整数的范围内,不要只验证运算结果,而要同时验证参与运算的每个值。
(4)判断空isEmpty
对于object - 没有可枚举的属性
对于字符串和类数组对象,如果length属性为0
(5)类型转换toNumber
toInteger
toString
拓展:toInteger 跟 parseInt 的区别?toInteger 更严格一些:
_.toInteger("123das") // 0 _.parseInt("123das") // 123 Number("123das") // NaN 6、Math略
7、Numberclamp - 返回限制在 lower 和 upper之间的值。
挺适合做 让接受参数落入合法区间。
random - 生成随机数,支持浮点。
8、Object (1)对象合并1、前者覆盖后者
defaults
defaultsDeep
_.defaults({ 'a': 1 }, { 'b': 2 }, { 'a': 3 }); // => { 'a': 1, 'b': 2 } _.defaultsDeep({ 'a': { 'b': 2 } }, { 'a': { 'b': 1, 'c': 3 } }); // => { 'a': { 'b': 2, 'c': 3 } }2、后者覆盖前者
assign