Lodash
第一章:邂逅
一、简介
官方定义:Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。
雨下田上补充:Underscore.js 是较早出现的库,创建于 2009 年。Lodash 是在 2012 年作为 Underscore 的一个分支项目开始的。目前 Lodash 已经在功能、性能和社区支持方面超越了 Underscore。
二、手写精简版 Lodash
;(function(g) {
function Lodash() {
}
// 添加类方法 <== 学习这里的方法
Lodash.VERSION = '1.0.0'
Lodash.join = function(arr, separater) {
// todo ......
return arr.join(separater)
}
// ....
Lodash.debounce = function() {}
Lodash.throttle = function() {}
Lodash.random = function() {}
Lodash.endsWith = function() {}
Lodash.clone = function() {}
Lodash.cloneDeep = function() {}
Lodash.merge = function() {}
g._ = Lodash
})(window)通过手写精简版的 Lodash,我们就知道了接下来主要学习这些类方法如何使用。
第二章:常用方法
一、数字
1. random
产生一个包括 lower 与 upper 之间的数。 如果只提供一个参数返回一个 0 到提供数之间的数。
如果 floating 设为 true,或者 lower 或 upper 是浮点数,结果返回浮点数。
/*
[lower=0] (number): 下限。
[upper=1] (number): 上限。
[floating] (boolean): 指定是否返回浮点数。
*/
_.random([lower=0], [upper=1], [floating])二、字符串
1. camelCase
转换字符串为小驼峰写法。
/*
[string=''] (string): 要转换的字符串。
*/
_.camelCase([string=''])2. capitalize
转换字符串首字母为大写,剩下为小写。
/*
[string=''] (string): 要大写开头的字符串。
*/
_.capitalize([string=''])3. endsWith
检查字符串是否以给定的 target 字符串结尾。
/*
[string=''] (string): 要检索的字符串。
[target] (string): 要检索字符。
[position=string.length] (number): 指定检查到字符串的哪个位置。默认值是string.length,意味着默认检查整个字符串。
*/
_.endsWith([string=''], [target], [position=string.length])4. padStart
如果字符串长度小于 length,则在左侧填充字符。 如果超出 length 长度则截断超出的部分。
/*
[string=''] (string): 要填充的字符串。
[length=0] (number): 填充的长度。
[chars=' '] (string): 填充字符。
*/
_.padStart([string=''], [length=0], [chars=' '])5. trim
从字符串中移除前面和后面的空格或指定的字符。
/*
[string=''] (string): 要处理的字符串。
[chars=whitespace] (string): 要移除的字符。
*/
_.trim([string=''], [chars=whitespace])三、数组
1. compact
创建一个新数组,包含原数组中所有的非假值元素。例如 false, null, 0, "", undefined, 和 NaN 都是被认为是“假值”。
/*
array (Array): 待处理的数组。
*/
_.compact(array)2. flatten
减少一级 array 嵌套深度。
/*
array (Array): 需要减少嵌套层级的数组。
*/
_.flatten(array)3. uniq
创建一个去重后的 array 数组副本。使用了 SameValueZero 做等值比较。只有第一次出现的元素才会被保留。
/*
array (Array): 要检查的数组。
*/
_.uniq(array)SameValueZero 简单来说就是:使用严格相等(===)和 NaN 与 NaN 比较也视为相等。
四、对象
1. pick
创建一个从 object 中选中的属性的对象。(浅拷贝)
/*
object (Object): 来源对象。
[props] (...(string|string[])): 要被保留的属性。(注:单独指定或指定在数组中。)
*/
_.pick(object, [props])2. omit
与 pick 方法相反。(浅拷贝)
/*
object (Object): 来源对象。
[props] (...(string|string[])): 要被忽略的属性。(注:单独指定或指定在数组中。)
*/
_.omit(object, [props])五、其他
1. clone
浅拷贝。
/*
value: 要拷贝的值。
*/
_.clone(value)2. cloneDeep
深拷贝。
/*
value: 要深拷贝的值。
*/
_.cloneDeep(value)3. debounce
创建一个防抖函数,该函数会在用户没有继续操作后的 wait 时间后执行。
防抖函数提供一个 cancel 方法取消延迟的函数调用以及 flush 方法立即调用。
注意:
- 如果 leading 和 trailing 选项为 true,则 func 允许 trailing 方式调用的条件为在 wait 期间多次调用防抖方法。
- 如果 wait 为 0 并且 leading 为 false,func 调用将被推迟到下一个点,类似 setTimeout 为 0 的超时。
/*
func (Function): 要防抖动的函数。
[wait=0] (number): 需要延迟的毫秒数。
[options=] (Object): 选项对象。
[options.leading=false] (boolean): 是否立即执行函数。
[options.maxWait] (number): 设置 func 允许被延迟的最大值。防止因用户频繁操作导致函数被无限期地延迟。
[options.trailing=true] (boolean): 指定最后一次是否执行。
*/
_.debounce(func, [wait=0], [options=])4. throttle
创建一个节流函数,在 wait 秒内最多执行 func 一次的函数。
该函数提供一个 cancel 方法取消延迟的函数调用以及 flush 方法立即调用。
注意:
- 如果 leading 和 trailing 都设定为 true,则 func 允许 trailing 方式调用的条件为在 wait 期间多次调用。
- 如果 wait 为 0 并且 leading 为 false,func 调用将被推迟到下一个点,类似 setTimeout 为 0 的超时。
/*
func (Function): 要节流的函数。
[wait=0] (number): 需要节流的毫秒。
[options=] (Object): 选项对象。
[options.leading=true] (boolean): 指定是否立即执行。
[options.trailing=true] (boolean): 指定最后一次是否执行。
*/
_.throttle(func, [wait=0], [options=])