Lodash 提供了很多很多的工具方法。本文介绍其中 8 个实用的方法。

1 对象的深度拷贝

对象的深度克隆是很困难的。 JSON.parse(JSON.stringify(obj)) 可以实现对象的深度克隆。但有如下缺点:

  • 值类型是 undefined、function、symbol 的属性会被过滤掉。
  • 是类型是 set、map 会被被处理成空对象。
  • 对象的属性间出现循环引用时，会报错。

API:

  1. _.cloneDeep(obj)

例子:

  1. const obj = [{ 'a': 1 }, { 'b': 2 }];
  2. const res = _.cloneDeep(obj)

2 防抖

防抖用来防止因事件触发次数过频繁，导致性能浪费。窗口的 resize 事件，列表的 scroll 事件，输入框 input 事件，触发频繁很高，都可以用防抖来优化。

API:

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

参数说明：

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

例子：

  1. jQuery(window).on(
  2.   'resize',
  3.   _.debounce(calculateLayout, 150)
  4. )

3 节流

节流用来控制事件发生的频率。如控制为 1秒 发生一次，甚至 1分钟 发生一次。

API:

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

参数说明:

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

例子:

  1. const throttled = _.throttle(
  2.   renewToken,
  3.   300000,
  4.   { 'trailing': false }
  5. );
  6. jQuery(element).on('click', throttled);

4 移除对象上的一些属性

把数据提交给接口，很多情况下，都要移除只在前端用，但接口不需要的属性。

API：

  1. _.omit(object, [props])

参数说明：

  • object (Object): 来源对象。
  • [props] (…(string|string[])): 要被忽略的属性。（注：单独指定或指定在数组中。）

例子：

  1. const object = { 'a': 1, 'b': '2', 'c': 3 };
  2. _.omit(object, ['a', 'c']);
  3. //  => { 'b': '2' }

5 选择对象上的一些属性

选择对象上的一些属性和移除属性操作相反。

API：

  1. _.pick(object, [props])

例子：

  1. const object = { 'a': 1, 'b': '2', 'c': 3 };
  2. _.pick(object, ['a', 'c']);
  3. // => { 'a': 1, 'c': 3 }

6 除去原数组中所有的假值元素

假值包含：false, null, 0, "", undefined 和 NaN。

API:

  1. _.compact(array)

例子：

  1. _.compact([0, 1, false, 2, '', 3]);
  2. // => [1, 2, 3]

7 生成全局唯一ID

API:

  1. _.uniqueId([prefix=''])

例子:

  1. _.uniqueId() // => 104
  2. _.uniqueId('contact_') // => contact_105

8 生成随机数

API:

  1. _.random([lower=0], [upper=1], [floating])

例子:

  1. _.random(0, 5) // => 0 到 5 之间的整数
  2. _.random(5) // => 0 到 5 之间的浮点数

9 比较内容

深度比较内容，支持数组，对象等。

API:

  1. _.isEqual(value, other)

例子：

  1. _.isEqual({a: 1}, {a: 1})
  2. _.isEqual([1, 2, 3], [1, 2, 3])

参考文档