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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于STC12C5A60S2系列1T 8051单片机的一个按键长按开关机后一个按键单击长按都增加数值另一个按键单击长按都减少数值应用

基于STC12C5A60S2系列1T 8051单片机的一个按键长按开关机后一个按键单击长按都增加数值另一个按键单击长按都减少数值应用 STC12C5A60S2系列1T 8051单片机管脚图STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式及配置STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式介…

深入理解Java接口:定义、使用与重要性(day13)

导语:Java接口是Java编程语言中的一个核心概念,它提供了一种定义方法但不包含方法实现的方式。接口在Java编程中扮演着重要角色,能够帮助我们实现代码的高内聚、低耦合,提高代码的复用性和可维护性。本文将详细介绍Java接口的定义…

SQL复习专题

请结合B站-技术蛋老师 视频学习 核心语法 一、增:数据库/表格 create create database 数据库名;#创建表(列名类型) mysql> create table eggs_record(-> id int,-> egg_name varchar(10),-> sold date-> ); 这…

Android熄屏/亮屏,旋转屏幕/横竖屏切换生命周期变化与activity销毁重建

Android熄屏/亮屏,旋转屏幕/横竖屏切换生命周期变化与activity销毁重建 1、熄屏/亮屏 熄屏后,Android生命周期走: onPause onStop 接着点亮Android手机屏幕,生命周期走: onRestart onStart onResume 2、旋转屏幕&…

服务器中有g++,但是查询不到,Command ‘g++‘ not found

有gcc但是查询不到g,gcc版本为9.5.0 (base) zyICML:~$ g -V Command g not found, but can be installed with: apt install g Please ask your administrator. 突然就出现这个问题,导致detectron装不上,现在有时间了专门研究下怎么解决 这…

阿里云8核32G服务器g8y租用优惠价格243.30元/月

阿里云8核32G服务器g8y租用优惠价格243.30元/月,配置云服务器g8y(ecs.g8y.2xlarge)8核32G、按固定带宽1M-5M、可选ESSD云盘40G起,优惠价格243.30元一个月, 阿里云服务器优惠活动 aliyunfuwuqi.com/go/aliyun 阿里云服务…

【重制版】在Android手机上安装kali Linux

前言 由于kali官方的Nethunter2的安装代码因为…无法访问,手头又没有一些受支持的机器3,所以做了这个脚本,供大家使用。 工具 搭载基于Android的手机TermuxVNC Viewer 安装必备软件(如已安装请忽略) 请到 https://www.hestudio.net/post…

公安可视化分析指挥调度平台的构成要素

匠心接单中...8年前端开发和UI设计接单经验,完工项目1000,持续为友友们分享有价值、有见地的干货观点,有业务需求的老铁,欢迎关注发私信。 公安可视化分析指挥调度平台是一个集成了多种技术和功能的综合性平台,主要由…

mysql 日期时间函数

学习了字符串函数,接着学习日期时间函数, 3,日期和时间函数 日期和时间函数主要用来处理日期和时间值,一般的日期函数除了使用DATE类型的参数外,也可以使用DATETIME或者TIMESTAMP类型的参数,但会忽略这些值…

Discuz采集发布插件

Discuz(简称DZ)是一款知名的开源论坛系统,广泛应用于各类网站社区。对于许多站长来说,保持论坛内容的更新是一项挑战,特别是在内容量庞大的情况下。为了解决这个问题,有一类特殊的插件是用于在Discuz论坛中…

康耐视visionpro-CogDistancePointLineTool工具详细说明

CogDistancePointLineTool功能说明: 测量点到线的距离 备注:在“Geometry-Measurement”选项中的所有工具都是测量尺寸或角度工具,包括测量线与线 的角度、点与线的距离、圆与圆的距离等测量工具,工具使用的方法相似。 ①.打开工具栏&#…

Elment ui 动态表格与表单校验 列表数据 组件

组件做个记录&#xff0c;方便以后会用到。 效果&#xff1a; 代码 &#xff1a; <template><el-dialog title"商品详情" :visible.sync"dialogVisible" width"80%"><el-tabs v-model"activeTab"><el-tab-pane…

正弦实时数据库(SinRTDB)的使用(8)-过滤查询

前文已经将正弦实时数据库的使用进行了介绍&#xff0c;需要了解的可以先看下面的博客&#xff1a; 正弦实时数据库(SinRTDB)的安装 正弦实时数据库(SinRTDB)的使用(1)-使用数据发生器写入数据 正弦实时数据库(SinRTDB)的使用(2)-接入OPC DA的数据 正弦实时数据库(SinRTDB)…

通过node 后端实现颜色窃贼 (取出某个图片的主体rgb颜色 )

1.需求 我前端轮播图的背景色 想通过每一张轮播图片的颜色作为背景色 这样的话 需要通过一张图片 取出图片的颜色 这个工作通过前端去处理 也可以通过后端去处理 前端我试了试 color-thief 的插件 但是 这个插件是基于canvas 的模式来的 我需要在小程序中使用这个插件 而且是…

E4440A安捷伦E4440A频谱分析仪

181/2461/8938产品概述&#xff1a; Agilent PSA 系列 E4440A 高性能频谱分析仪提供强大的一键式测量、多功能功能集和领先的技术&#xff0c;可满足您的项目和需求。 Agilent E4440A 频谱分析仪的其他功能和规格包括&#xff1a; 频率范围&#xff1a;3 Hz - 26.5 GHz/-0.19…

汇总:五个开源的Three.js项目

Three.js 是一个基于 WebGL 的 JavaScript 库&#xff0c;它提供了一套易于使用的 API 用来在浏览器中创建和显示 3D 图形。通过抽象和简化 WebGL 的复杂性&#xff0c;Three.js 使开发者无需深入了解 WebGL 的详细技术就能够轻松构建和渲染3D场景、模型、动画、粒子系统等。 T…

Java数据结构-双向不带头非循环链表(模拟实现LinkedList)

目录 1. 双向不带头非循环链表的介绍2. 相关功能的实现2.1 基本框架2.2 size2.3 addFirst2.4 addLast2.5 addIndex2.6 contains2.7 remove2.8 removeAllKey2.9 clear 3. 全部代码 前面我们学习了最简单的链表&#xff1a;单链表&#xff0c;今天我们学习双向不带头非循环链表&a…

分布式图床项目

一、图床架构分析 二、后台数据处理框架 秒传: 如果上传的文件已经在服务器中存在了,就不需要二次上传了,但是服务器会对这个文件的引用计数加一,这样服务器就知道这个文件是多个人持有的。先对上传的文件进行 md5 校验来判断服务器中已经存在相同的文件了(同样的文件拿到…

OpenHarmony无人机MAVSDK开源库适配方案分享

MAVSDK 是 PX4 开源团队贡献的基于 MavLink 通信协议的用于无人机应用开发的 SDK&#xff0c;支持多种语言如 C/C、python、Java 等。通常用于无人机间、地面站与通信设备的消息传输。 MAVLink 是一种非常轻量级的消息传递协议&#xff0c;用于与无人机&#xff08;以及机载无…

[flink 实时流基础]源算子和转换算子

文章目录 1. 源算子 Source1. 从集合读2. 从文件读取3. 从 socket 读取4. 从 kafka 读取5. 从数据生成器读取数据 2. 转换算子基本转换算子&#xff08;map/ filter/ flatMap&#xff09; 1. 源算子 Source Flink可以从各种来源获取数据&#xff0c;然后构建DataStream进行转换…