当前位置: 首页 > article >正文

lodash常用函数

文章目录

  • 一、数组
    • 1、chunk分组
    • 2、difference、differenceBy、differenceWith
    • 3、findIndex
    • 4、intersection、intersectionBy、intersectionWith
    • 5、union、unionBy、unionWith
  • 二、对象
    • 1、pick、omit
  • 2、get、set
  • 三、数学
    • 1、sum、sumBy
    • 2、range
  • 四、工具函数
    • 1、isEqual、isEmpty
    • 2、clone、cloneDeep
    • 3、debounce 防抖
    • 4、throttle 节流
    • 5、lodash对象

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

一、数组

1、chunk分组

_.chunk(array, [size=1]);size表示间隔

_.chunk(['a', 'b', 'c', 'd', 'e'], 2);
// => [['a', 'b'], ['c', 'd'], ['e']]

2、difference、differenceBy、differenceWith

  • isEqual函数表示深度比较
  • difference 代表基础数据类型的对比
  • differenceBy 表示对值进行转化后对比
  • differenceWith 表示两个数据整体的对比
  • 差异集合
// 找不同
_.difference([3, 2, 1], [4, 2]);
// => [3, 1]

// array: 目标 values:排除值;iteratee调用每个元素后返回值,再对比该返回值
// _.differenceBy(array, [values], [iteratee=_.identity])
_.differenceBy([3.1, 2.2, 1.3], [4.4, 2.5], Math.floor);
// 等同于
_.differenceBy([3.1, 2.2, 1.3], [4.4, 2.5], (value) => Math.floor(value));
// => [3.1, 1.3] // 2.2 2.5 调用后都是2,所以被识别成同一个值


var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }];
 
_.differenceWith(objects, [{ 'x': 1, 'y': 2 }], _.isEqual);
// => [{ 'x': 2, 'y': 1 }]
_.differenceWith(objects, [{ 'x': 1, 'y': 2 }], (arrVal, othVal) => arrVal.x > othVal.x);
// => [{ 'x': 1, 'y': 2 }]

3、findIndex

  • findIndex(array, [iteratee=_.identity], [fromIndex=0]), [] 中括号表示可选参数,可传可不传,但是不能跨可选,也就是说连续两个可选参数,想要使用第二个参数,也必须使用第一个参数
  • [predicate=_.identity] (Array|Function|Object|string) 该参数可以有多种参数类型,Function基本就是js中的findIndex实现,也可以使用其他快捷方式
  • 由于一些用户的浏览器版本比较低,当使用最新的ECMAScript新语法可能出现异常,直接导致线上问题(自己本地开发不一定有问题),所以一些函数可以借用lodash库辅助实现即可(当然也可以自己定义实现)
var users = [
  { 'user': 'barney',  'active': false },
  { 'user': 'fred',    'active': false },
  { 'user': 'pebbles', 'active': true }
];
 
_.findIndex(users, function(o) { return o.user == 'barney'; }); // Function
// => 0
_.findIndex(users, { 'user': 'fred', }) // Object
// => 1

4、intersection、intersectionBy、intersectionWith

  • 类似于difference,只不过函数结果是取交集
_.intersection([2, 1], [4, 2], [1, 2]); // 基础数据类型
// => [2]
_.intersectionBy([2.1, 1.2], [4.3, 2.4], Math.floor); // 值进行转化
// => [2.1]
var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }];
var others = [{ 'x': 1, 'y': 1 }, { 'x': 1, 'y': 2 }];
 
_.intersectionWith(objects, others, _.isEqual); // 两个数据整体
// => [{ 'x': 1, 'y': 2 }]

5、union、unionBy、unionWith

  • 合集,注意有去重效果;
_.union([2], [1, 2]);
// => [2, 1]
// 另外两种就不一一举例了,跟交集、差集类似

二、对象

1、pick、omit

  • pick挑选部分属性
  • omit排除部分属性
// _.pick(object, [props])
var object = { 'a': 1, 'b': '2', 'c': 3 };
 _.pick(object, ['a', 'c']);
// => { 'a': 1, 'c': 3 }
_.omit(object, ['a', 'c']);
// => { 'b': '2' }

2、get、set

  • _.get(object, path, [defaultValue]); 注意path表示动态的路径
  • _.set(object, path, value); 设置值
var object = { 'a': [{ 'b': { 'c': 3 } }] };
 
_.get(object, 'a[0].b.c');
// => 3

_.set(object, 'a[0].b.c', 5);
console.log(object.a[0].b.c);
// => 5

三、数学

1、sum、sumBy

快速计算总数

_.sum([4, 2, 8, 6]);
// => 20

var objects = [{ 'n': 4 }, { 'n': 2 }, { 'n': 8 }, { 'n': 6 }];
 
_.sumBy(objects, function(o) { return o.n; }); // 函数更加灵活
// => 20

2、range

_.range([start=0], end, [step=1]);

_.range([start=0], end, [step=1])

四、工具函数

1、isEqual、isEmpty

  • isEqual数据深度比较,是否全等返回boolean
  • isEmpty返回是否是空对象
var object = { 'a': 1 };
var other = { 'a': 1 };
 
_.isEqual(object, other);
// => true

_.isEmpty({})
// => true

2、clone、cloneDeep

  • clone表示浅拷贝,一般被解构赋值代替
  • cloneDeep表示深拷贝,注意如果数据量大,有性能问题;一般使用JSON性能比较高JSON.parse(JSON.stringify([{}])),当然JSON存在function、undefined无法转化的问题
var objects = [{ 'a': 1 }, { 'b': 2 }];
 
var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// => false

3、debounce 防抖

  • _.debounce(func, [wait=0], [options=]);options.leading 表示是否延迟开始前调用,默认false;
    options.maxWait 表示fun被推迟的最大值;options.maxWait 表示是否延迟开始后调用,默认true
function click(params) {
    console.log('click')
}
document.body.addEventListener('click', _.debounce(click, 300))

4、throttle 节流

  • _.throttle(func, [wait=0], [options=]);options.leading 表示是否延迟开始前调用,默认true;options.maxWait 表示是否延迟开始后调用,默认false
document.body.addEventListener('click', _.throttle(() => console.log('click'), 1000))

5、lodash对象

  • lodash对象可以链式调用
_([1, 2, 3]).map(item => item * item).reduce(_.add)

http://www.kler.cn/a/449568.html

相关文章:

  • v3s点RGB屏 40pin 800x480,不一样的点屏,不通过chosen。
  • 重塑数字文档处理:TX Text Control的2024年里程碑
  • git clone必须使用sudo否则失败 git推送错误想再次编辑和推送
  • 如何评估一个股票API接口
  • 贪心算法求解跳跃游戏
  • 应用端sql慢查询监控分析
  • Redis内存碎片详解
  • ue5 pcg(程序内容生成)真的简单方便,就5个节点
  • 基于Python大数据的电影可视化分析系统
  • Jenkins 持续集成部署——Jenkins实战与运维(1)
  • 【多模态聚类】用于无标记视频自监督学习的多模态聚类网络
  • 如何给负载均衡平台做好安全防御
  • 2025前端面试热门题目——计算机网络篇
  • SpringCloud 运用(2)—— 跨服务调度
  • Conda 使用全解析:从入门到精通
  • JavaWeb Servlet的反射优化、Dispatcher优化、视图(重定向)优化、方法参数值获取优化
  • Qt for Python (PySide6)设置程序图标和任务栏图标
  • 【求职面试】大学转专业面试自我介绍模板7篇
  • 解决:websocket 1002 connection rejected 426upgrade required
  • 路径规划之启发式算法之二十:麻雀搜索算法(Sparrow Search Algorithm,SSA)
  • 搭建简易版本的git私有仓库--运用git和gitea
  • 灭屏情况下,飞行模式+静音模式+插耳,播放音乐,电流异常
  • 层序遍历练习
  • 重温设计模式--组合模式
  • 【FFmpeg】解封装 ① ( 封装与解封装流程 | 解封装函数简介 | 查找码流标号和码流参数信息 | 使用 MediaInfo 分析视频文件 )
  • 终章:DevOps实践总结报告