Radash一款JavaScript最新的实用工具库,Lodash的平替!

2024-03-30 10:12

本文主要是介绍Radash一款JavaScript最新的实用工具库,Lodash的平替!,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

    • Lodash 的痛点
    • 进入正题--Radash
      • 特点
    • 举例几个常用的api

一说lodash应该大部分前端同学都知道吧,陪伴我们好多年的JavaScript工具库,但是自从 ES6 出现后就慢慢退出前端人的视线,能ES6写的代码绝对不会用Lodash,也不是完全不用,就是用的少了。


Lodash 的痛点

看过Lodash源码的都知道,都是ES5的各种封装,写的很繁琐各种处理,Lodash 源码的学习成本真的很高,ES6出现之后就彻底绑不住了,ES6一个符号就能表示的,Lodash还得去传参数啥的,可读性还不高

最常见的比如说:

访问嵌套对象属性时,能够避免因为中间某个属性不存在而导致的错误,Lodash使用_.get 函数

const user = {profile: {address: {street: "123 Main St",city: "Wonderland"}}
};// ES6 可选链  ?.
const city = user?.profile?.address?.city; // "Wonderland" 或 undefined
// ES6 空值合并 ??
const city2 = user?.profile?.address?.city ?? "Default City"; // "Wonderland" 或 "Default City"// Lodash的_.get
const city3 = _.get(user, 'profile.address.city', 'Default City'); // "Wonderland" 或 "Default City"

不知道es6那俩特性的这里简单说一下:

ES6 可选链
可选链允许你安全地访问深层嵌套的对象属性,即使某些中间属性不存在,也不会抛出错误。这是通过在属性访问操作中使用问号(?.)来实现的。

ES6 空值合并
空值合并运算符(??)是一个逻辑运算符,它在左侧的操作数为null或undefined时,返回右侧的操作数,否则返回左侧的操作数。

进入正题–Radash

Radash 是一个新兴的 JavaScript 实用工具库,它被设计为“新一代的 Lodash”,并且在 GitHub 上拥有较高的星标数和稳定的下载量。现代化的设计和对TypeScript的原生支持

特点

  • 零依赖: Radash 是一个零依赖的工具库,这意味着它不依赖于任何第三方库。这样的设计使得 Radash 更加轻量级,项目中使用 Radash 时,只需要加载它本身,无需加载额外的依赖。

  • 对TypeScript的原生支持: Radash 完全使用 TypeScript 编写,这为使用 Radash 的开发者提供了准确的类型定义。这样的设计使得在 TypeScript 项目中使用 Radash 变得更加安全和方便,同时也减少了类型错误的可能性。

  • 现代化功能: Radash 去除了 Lodash 中一些过时的函数,并引入了许多新的实用功能。这些新功能旨在解决现代 JavaScript 中的问题,同时也全面支持 ES6+ 的新特性。

  • 易于理解和维护: Radash 的源代码易于理解,对新手友好。源代码的维护以新手的可理解性为首要任务,这使得开发者更容易学习和使用 Radash 的 API。

  • 提供实用的工具函数: Radash 提供了 90+ 个实用函数,涵盖了数组、对象、字符串、排序等多个方面的操作。这些函数旨在解决 JavaScript 中的常见问题,同时提供了一些在 Lodash 中没有的新颖功能。

  • 源码可读性高: Radash 的源码可读性高,这使得开发者可以更容易地理解每个函数的工作原理。对于一些只需要特定功能的情况,开发者甚至可以直接从 GitHub 复制相应的函数源码到自己的项目中使用。

  • 性能优化: Radash 在设计时考虑了性能优化,一些函数的性能甚至超过了 Lodash。

  • 社区支持与活跃: Radash 在社区中获得了一定的关注和支持,许多开发者对它的现代化设计和 TypeScript 友好性表示赞赏。随着时间的推移,Radash 的社区可能会继续增长,提供更多的资源和支持。

在这里插入图片描述

举例几个常用的api

  • list() - 创建数字序列

list() 函数可以动态地生成具有特定项的列表,根据提供的参数进行灵活调整。

import { list } from 'radash';const numbers = list(1, 5); // 创建从 1 到 5 的数字序列
console.log(numbers); // 输出: [1, 2, 3, 4, 5]
  • retry() - 重试失败的异步操作

retry() 函数用于重试失败的异步操作,直到成功或达到最大重试次数。

import { retry } from 'radash';async function fetchData() {try {const response = await fetch('api/data');return response.json();} catch (error) {throw error;}
}// 尝试最多 3 次,每次失败后等待 2 秒
const data = await retry({ times: 3, delay: 2000 }, fetchData);
console.log(data);
  • counting() - 统计数组中元素的数量

counting() 函数用于统计类数组集合中各类元素的数量。

import { counting } from 'radash';const items = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];
const counts = counting(items, item => item);
console.log(counts); // 输出: { apple: 3, banana: 2, orange: 1 }
  • unique() - 从数组中提取唯一元素

unique() 函数从输入数组中提取唯一的元素。

import { unique } from 'radash';const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = unique(array);
console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5]
  • 类型检查函数

Radash 提供了一系列类型检查函数,如 isArray()、isString()、isNumber() 等,用于检测变量的数据类型。

import { isArray, isString, isNumber } from 'radash';const myArray = [1, 2, 3];
const myString = 'Hello, Radash!';
const myNumber = 42;console.log(isArray(myArray)); // 输出: true
console.log(isString(myString)); // 输出: true
console.log(isNumber(myNumber)); // 输出: true

这篇关于Radash一款JavaScript最新的实用工具库,Lodash的平替!的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/861204

相关文章

SpringBoot UserAgentUtils获取用户浏览器的用法

《SpringBootUserAgentUtils获取用户浏览器的用法》UserAgentUtils是于处理用户代理(User-Agent)字符串的工具类,一般用于解析和处理浏览器、操作系统以及设备... 目录介绍效果图依赖封装客户端工具封装IP工具实体类获取设备信息入库介绍UserAgentUtils

Spring 中的循环引用问题解决方法

《Spring中的循环引用问题解决方法》:本文主要介绍Spring中的循环引用问题解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录什么是循环引用?循环依赖三级缓存解决循环依赖二级缓存三级缓存本章来聊聊Spring 中的循环引用问题该如何解决。这里聊

Java学习手册之Filter和Listener使用方法

《Java学习手册之Filter和Listener使用方法》:本文主要介绍Java学习手册之Filter和Listener使用方法的相关资料,Filter是一种拦截器,可以在请求到达Servl... 目录一、Filter(过滤器)1. Filter 的工作原理2. Filter 的配置与使用二、Listen

Spring Boot中JSON数值溢出问题从报错到优雅解决办法

《SpringBoot中JSON数值溢出问题从报错到优雅解决办法》:本文主要介绍SpringBoot中JSON数值溢出问题从报错到优雅的解决办法,通过修改字段类型为Long、添加全局异常处理和... 目录一、问题背景:为什么我的接口突然报错了?二、为什么会发生这个错误?1. Java 数据类型的“容量”限制

Java对象转换的实现方式汇总

《Java对象转换的实现方式汇总》:本文主要介绍Java对象转换的多种实现方式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录Java对象转换的多种实现方式1. 手动映射(Manual Mapping)2. Builder模式3. 工具类辅助映

SpringBoot请求参数接收控制指南分享

《SpringBoot请求参数接收控制指南分享》:本文主要介绍SpringBoot请求参数接收控制指南,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Spring Boot 请求参数接收控制指南1. 概述2. 有注解时参数接收方式对比3. 无注解时接收参数默认位置

SpringBoot基于配置实现短信服务策略的动态切换

《SpringBoot基于配置实现短信服务策略的动态切换》这篇文章主要为大家详细介绍了SpringBoot在接入多个短信服务商(如阿里云、腾讯云、华为云)后,如何根据配置或环境切换使用不同的服务商,需... 目录目标功能示例配置(application.yml)配置类绑定短信发送策略接口示例:阿里云 & 腾

SpringBoot项目中报错The field screenShot exceeds its maximum permitted size of 1048576 bytes.的问题及解决

《SpringBoot项目中报错ThefieldscreenShotexceedsitsmaximumpermittedsizeof1048576bytes.的问题及解决》这篇文章... 目录项目场景问题描述原因分析解决方案总结项目场景javascript提示:项目相关背景:项目场景:基于Spring

Spring Boot 整合 SSE的高级实践(Server-Sent Events)

《SpringBoot整合SSE的高级实践(Server-SentEvents)》SSE(Server-SentEvents)是一种基于HTTP协议的单向通信机制,允许服务器向浏览器持续发送实... 目录1、简述2、Spring Boot 中的SSE实现2.1 添加依赖2.2 实现后端接口2.3 配置超时时

Spring Boot读取配置文件的五种方式小结

《SpringBoot读取配置文件的五种方式小结》SpringBoot提供了灵活多样的方式来读取配置文件,这篇文章为大家介绍了5种常见的读取方式,文中的示例代码简洁易懂,大家可以根据自己的需要进... 目录1. 配置文件位置与加载顺序2. 读取配置文件的方式汇总方式一:使用 @Value 注解读取配置方式二