Skip to content

Lodash

第一章:邂逅

一、简介

官方定义:Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。

雨下田上补充:Underscore.js 是较早出现的库,创建于 2009 年。Lodash 是在 2012 年作为 Underscore 的一个分支项目开始的。目前 Lodash 已经在功能、性能和社区支持方面超越了 Underscore。

二、手写精简版 Lodash

javascript
;(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 是浮点数,结果返回浮点数。

javascript
/*
  [lower=0] (number): 下限。
  [upper=1] (number): 上限。
  [floating] (boolean): 指定是否返回浮点数。
*/
_.random([lower=0], [upper=1], [floating])

二、字符串

1. camelCase

转换字符串为小驼峰写法。

javascript
/*
  [string=''] (string): 要转换的字符串。
*/
_.camelCase([string=''])

2. capitalize

转换字符串首字母为大写,剩下为小写。

javascript
/*
  [string=''] (string): 要大写开头的字符串。
*/
_.capitalize([string=''])

3. endsWith

检查字符串是否以给定的 target 字符串结尾。

javascript
/*
  [string=''] (string): 要检索的字符串。
  [target] (string): 要检索字符。
  [position=string.length] (number): 指定检查到字符串的哪个位置。默认值是string.length,意味着默认检查整个字符串。
*/
_.endsWith([string=''], [target], [position=string.length])

4. padStart

如果字符串长度小于 length,则在左侧填充字符。 如果超出 length 长度则截断超出的部分。

javascript
/*
  [string=''] (string): 要填充的字符串。
  [length=0] (number): 填充的长度。
  [chars=' '] (string): 填充字符。
*/
_.padStart([string=''], [length=0], [chars=' '])

5. trim

从字符串中移除前面和后面的空格或指定的字符。

javascript
/*
  [string=''] (string): 要处理的字符串。
  [chars=whitespace] (string): 要移除的字符。
*/
_.trim([string=''], [chars=whitespace])

三、数组

1. compact

创建一个新数组,包含原数组中所有的非假值元素。例如 false, null, 0, "", undefined, 和 NaN 都是被认为是“假值”。

javascript
/*
  array (Array): 待处理的数组。
*/
_.compact(array)

2. flatten

减少一级 array 嵌套深度。

javascript
/*
  array (Array): 需要减少嵌套层级的数组。
*/
_.flatten(array)

3. uniq

创建一个去重后的 array 数组副本。使用了 SameValueZero 做等值比较。只有第一次出现的元素才会被保留。

javascript
/*
  array (Array): 要检查的数组。
*/
_.uniq(array)

SameValueZero 简单来说就是:使用严格相等(===)和 NaN 与 NaN 比较也视为相等。

四、对象

1. pick

创建一个从 object 中选中的属性的对象。(浅拷贝)

javascript
/*
  object (Object): 来源对象。
  [props] (...(string|string[])): 要被保留的属性。(注:单独指定或指定在数组中。)
*/
_.pick(object, [props])

2. omit

与 pick 方法相反。(浅拷贝)

javascript
/*
  object (Object): 来源对象。
  [props] (...(string|string[])): 要被忽略的属性。(注:单独指定或指定在数组中。)
*/
_.omit(object, [props])

五、其他

1. clone

浅拷贝。

javascript
/*
  value: 要拷贝的值。
*/
_.clone(value)

2. cloneDeep

深拷贝。

javascript
/*
  value: 要深拷贝的值。
*/
_.cloneDeep(value)

3. debounce

创建一个防抖函数,该函数会在用户没有继续操作后的 wait 时间后执行。

防抖函数提供一个 cancel 方法取消延迟的函数调用以及 flush 方法立即调用。

注意:

  • 如果 leading 和 trailing 选项为 true,则 func 允许 trailing 方式调用的条件为在 wait 期间多次调用防抖方法。
  • 如果 wait 为 0 并且 leading 为 false,func 调用将被推迟到下一个点,类似 setTimeout 为 0 的超时。
javascript
/*
  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 的超时。
javascript
/*
  func (Function): 要节流的函数。
  [wait=0] (number): 需要节流的毫秒。
  [options=] (Object): 选项对象。
  [options.leading=true] (boolean): 指定是否立即执行。
  [options.trailing=true] (boolean): 指定最后一次是否执行。
*/
_.throttle(func, [wait=0], [options=])

Released under the MIT License.