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.rhkb.cn/news/292150.html

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

相关文章

住宅IP是什么?与机房IP有哪些区别?

随着互联网的普及和发展,不同类型的IP地址在网络世界中扮演着重要角色。在网络架构中,机房IP和住宅IP是两种常见的IP类型,它们各有优劣,适用于不同的场景和需求。本文将对机房IP和住宅IP进行技术对比,并给出选择合适IP…

vue项目使用eletron将打包成桌面应用(.exe)

vue项目使用eletron将打包成桌面应用(.exe) 1.前期准备 两个项目: 1、自己用vue cli创建的项目 2、第二个是去gitee将案例clone下来 案例地址 https://gitee.com/qingplus/electron-quick-start.git 2、测试案例是否可以正常运行 # 进入项目 cd electron-quick-…

kubernetes负载均衡资源-Ingress

一、Ingress概念 1.1 Ingress概念 使用NodePort类型的Service可以将集群内部服务暴露给集群外部客广端,但使用这种类型Service存在如下几个问题。 1、一个端口只能一个服务使用,所有通过NodePort暴露的端口都需要提前规划;2、如果通过NodePort暴露端口过多,后期维护成本太…

IPv6-重定向,PMTU,GRE隧道

IPv6-重定向,PMTU(路径最大传输单元),GRE隧道(Generic Routing Encapsulation,通用路由封装协议) 重定向过程 触发重定向的条件: 1、报文的入接口,等于自身路由之后的…

ubuntu2204配置zabbix6.4高可用

zabbix6.4-HA 配置keepalived配置haproxy数据库高可用配置zabbix-server配置proxy配置客户端agent 本实验VMware搭建zabbix6.4高可用集群,搭配haproxykeepalived。 master,node节点搭建haproxykeepalibed主备并配置vip地址 三台控制节点搭建数据库高可用…

Pytorch 下载失败原因

错误信息: ERROR: Could not find a version that satisfies the requirement torch (from versions: none) ERROR: No matching distribution found for torch 解决方案: 在官网看到,它需要python3.8-3.11的环境。过高和过低的版本都不…

微信小程序备案流程详细操作指南

自2023年9月1日起,所有新上架的微信小程序均需事先完成备案手续,方能成功上线。而对于已经上架的存量小程序,也需要在2024年3月31日前完成备案工作。若在规定时间内未完成备案,平台将依据备案相关规定,自2024年4月1日起…

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

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

ESP8266 控制 LED 亮灭

一、引脚对应 二、按键控制 LED 亮灭 2.1样例1 #include <ESP8266WiFi.h>const int ledPin D2; // LED 连接到 D2 引脚 const int keyPin D4; // 按键连接到 D4 引脚volatile bool flag false; // 记录 LED 状态的标志// 外部中断处理函数 ICACHE_RAM_ATTR void han…

(原型与原型链)前端八股文修炼Day5

一 原型链的理解 原型链定义&#xff1a; 原型链是 JavaScript 中实现对象继承的关键机制之一&#xff0c;它是一种对象之间的关系&#xff0c;通过这种关系&#xff0c;一个对象可以继承另一个对象的属性和方法。 原型链的组成&#xff1a; 每个对象都有一个指向另一个对象的…

C# 微软官方学习文档

链接&#xff1a;https://learn.microsoft.com/zh-cn/dotnet/csharp/ 在C#的学习过程中&#xff0c;我们可以参考微软官方的学习文档。它是一个免费的学习平台&#xff0c;提供了丰富的C#学习路径和教程&#xff08;如下图&#xff09;&#xff0c;对我们入门到高级应用开发都…

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

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

【自动装箱以及包装类的缓存】⭐️通过具体案例看下每种包装类的不同结果

目录 前言 一、自动装箱与拆箱&#xff08;以 Integer 包装类为例&#xff09; 二、再来看看几个示例 ​编辑三、Double ,Float 类型亦是如此吗&#xff1f; 前言 小伙伴们大家好&#xff0c;日常使用业务层方面的代码居多&#xff0c;但也不可忘了基本的一些代码格式以及原…

npm淘宝镜像源更新

目录 前情提要&#xff1a; 背景&#xff1a; 镜像源更新&#xff1a; 清楚缓存&#xff1a; 直接切换镜像源&#xff1a; 注&#xff1a;npm 补充&#xff1a; 错误解释&#xff1a; 解决方法&#xff1a; 前情提要&#xff1a; 2024 /1 /22 &#xff0c;registry.npm…

理解游戏服务器架构-逻辑底层架构

目录 前言 什么是逻辑底层架构 逻辑底层架构的职责 1&#xff09;Thread-线程 线程管理 线程通讯 线程安全锁机制 2&#xff09;Network-网络 网络模型 网络消息协议 断线重连 网络安全 防范重复消息 防范篡改消息内容 防范篡改内存数据 网络承载 3&#xff0…

HarmonyOS 应用开发之FA模型启动Stage模型UIAbility

本文介绍FA模型的三种应用组件如何启动Stage模型的UIAbility组件。 PageAbility启动UIAbility 在PageAbility中启动UIAbility和在PageAbility中启动PageAbility的方式完全相同。 import featureAbility from ohos.ability.featureAbility; import { BusinessError } from oh…

阿里云2核4G服务器租用价格,支持多少人在线?

阿里云2核4G服务器多少钱一年&#xff1f;2核4G配置1个月多少钱&#xff1f;2核4G服务器30元3个月、轻量应用服务器2核4G4M带宽165元一年、企业用户2核4G5M带宽199元一年。可以在阿里云CLUB中心查看 aliyun.club 当前最新2核4G服务器精准报价、优惠券和活动信息。 阿里云官方2…

YOLOv9改进策略 :主干优化 | ConvNeXtV2:适应自监督学习,让 CNN “再一次强大”?

💡💡💡本文改进内容:完全卷积掩码自编码器框架 ConvNeXt V2,它显著提高了纯convnet在各种识别基准上的性能,包括ImageNet分类,COCO目标检测和ADE20k分割。还提供了各种尺寸的预训练ConvNeXt v2模型,从而在ImageNet上具有76.7%精度的3.7M Atto model和88.9%精度的650…

理解游戏服务器架构-部署架构

目录 前言 我所理解的服务器架构 什么是否部署架构 部署架构的职责 进程业务职责 网络链接及通讯方式 与客户端的连接方式 服务器之间连接关系 数据落地以及一致性 数据库的选择 数据访问三级缓存 数据分片 读写分离 分布式数据处理 负载均衡 热更新 配置更新 …

Unity 基于Rigidbody2D模块的角色移动

制作好站立和移动的动画后 控制器设计 站立 移动 角色移动代码如下&#xff1a; using System.Collections; using System.Collections.Generic; using Unity.VisualScripting; using UnityEngine;public class p1_c : MonoBehaviour {// 获取动画组件private Animator …