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 中文文档