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]);
// => 20var 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.rhkb.cn/news/494298.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

STM32F407寄存器点灯

背景描述: 最近用32开发遇到问题不得不看寄存器了,就回顾了一下寄存器手册的查看方式和寄存器的使用方法; 上一次这么细致的记录还是在刚学习STM32的时候,之前觉得看寄存器手册以及配置寄存器是有点难度的事情,现在回头…

Cline 3.0发布:从AI编程助手到通用智能体平台的进化

引言 在人工智能快速发展的今天,开发者工具正在经历一场革命性的变革。作为VSCode生态中备受欢迎的AI编程助手,Cline迎来了具有里程碑意义的3.0版本更新。本次Cline 3.0更新不仅带来了用户呼声最高的自动审批功能,还通过一系列创新优化全面提…

【Jenkins】持久化

文章目录 持续集成CI持续部署CD部署部署到linux服务器 持续集成好处: 持续集成CI 持续集成(Continuous integration,简称CI)指的是频繁地(一天多次)将代码集成到主干。 持续集成的目的就是让产品可以快速…

Promise链式调用

Promise链式调用 上一篇我们实现了通过promise的方式实现获取国家基本信息,本次我们来使用promise链式调用来实现邻国的展现 首先,我们从第一个国家中获取到邻国的国家代码名称 const neighbour data[0].borders[0];然后我们通过fetch来获取邻国信息&a…

路由器的原理

✍作者:柒烨带你飞 💪格言:生活的情况越艰难,我越感到自己更坚强;我这个人走得很慢,但我从不后退。 📜系列专栏:网路安全入门系列 目录 路由器的原理一,路由器基础及相关…

2025系统架构师(一考就过):案例题之一:嵌入式架构、大数据架构、ISA

一、嵌入式系统架构 软件脆弱性是软件中存在的弱点(或缺陷),利用它可以危害系统安全策略,导致信息丢失、系统价值和可用性降低。嵌入式系统软件架构通常采用分层架构,它可以将问题分解为一系列相对独立的子问题,局部化在每一层中…

重拾设计模式--状态模式

文章目录 状态模式(State Pattern)概述状态模式UML图作用:状态模式的结构环境(Context)类:抽象状态(State)类:具体状态(Concrete State)类&#x…

python使用pip进行库的下载

前言 现如今有太多的python编译软件,其库的下载也是五花八门,但在作者看来,无论是哪种方法都是万变不离其宗,即pip下载。 pip是python的包管理工具,无论你是用的什么python软件,都可以用pip进行库的下载。 …

【IMU:视觉惯性SLAM系统】

视觉惯性SLAM系统简介 相机(单目/双目/RGBD)与IMU结合起来就是视觉惯性,通常以单目/双目IMU为主。 IMU里面有个小芯片可以测量角速度与加速度,可分为6轴(6个自由度)和9轴(9个自由度)IMU,具体的关于IMU的介…

Halcon例程代码解读:安全环检测(附源码|图像下载链接)

安全环检测核心思路与代码详解 项目目标 本项目的目标是检测图像中的安全环位置和方向。通过形状匹配技术,从一张模型图像中提取安全环的特征,并在后续图像中识别多个实例,完成检测和方向标定。 实现思路 安全环检测分为以下核心步骤&…

【蓝桥杯】43688-《Excel地址问题》

Excel地址问题 题目描述 Excel 单元格的地址表示很有趣,它可以使用字母来表示列号。比如, A 表示第 1 列, B 表示第 2 列, … Z 表示第 26 列, AA 表示第 27 列, AB 表示第 28 列, … BA 表示…

【C++读写.xlsx文件】OpenXLSX开源库在 Ubuntu 18.04 的编译、交叉编译与使用教程

😁博客主页😁:🚀https://blog.csdn.net/wkd_007🚀 🤑博客内容🤑:🍭嵌入式开发、Linux、C语言、C、数据结构、音视频🍭 ⏰发布时间⏰: 2024-12-17 …

大数据、人工智能、云计算、物联网、区块链序言【大数据导论】

这里是阿川的博客,祝您变得更强 ✨ 个人主页:在线OJ的阿川 💖文章专栏:大数据入门到进阶 🌏代码仓库: 写在开头 现在您看到的是我的结论或想法,但在这背后凝结了大量的思考、经验和讨论 这是目…

ffmpeg翻页转场动效的安装及使用

文章目录 前言一、背景二、选型分析2.1 ffmpeg自带的xfade滤镜2.2 ffmpeg使用GL Transition库2.3 xfade-easing项目三、安装3.1、安装依赖([参考](https://trac.ffmpeg.org/wiki/CompilationGuide/macOS#InstallingdependencieswithHomebrew))3.2、获取ffmpeg源码3.3、融合xf…

什么是3DEXPERIENCE SOLIDWORKS,它有哪些角色和功能?

将业界领先的 SOLIDWORKS 3D CAD 解决方案连接到基于单一云端产品开发环境 3DEXPERIENCE 平台。您的团队、数据和流程全部连接到一个平台进行高效的协作工作,从而能快速的做出更好的决策。 目 录: ★ 1 什么是3DEXPERIENCE SOLIDWORKS ★ 2 3DEXPERIE…

如何正确计算显示器带宽需求

1. 对显示器的基本认识 一个显示器的参数主要有这些: 分辨率:显示器屏幕上像素点的总数,通常用横向像素和纵向像素的数量来表示,比如19201080(即1080p)。 刷新率:显示器每秒钟画面更新的次数&…

leetcode212. 单词搜索 II

给定一个 m x n 二维字符网格 board 和一个单词(字符串)列表 words, 返回所有二维网格上的单词 。 单词必须按照字母顺序,通过 相邻的单元格 内的字母构成,其中“相邻”单元格是那些水平相邻或垂直相邻的单元格。同一…

CTFHUB 历年真题 afr-1

发现传参为 ?phello,尝试 ?pflag 发现都是 no 尝试假设它是个PHP文件,利用php伪协议 ?pphp://filter/readconvert.base64-encode/resourceflag 得到 base64 编码再解码发现了本题的 flag n1book{afr_1_solved}

重拾设计模式--备忘录模式

文章目录 备忘录模式(Memento Pattern)概述定义: 作用:实现状态的保存与恢复支持撤销 / 恢复操作 备忘录模式UML图备忘录模式的结构原发器(Originator):备忘录(Memento)&…

5G -- 5G网络架构

5G组网场景 从4G到5G的网络演进: 1、UE -> 4G基站 -> 4G核心网 * 部署初中期,利用存量网络,引入5G基站,4G与5G基站并存 2、UE -> (4G基站、5G基站) -> 4G核心网 * 部署中后期,引入5G核心网&am…