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

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

// 包含起始点,不包含终止点(跟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)
http://www.lryc.cn/news/509466.html

相关文章:

  • 触控算法总结
  • 齐次矩阵包含平移和旋转
  • Move AI技术浅析(四):运动跟踪与估计
  • NCR+可变电荷块3——NCB/cell绘图1
  • 数据仓库是什么?数据仓库简介
  • AI的进阶之路:从机器学习到深度学习的演变(二)
  • C++中属性(Attributes)
  • Go语言中的defer,panic,recover 与错误处理
  • (C语言)力扣 904.水果成篮
  • 2024 年12月英语六级CET6听力原文(Lecture部分)
  • CentOS下,离线安装vscode的步骤;
  • ubuntu停止.netcore正在运行程序的方法
  • 机器学习基础 衡量模型性能指标
  • 《OpenCV计算机视觉》-对图片的各种操作(均值、方框、高斯、中值滤波处理)及形态学处理
  • 如何让Tplink路由器自身的IP网段 与交换机和电脑的IP网段 保持一致?
  • 【JetPack】Navigation知识点总结
  • InnoDB引擎的内存结构
  • Y3地图制作1:水果缤纷乐、密室逃脱
  • ESP32_H2(IDF)学习系列-ADC模数转换(连续转换)
  • 如何通过TikTok成功引流到独立站
  • 生成签名文件 .keystore
  • Mono里运行C#脚本3—mono_jit_init
  • 龙迅#LT6911C适用于HDMI转MIPI/LVDS产品应用,分辨率高达4K30HZ,内置程序,支持KEY(HDCP)!
  • 阿里云虚拟主机ecs镜像如何转移到本地virtualbox上
  • 虚拟机桥接模式
  • 酷睿i7和i5哪个好?i5和i7的区别介绍
  • STM32 高级 谈一下IPV4/默认网关/子网掩码/DNS服务器/MAC
  • Pytorch | 利用FGSM针对CIFAR10上的ResNet分类器进行对抗攻击
  • 消息队列(二)消息队列的高可用原理
  • 大模型-使用Ollama+Dify在本地搭建一个专属于自己的聊天助手与知识库