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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/503542.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

设计模式7--建造者模式

定义 案例一 案例二 优缺点

STM32 软件I2C方式读取AS5600磁编码器获取角度例程

STM32 软件I2C方式读取AS5600磁编码器获取角度例程 🔖本例程使用正点原子例程作为工程模板创建。 📘 硬件电路部分 🌿原理图部分: 🌿PCB布线和电路 ✨注意事项:有些硬件需要I2C上拉,否则检…

学习transformer模型-Input Embedding 嵌入层的简明介绍

今天介绍transformer模型的Input Embedding 嵌入层。 背景 嵌入层的目标是使模型能够更多地了解单词、标记或其他输入之间的关系。 从头开始嵌入Embeddings from Scratch 嵌入序列需要分词器tokenizer、词汇表和索引,以及词汇表中每个单词的三维嵌入。Embedding a s…

2核2G服务器优惠价格轻量61元一年,CVM价格313元15个月

腾讯云2核2G服务器多少钱一年?轻量服务器61元一年,CVM 2核2G S5服务器313.2元15个月,轻量2核2G3M带宽、40系统盘,云服务器CVM S5实例是2核2G、50G系统盘。腾讯云2核2G服务器优惠活动 txybk.com/go/txy 链接打开如下图:…

Java 学习和实践笔记(51):基本的冒泡排序算法和优化的冒泡排序算法

常见的算法的可视动画演示效果可在这个网址查看: visualising data structures and algorithms through animation - VisuAlgo 基本的冒泡排序算法很简单,假定有10个数需要排序,那么就需要跑10轮,在每一轮里,都依次进…

攻防世界-Web(catcat-new)

任意文件读取漏洞是指攻击者通过在应用程序中输入非法的文件名或路径,从而获取未授权的文件读取权限的漏洞。攻击者可以利用此漏洞来读取系统文件、敏感数据或其他用户数据。这种漏洞通常是由于程序没有正确地检查用户的输入而引起的。建议开发人员在编写应用程序时…

Android adb ime 调试输入法

目录 前言列出所有输入法仅列出输入法 id列出所有输入法的所有信息 启用/禁用 输入法启用输入法禁用输入法 切换输入法还原输入法 前言 安装多个输入法后&#xff0c;可以在设置里进行切换。 既然是开发&#xff0c;能用命令就就命令~ ime 帮助说明&#xff1a; ime <c…

HarmonyOS 应用开发之Stage模型绑定FA模型ServiceAbility

本小节介绍Stage模型的两种应用组件如何绑定FA模型ServiceAbility组件。 UIAbility关联访问ServiceAbility UIAbility关联访问ServiceAbility和UIAbility关联访问ServiceExtensionAbility的方式完全相同。 import common from ohos.app.ability.common; import hilog from o…

vue系统——v-html

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>v-html指令</title> </head> <body&…

快速上手Spring Cloud 十七:深入浅出的学习之旅

快速上手Spring Cloud 一&#xff1a;Spring Cloud 简介 快速上手Spring Cloud 二&#xff1a;核心组件解析 快速上手Spring Cloud 三&#xff1a;API网关深入探索与实战应用 快速上手Spring Cloud 四&#xff1a;微服务治理与安全 快速上手Spring Cloud 五&#xff1a;Spring …

【SpringCloud】认识微服务

目 录 一.服务架构演变单体架构分布式架构服务治理微服务总结 二.微服务技术对比微服务结构微服务技术对比企业需求 三.SpringCloud 一.服务架构演变 单体架构 单体架构&#xff1a;将业务的所有功能集中在一个项目中开发&#xff0c;打成一个包部署。 优点&#xff1a; 架…

JavaScript高级 —— 学习(三)

一、深入面向对象 分为面向过程和面向对象两种&#xff0c;面向过程是以步骤来划分问题&#xff0c;在这儿不做过多描述。 &#xff08;一&#xff09;面向对象介绍 把事务分解成一个个对象&#xff0c;由对象之间分工合作&#xff0c;面向对象是以对象功能来划分问题&#…

本地项目上传到GitHub

本文档因使用实际项目提交做为案例&#xff0c;故使用xxx等字符进行脱敏&#xff0c;同时隐藏了部分输出&#xff0c;已实际项目和命令行输出为准 0、 Git 安装与GitHub注册 1&#xff09; 在下述地址下载Git&#xff0c;安装一路默认下一步即可。安装完成后&#xff0c;随便…

开源知识库平台Raneto--使用Docker部署Raneto

文章目录 一、Raneto介绍1.1 Raneto简介1.2 知识库介绍 二、阿里云环境2.1 环境规划2.2 部署介绍 三、本地环境检查3.1 检查Docker服务状态3.2 检查Docker版本3.3 检查docker compose 版本 四、下载Raneto镜像五、部署Raneto知识库平台5.1 创建挂载目录5.2 编辑config.js文件5.…

金三银四面试题(八):JVM常见面试题(2)

今天我们继续探讨常见的JVM面试题。这些问题不比之前的问题庞大&#xff0c;多用于面试中​JVM部分的热身运动&#xff0c;开胃菜&#xff0c;但是大家已经要认真准备。 JRE、JDK、JVM 及JIT 之间有什么不同&#xff1f; JRE 代表Java 运行时&#xff08;Java run-time&#…

Vue 05 Vuex

Vue 学习 Vue 05 vuex01 介绍02 工作原理&#xff08;原理图&#xff09;使用 03 案例求和补充HTML 纯vue实现vuex使用 04 getters配置项05 mapState 与 mapGetters补&#xff1a;ES6语法mapState使用mapGetters总结 06 mapActions 与 mapMutationsmapMutationsmapActions总结 …

最新Java面试题1【2024中级】

互联网大厂面试题 1&#xff1a;阿里巴巴Java面试题 2&#xff1a;阿里云Java面试题-实习生岗 3&#xff1a;腾讯Java面试题-高级 4&#xff1a;字节跳动Java面试题 5&#xff1a;字节跳动Java面试题-大数据方向 6&#xff1a;百度Java面试题 7&#xff1a;蚂蚁金服Java…

深入理解 Hadoop 上的 Hive 查询执行流程

在 Hadoop 生态系统中&#xff0c;Hive 是一个重要的分支&#xff0c;它构建在 Hadoop 之上&#xff0c;提供了一个开源的数据仓库系统。它的主要功能是查询和分析存储在 Hadoop 文件中的大型数据集&#xff0c;包括结构化和半结构化数据。Hive 在数据查询、分析和汇总方面发挥…

java数组与集合框架(一) -- 数据结构,数组

数据结构 概述 为什么要讲数据结构&#xff1f; 任何一个有志于从事IT领域的人员来说&#xff0c;数据结构&#xff08;Data Structure&#xff09;是一门和计算机硬件与软件都密切相关的学科&#xff0c;它的研究重点是在计算机的程序设计领域中探讨如何在计算机中组织和存储…

CQI-17:2021 V2 英文 、中文版。特殊过程:电子组装制造-锡焊系统评审标准

锡焊作为一个特殊的工艺过程&#xff0c;由于其材料特性的差异性、工艺参数的复杂性和过程控制的不确定性&#xff0c;长期以来一直视为汽车零部件制造业的薄弱环节&#xff0c;并将很大程度上直接导致整车产品质量的下降和召回风险的上升。 美国汽车工业行动集团AIAG的特别工…