使用lodash原地起飞,总结了几个常用的lodash方法

前言

 📫 大家好,我是南木元元,热爱技术和分享,欢迎大家交流,一起学习进步!

 🍅 个人主页:南木元元


目录

什么是lodash

lodash的按需引入

数组操作

求交集

求合集

求差集

求总和

求平均数

根据条件排序

数组分块

实用的工具函数

clone / 浅拷贝

cloneDeep / 深拷贝

debounce / 防抖

throttle / 节流

pick / 创建选中属性的对象

omit / 剔除对象某些属性

isEqual / 比较对象是否相等

isEmpty / 判断对象是否为空

结语


什么是lodash

Lodash是一个流行的JavaScript实用工具库,提供了许多高效、高兼容性的工具函数,能够方便地处理集合、字符串、数值、函数等多种数据类型,大大提高工作效率。

lodash的按需引入

有些人说lodash里面的好多方法都能自己实现,没必要再引入额外的工具库来增加项目的体积,但是你能保证你实现得比lodash好吗?而且lodash支持多种模块化方案,配合tree-shaking技术或者使用单独的函数模块,几乎不会导致冗余代码。

// 方式1:引入整个lodash对象
import _ from "lodash";
// 方式2:按名称引入特定的函数
import { cloneDeep } from "lodash";

// 上述2种方式都会引入整个lodash库,体积大,而下面2种方式都能实现按需引入,减小体积
// 1.只引入cloneDeep函数
import cloneDeep from "lodash/cloneDeep";
// 2.使用lodash-es
import { cloneDeep } from "lodash-es";

上述第一种方式只会引入引用路径对应的模块,第二种方式使用了es6模块语法的lodash-es(lodash默认是commonjs版本),这让 webpack等打包工具可以对其进行tree-shaking,去除无用的代码,减小打包体积。

接下来总结一些常用的lodash工具方法。

数组操作

求交集

intersection:返回一个包含所有传入数组交集元素的新数组。

_.intersection([2, 1], [4, 2], [1, 2]);  
// => [2]

intersectionBy:根据某个字段来进行计算交集。

_.intersectionBy([{ 'x': 1 }], [{ 'x': 2 }, { 'x': 1 }], 'x');  
// => [{ 'x': 1 }]

 intersectionWith:根据某个条件函数来计算交集,比如使用isEqual。

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 }]

求合集

union:返回一个新的联合数组。

_.u
评论 261
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陈三心

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值