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]);

// 包含起始点,不包含终止点(跟Array.slice有些类似)可以快速创建范围数的集合
_.range(1, 5, 1);
// => [1, 2, 3, 4]

四、工具函数

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)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/942318.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

2024年12月英语六级CET6写作与翻译笔记

目录 1 写作 1.1 大学为学生提供了探索各种可能性 1.2 自律在个人成长中的重要性 1.3 切实可行的目标 2 翻译 2.1 洋山港(Yangshan Port) 2.2 中国航天事业 2.3 北斗卫星导航系统 1 写作 1.1 大学为学生提供了探索各种可能性 1.2 自律在个人成长中的重要性 1.3 切实可…

Unity性能优化 --- 减少OverDraw

OverDraw(过度绘制)就是GPU多次重复绘制同一像素点的操作。在Unity 中渲染的图像由数百万个像素组成,如果这些像素被多次绘制,那么会造成GPU极大的性能损耗。例如下图多个物体叠加放在一起 注:棕色越深的地方,过度绘制的次数越多。…

PostgreSQL 的历史

title: PostgreSQL 的历史 date: 2024/12/23 updated: 2024/12/23 author: cmdragon excerpt: PostgreSQL 是一款功能强大且广泛使用的开源关系型数据库管理系统。其历史可以追溯到1986年,当时由加州大学伯克利分校的一个研究团队开发。文章将深入探讨 PostgreSQL 的起源、…

python学opencv|读取图像(二十一)使用cv2.circle()绘制圆形进阶

【1】引言 前序已经掌握了使用cv2.circle()绘制圆形的基本操作,相关链接为: python学opencv|读取图像(二十)使用cv2.circle()绘制圆形-CSDN博客 由于圆形本身绘制起来比较简单,因此可以自由操作的空间也就大&#x…

大数据-256 离线数仓 - Atlas 数据仓库元数据管理 正式安装 启动服务访问 Hive血缘关系导入

点一下关注吧!!!非常感谢!!持续更新!!! Java篇开始了! 目前开始更新 MyBatis,一起深入浅出! 目前已经更新到了: Hadoop&#xff0…

保险科技“数智化+”赋能险企高质量发展

文 / 太保科技有限公司人工智能服务事业群资深产品经理 娄昕盛 中国太平洋保险(集团)股份有限公司数智研究院人工智能首席专家 徐国强 中国太平洋保险(集团)股份有限公司数智研究院执行院长 王磊 近年来,保险科技正处在“数字化+”向“数智化+”发展的过渡阶段,…

AI科研助手开发总结:向量与数据权应用(二)

一、前言 继上篇文章:AI科研助手开发总结:向量与数据权限的应用(一) 本章根据向量库内存储数据及权限,向量库统一维护和管理数据权限方案讨论。 二、方案分析-基于向量Fields 2.1 思路 结合橙语AI科研助手的业务场…

数字逻辑(七)——逻辑运算中三种基本运算及其符合运算

目录 1 三种基本逻辑运算 1.1 与(AND) 1.2 或(OR) 1.3 非(NOT) 2 由基本门电路组成的其他门电路 2.1 异或 2.2. 同或 2.3 与非 2.4 或非 用于分析数字电路中逻辑功能的数学方法——逻辑代数&#…

分布式事务的解决方案(欢迎讨论~)

目录 背景 CAP定理 BASE理论 场景重现​编辑 分布式事务常见的解决分案 1.二段提交 2.三段提交 3.TCC模式 4.分布式补偿事务(Saga) 5.Seata分布式框架-XA模式 6.Seata分布式框架-AT模式 XA AT TCC SAGA 的对比 背景 首先必须介绍一下分布式中…

汽车IVI中控开发入门及进阶(43):NanoVG

NanoVG:基于OpenGL的轻量级抗锯齿2D矢量绘图库 NanoVG是一个跨平台、基于OpenGL的矢量图形渲染库。它非常轻量级,用C语言实现,代码不到5000行,非常精简地实现了一套HTML5 Canvas API,做为一个实用而有趣的工具集,用来构建可伸缩的用户界面和可视化效果。NanoVG-Library为…

从0到1实现一个RS蓝图系统-概念提出技术栈选型

请不要自我设限,真正好的人生态度,是现在就做,不等、不靠、不懒惰。 ——小野《改变力》 一、什么是蓝图? 蓝图(BluePrint) 是Epic Games 针对虚幻4引擎开发的可视化脚本语言。当你使用蓝图的时候,其实就是在编写代码…

【C++ 类和对象 基础篇】—— 抽象思维的巅峰舞者,演绎代码的深邃华尔兹

C学习笔记: C 进阶之路__Zwy的博客-CSDN博客 各位于晏,亦菲们,请点赞关注! 我的个人主页: _Zwy-CSDN博客 目录 1、类 1.1、类的定义 1.2、访问限定符 1.2.1、public 1.2.2、private 1.2.3、protected 1.3、…

(高可用版本)Kubeadm+Containerd+keepalived部署高可用k8s(v1.28.2)集群

KubeadmContainerdkeepalived部署高可用k8s(v1.28.2)集群 一.环境准备,二.容器运行时Containerd安装请参照前文。KubeadmContainerd部署k8s(v1.28.2)集群(非高可用版)-CSDN博客 文章目录 KubeadmContainerdkeepalived部署高可用k8s(v1.28.2)集…

联合目标检测与图像分类提升数据不平衡场景下的准确率

联合目标检测与图像分类提升数据不平衡场景下的准确率 在一些数据不平衡的场景下,使用单一的目标检测模型很难达到99%的准确率。为了优化这一问题,适当将其拆解为目标检测模型和图像分类模型的组合,可以更有效地控制最终效果,尤其…

C++之红黑树模拟实现

目录 红黑树的概念 红黑树的性质 红黑树的查找效率 红黑树的实现 红黑树的定义 红黑树节点的插入 红黑树的平衡调整 判断红黑树是否平衡 红黑树整体代码 测试代码 上期我们学习了AVL树的模拟实现,在此基础上,我们本期将学习另一个数据结构-…

机器学习常用术语

目录 概要 机器学习常用术语 1、模型 2、数据集 3、样本与特征 4、向量 5、矩阵 6、假设函数与损失函数 7、拟合、过拟合与欠拟合 8、激活函数(Activation Function) 9、反向传播(Backpropagation) 10、基线(Baseline) 11、批量(Batch) 12、批量大小(Batch Size)…

nest 学习3

学习小册(nest通关秘籍) 邮箱验证码登陆 流程图: 邮箱作为key,生成随机验证码,然后放到redis中。调用邮箱api发送邮箱。 前端获取到code后,将验证码输入传给后端,后端根据邮箱取出redis数据,比对验证码&…

原点安全再次入选信通院 2024 大数据“星河”案例

近日,中国信息通信研究院和中国通信标准化协会大数据技术标准推进委员会(CCSA TC601)共同组织开展的 2024 大数据“星河(Galaxy)”案例征集活动结果正式公布。由工银瑞信基金管理有限公司、北京原点数安科技有限公司联…

RabbitMQ 的7种工作模式

RabbitMQ 共提供了7种⼯作模式,进⾏消息传递,. 官⽅⽂档:RabbitMQ Tutorials | RabbitMQ 1.Simple(简单模式) P:⽣产者,也就是要发送消息的程序 C:消费者,消息的接收者 Queue:消息队列,图中⻩⾊背景部分.类似⼀个邮箱,可以缓存消息;⽣产者向其中投递消息,消费者从其中取出消息…

Restaurants WebAPI(四)——Identity

文章目录 项目地址一、Authentication(身份认证)1.1 配置环境(解决类库包无法引用)1.2 使用Authentication控制Controller的访问1.3 获取User的Context1.3.1 在Application下创建User文件夹1. 创建User.cs record类封装角色信息2. 创建UserContext.cs提供…