第 017 期 8 个实用的 Lodash 方法介绍

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

1 对象的深度拷贝

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

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

API:

_.cloneDeep(obj)

例子:

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

2 防抖

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

API:

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

参数说明：

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

例子：

jQuery(window).on(
  'resize',
  _.debounce(calculateLayout, 150)
)

3 节流

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

API:

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

参数说明:

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

例子:

const throttled = _.throttle(
  renewToken,
  300000,
  { 'trailing': false }
);
jQuery(element).on('click', throttled);

4 移除对象上的一些属性

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

API：

_.omit(object, [props])

参数说明：

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

例子：

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

5 选择对象上的一些属性

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

API：

_.pick(object, [props])

例子：

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

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

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

API:

_.compact(array)

例子：

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

7 生成全局唯一ID

API:

_.uniqueId([prefix=''])

例子:

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

8 生成随机数

API:

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

例子:

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

参考文档

• 前端必看的js对象深拷贝方法
• lodash常用/最频繁使用的方法
• Lodash 中文文档