Lodash已过时,试试它吧!

 
 

大厂技术  高级前端  Node进阶

点击上方 程序员成长指北,关注公众号
回复1,加入高级Node交流群

开篇之前,先提两个问题:

  • 你知道 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 中的任何中间属性是 undefinednull_.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。

9719feec1f863b12fbb97787e35b87cf.png
image.png

几年前,相信大家经常看到过这样解读 Lodash 的文章。

以前,我也曾花费不少时间挖掘源代码,学习每一个 API,记录每一个函数调用,理解得足够透彻,为了能够回答一个简单的面试问题,比如 isNumber 函数是如何工作的?

Radash 的崛起

71b8d7989eb65a70477e72d20e4491fc.png
image.png

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多个实用函数。


可以后台回复【Radash 】,获取每个函数的详细介绍

下面我们将介绍几个特别实用的函数:

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

但是,使用 Radashrange() 函数,您可以省略所有变量声明、条件和增量。

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()

  • 对象操作 pickomitclone

还有很多非常实用的方法, 大家可以通过官网查阅:

d82ee863e8d1ca45ced6ce3108ec0ed5.png
image.png

如果大家觉得看官方英文文档费劲, 我整理了一份中文的,大家需要可以在公众号后台回复【Radash】获取。

在这篇文章中,讨论了不喜欢 Lodash 的原因,以及可能倾向 Radash 等替代品的原因。但是,与新的竞争对手相比,Lodash 仍然拥有庞大的用户群,并在许多大型项目中得到广泛应用。

我已经在项目中使用了, 如果你使用遇到问题,欢迎找我一起讨论😊

看完上面的分析,新项目中你会选择这个现代化替代品 Radash吗?

参考文章:

https://medium.com/exobase/lodash-is-dead-long-live-radash-d9d52abf428b

最后

Node 社群

 
 

我组建了一个氛围特别好的 Node.js 社群,里面有很多 Node.js小伙伴,如果你对Node.js学习感兴趣的话(后续有计划也可以),我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。

ff6628d1664f77d4939cb9412c9268bd.png

“分享、点赞、在看” 支持一下

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值