Lodash已过时,试试它吧!
suiw9 2024-11-27 20:42 29 浏览 0 评论
开篇之前,先提两个问题:
- 你知道 Radash 吗?
- Radash 会取代 Lodash 吗?
认识 Radash
相信大家都知道Lodash, 这个 JavaScript 工具库从2012至今,已经存在长达12年的时间,它在github上的 star 数超过 58.6k, 在 npm 上每周的下载量已超过 5200 万。
最初,Lodash 的运行情况很好,帮助开发人员编写了简洁、可维护的 JavaScript 代码。然而,由于近两年没有针对最新 JavaScript 函数进行重大更新,开发人员在使用 Lodash 时开始面临一些挑战,在这样的背景下,Radash 应运而生,以其现代化的特性和对TypeScript的友好支持,逐渐成为开发者的新宠。
在本文中,我将详细讨论 Lodash 中的问题以及 Radash 如何解决这些问题,从而回答提出的问题:Radash 会取代 Lodash 吗?
Lodash 面临的问题
随着 JavaScript 语言的不断进化和新特性的引入,Lodash 的一些功能开始显得不再那么必要。
Lodash 函数过时了
随着ES6及后续版本的推出,JavaScript 引入了许多新的语言特性,如可选链(?.)和空值合并(??),使得一些 Lodash 的函数显得多余。
在 ES6 之前,如果你想安全地访问对象的嵌套属性,可以使用 Lodash 的 _.get 函数来避免可能的 undefined 错误。例如:
// 假设我们有一个对象,我们想访问 `a.b.c` 属性
const obj = {
a: {
b: {
c: 'Hello'
}
}
};
// 使用 Lodash 的 _.get 来安全地获取值
const value = _.get(obj, 'a.b.c', 'Default'); console.log(value);
// 输出: 'Hello'
如果 obj 中的任何中间属性是 undefined 或 null,_.get 将返回提供的默认值 'Default',而不是抛出错误。
然而,随着 ES6 引入了可选链操作符 ?.,我们现在可以更简洁地实现同样的功能,而不需要 Lodash:
// 使用可选链操作符来安全地访问嵌套属性
const value = obj?.a?.b?.c || 'Default';
console.log(value);
// 输出: 'Hello'
同样的,像 .filter、.map 和 _.size 这样的函数也变得多余了。并且,在性能方面,像可选链?.这样的特性远远超过了 Lodash 函数,可选链的性能几乎 Lodash 的 _.get 函数的两倍(根据能测量工具:measurethat.net的测试结果)。
源码可读性差
实话说,上面所谈到的,作为开发者的你也许可以接受,但是 Lodash 源码的学习成本真的很高,这可能才是我们的底线。这是 Lodash源码
我们不应该为了了解一个单行函数是如何工作的,而去翻阅 15000 行代码,为了学习 API。
几年前,相信大家经常看到过这样解读 Lodash 的文章。
以前,我也曾花费不少时间挖掘源代码,学习每一个 API,记录每一个函数调用,理解得足够透彻,为了能够回答一个简单的面试问题,比如 isNumber 函数是如何工作的?
Radash 的崛起
Radash,这个新兴的工具库,以其现代化的设计和对TypeScript的原生支持,迅速吸引了开发者的注意。
虽然 Radash 是新产品,但它在 GitHub 上的 star 数已超过 2.8K,拥有 99 个 Forks,每周的 NPM 下载量超过 7.6 万。您可以使用 NPM 或 Yarn 轻松安装 Radash。
Radash 的特点包括:
- 零依赖:Radash 不依赖于任何第三方库,使得项目更加轻量级。
- TypeScript友好:Radash 完全使用TypeScript编写,提供了准确的类型定义。
- 现代化功能:Radash 去除了 Lodash 中一些过时的函数,并引入了许多新的实用功能。
- 易于理解和维护:Radash 的源代码易于理解,对新手友好。
值得的是,源代码的维护真的将新人的易懂性放在首位。在大多数情况下,如果你想使用 Radash 函数,但又不想安装,你可以直接从 GitHub 复制。
例如下面这段源代码:
export const unique = <T, K extends string | number | symbol>(
array: readonly T[],
toKey?: (item: T) => K
): T[] => {
const valueMap = array.reduce((acc, item) => {
const key = toKey ? toKey(item) : (item as any as string | number | symbol)
if (acc[key]) return acc
acc[key] = item
return acc
}, {} as Record<string | number | symbol, T>)
return Object.values(valueMap)
}
定义了一个名为 unique 的泛型函数,目的是从输入数组中提取唯一的元素。函数接受两个参数:一个类型为 readonly T[] 的只读数组 array,以及一个可选的映射函数 toKey, 相信很多初级的开发者都可以看懂。
另外,如果你项目只需要一个unique函数,完全可以将源码复制到自己的工具文件中来使用。
目前 Radash 已经提供 90多个实用函数。
可以私聊我获取每个函数的详细介绍
下面我们将介绍几个特别实用的函数:
tryit()
tryit 函数可能是我最喜欢的 Radash 函数。tryit 函数可以包装一个函数,将其转换为错误优先函数。适用于异步和同步功能。
import {tryit} form "radash"
const [err, user] = await tryit(api.users.userInfo)(userId)
我发现它是对代码整洁最大提升的代码。不再需要为了尝试某些操作而分叉控制流。不再需要在 try 块外部创建一个可变的 let 变量,在里面设置它,然后在之后检查它。
range()
range() 可以取代传统的循环。例如,假设您需要打印从 1 到 5 的数据,如果使用传统的 for 循环,就会像下面这样:
for (let i = 1; i <= 5; i++){
console.log(i);
}
但是,使用 Radash 的 range() 函数,您可以省略所有变量声明、条件和增量。
import { range } from 'radash';
for (const i of range(1,5)){
console.log(i);
}
list()
list()函数可以根据提供的参数动态生成列表。这个函数支持1到4个输入参数,包括起始值、结束值、映射函数和步长。
import { list } from 'radash';
const myList = list(1, 10, (i) => i * 2, 2);
console.log(myList); // 输出: [2, 4, 6, 8, 10]
在这个例子中,list()函数创建了一个从2开始,每次增加2,到10结束的列表。
counting()
counting()函数用于统计类数组集合中各类元素的数量。它接收一个对象数组和一个回调函数,通过回调函数定义计数条件。
import { counting } from 'radash';
const items = [
{ category: 'A' },
{ category: 'B' },
{ category: 'A' },
{ category: 'C' }
];
const counts = counting(items, (item) => item.category);
console.log(counts); // 输出: { A: 2, B: 1, C: 1 }
在项目中,我发现自己使用counting的次数比自己想象得要多。
除了上面这些有特色的方法,还有很多实用的方法, 例如:
- 节流 throttle 和防抖 debounce
- 类型判断方法,如isArray()、isString()、isNumber()等
- 对象操作 pick、omit、clone等
还有很多非常实用的方法, 大家可以通过官网查阅:
在这篇文章中,讨论了不喜欢 Lodash 的原因,以及可能倾向 Radash 等替代品的原因。但是,与新的竞争对手相比,Lodash 仍然拥有庞大的用户群,并在许多大型项目中得到广泛应用。
新项目中你会选择 Radash吗?
作者:芝士加
链接:https://juejin.cn/post/7347279011653402659
相关推荐
- 俄罗斯的 HTTPS 也要被废了?(俄罗斯网站关闭)
-
发布该推文的ScottHelme是一名黑客,SecurityHeaders和ReportUri的创始人、Pluralsight作者、BBC常驻黑客。他表示,CAs现在似乎正在停止为俄罗斯域名颁发...
- 如何强制所有流量使用 HTTPS一网上用户
-
如何强制所有流量使用HTTPS一网上用户使用.htaccess强制流量到https的最常见方法可能是使用.htaccess重定向请求。.htaccess是一个简单的文本文件,简称为“.h...
- https和http的区别(https和http有何区别)
-
“HTTPS和HTTP都是数据传输的应用层协议,区别在于HTTPS比HTTP安全”。区别在哪里,我们接着往下看:...
- 快码住!带你十分钟搞懂HTTP与HTTPS协议及请求的区别
-
什么是协议?网络协议是计算机之间为了实现网络通信从而达成的一种“约定”或“规则”,正是因为这个“规则”的存在,不同厂商的生产设备、及不同操作系统组成的计算机之间,才可以实现通信。简单来说,计算机与网络...
- 简述HTTPS工作原理(简述https原理,以及与http的区别)
-
https是在http协议的基础上加了一层SSL(由网景公司开发),加密由ssl实现,它的目的是为用户提供对网站服务器的身份认证(需要CA),以至于保护交换数据的隐私和完整性,原理如图示。1、客户端发...
- 21、HTTPS 有几次握手和挥手?HTTPS 的原理什么是(高薪 常问)
-
HTTPS是3次握手和4次挥手,和HTTP是一样的。HTTPS的原理...
- 一次安全可靠的通信——HTTPS原理
-
为什么HTTPS协议就比HTTP安全呢?一次安全可靠的通信应该包含什么东西呢,这篇文章我会尝试讲清楚这些细节。Alice与Bob的通信...
- 为什么有的网站没有使用https(为什么有的网站点不开)
-
有的网站没有使用HTTPS的原因可能涉及多个方面,以下是.com、.top域名的一些见解:服务器性能限制:HTTPS使用公钥加密和私钥解密技术,这要求服务器具备足够的计算能力来处理加解密操作。如果服务...
- HTTPS是什么?加密原理和证书。SSL/TLS握手过程
-
秘钥的产生过程非对称加密...
- 图解HTTPS「转」(图解http 完整版 彩色版 pdf)
-
我们都知道HTTPS能够加密信息,以免敏感信息被第三方获取。所以很多银行网站或电子邮箱等等安全级别较高的服务都会采用HTTPS协议。...
- HTTP 和 HTTPS 有何不同?一文带你全面了解
-
随着互联网时代的高速发展,Web服务器和客户端之间的安全通信需求也越来越高。HTTP和HTTPS是两种广泛使用的Web通信协议。本文将介绍HTTP和HTTPS的区别,并探讨为什么HTTPS已成为We...
- HTTP与HTTPS的区别,详细介绍(http与https有什么区别)
-
HTTP与HTTPS介绍超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息,HTTP协议以明文方式发送内容,不提供任何方式的数据加密,如果攻击者截取了Web浏览器和网站服务器之间的...
- 一文让你轻松掌握 HTTPS(https详解)
-
一文让你轻松掌握HTTPS原文作者:UC国际研发泽原写在最前:欢迎你来到“UC国际技术”公众号,我们将为大家提供与客户端、服务端、算法、测试、数据、前端等相关的高质量技术文章,不限于原创与翻译。...
- 如何在Spring Boot应用程序上启用HTTPS?
-
HTTPS是HTTP的安全版本,旨在提供传输层安全性(TLS)[安全套接字层(SSL)的后继产品],这是地址栏中的挂锁图标,用于在Web服务器和浏览器之间建立加密连接。HTTPS加密每个数据包以安全方...
- 一文彻底搞明白Http以及Https(http0)
-
早期以信息发布为主的Web1.0时代,HTTP已可以满足绝大部分需要。证书费用、服务器的计算资源都比较昂贵,作为HTTP安全扩展的HTTPS,通常只应用在登录、交易等少数环境中。但随着越来越多的重要...
你 发表评论:
欢迎- 一周热门
-
-
Linux:Ubuntu22.04上安装python3.11,简单易上手
-
宝马阿布达比分公司推出独特M4升级套件,整套升级约在20万
-
MATLAB中图片保存的五种方法(一)(matlab中保存图片命令)
-
别再傻傻搞不清楚Workstation Player和Workstation Pro的区别了
-
Linux上使用tinyproxy快速搭建HTTP/HTTPS代理器
-
如何提取、修改、强刷A卡bios a卡刷bios工具
-
Element Plus 的 Dialog 组件实现点击遮罩层不关闭对话框
-
日本组合“岚”将于2020年12月31日停止团体活动
-
SpringCloud OpenFeign 使用 okhttp 发送 HTTP 请求与 HTTP/2 探索
-
tinymce 号称富文本编辑器世界第一,大家同意么?
-
- 最近发表
- 标签列表
-
- dialog.js (57)
- importnew (44)
- windows93网页版 (44)
- yii2框架的优缺点 (45)
- tinyeditor (45)
- qt5.5 (60)
- windowsserver2016镜像下载 (52)
- okhttputils (51)
- android-gif-drawable (53)
- 时间轴插件 (56)
- docker systemd (65)
- slider.js (47)
- android webview缓存 (46)
- pagination.js (59)
- loadjs (62)
- openssl1.0.2 (48)
- velocity模板引擎 (48)
- pcre library (47)
- zabbix微信报警脚本 (63)
- jnetpcap (49)
- pdfrenderer (43)
- fastutil (48)
- uinavigationcontroller (53)
- bitbucket.org (44)
- python websocket-client (47)