lodash 学习笔记 (3)

防止提交按钮被瞬间点击多次,导致大量的请求被重复发送

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、Number

clamp - 返回限制在 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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zygjgp.html