当前位置: 首页 > news >正文

8个常用的辅助函数!!

在开发各种项目时,我们会发现经常需要一些辅助函数来帮助我们实现一些需求,并且这些函数是在很多项目里都可以进行复用的。下面我就列出我们一些常用的辅助函数,来帮助大家在开发项目时,进行复用。

1. 首字母大写

将字符串的第一个字母大写,其余部分转换为小写。

// 该函数接受一个可选的字符串参数 word
export const capitalizeFirstLetter = (word?: string) => {// 如果传入了字符串 word,则将其第一个字符转换为大写,并将其余字符转换为小写return word ? word.charAt(0).toUpperCase() + word.toLocaleLowerCase().slice(1) : '';// 如果未传入字符串,则返回空字符串
};

使用示例:

const formattedName = capitalizeFirstLetter('johN dOE');
// 将 'johN dOE' 转换为 'John doe'
console.log(formattedName); // 输出:John doe

2. 格式化日期

此函数使用 moment 库来格式化日期,使用前需要我们安装moment库。它可以根据 isTime 标志将日期格式化为 DD/MM/YYYY 或 HH A,可以根据我们的需求输出不同的时间格式。

npm install moment
// 导入 moment 库
import moment from 'moment';// 该函数接受一个日期字符串 date 和一个布尔值 isTime
export const formatDate = (date: string, isTime = false) => {// 如果未传入日期字符串,则返回空字符串if (!date) return '';// 使用 moment 解析日期字符串const parsedDate = moment(date);// 如果 isTime 为 true,则格式化为 HH:mm A,否则格式化为 DD/MM/YYYYif (isTime) return parsedDate.format('HH:mm A');return parsedDate.format('DD/MM/YYYY');
};

使用示例:

const dateString = '2024-06-10T18:30:00';
const formattedDate = formatDate(dateString);
// 将日期 '2024-06-10T18:30:00' 格式化为 '10/06/2024'
console.log(formattedDate); // 输出:10/06/2024const formattedTime = formatDate(dateString, true);
// 将日期 '2024-06-10T18:30:00' 格式化为 '06:30 PM'
console.log(formattedTime); // 输出:06:30 PM

3. 缩略文段

但我们遇到需要将文字段落进行缩短,缩短到指定的长度并附加省略号 (…)时,就可以使用下面这个函数。

// 该函数接受一个字符串 text 和一个数字 maxLength
export const truncateText = (text: string, maxLength: number) => {// 如果字符串长度小于或等于最大长度,则返回原字符串if (text.length <= maxLength) return text;// 否则截取字符串的前 maxLength 个字符,并添加省略号return text.substring(0, maxLength) + '...';
};

使用示例:

const longText = 'This is a long text that needs to be truncated.';
const truncatedText = truncateText(longText, 10);
// 将文本 'This is a long text that needs to be truncated.' 截断为 'This is a...'
console.log(truncatedText); // 输出:This is a...

4. 检查字符串是否包含字符类型

但当我们遇到需要检查字符串是否包含至少一个大写字母、一个小写字母、一个数字或一个特殊字符的需求时就可以使用下面这个函数。在校验密码最常见也最多用。

// 该函数接受一个字符串 val
export const containsAtleastOneUpperCase = (val: string) => /(?=.*?[A-Z])/.test(val);
// 使用正则表达式检查字符串是否包含至少一个大写字母// 定义一个函数 containsAtleastOneLowerCase,该函数接受一个字符串 val
export const containsAtleastOneLowerCase = (val: string) => val ? /(?=.*?[a-z])/.test(val) : false;
// 使用正则表达式检查字符串是否包含至少一个小写字母// 定义一个函数 containsAtleastOneNumber,该函数接受一个字符串 val
export const containsAtleastOneNumber = (val: string) => /(?=.*[0-9])/.test(val);
// 使用正则表达式检查字符串是否包含至少一个数字// 定义一个函数 containsAtLeastOneSpecialChar,该函数接受一个字符串 val
export const containsAtLeastOneSpecialChar = (val: string) => /(?=.*[$&+,:;=?@#|'<>.^*_()%!-])/.test(val);
// 使用正则表达式检查字符串是否包含至少一个特殊字符

使用示例:

const password = 'Pa$$w0rd!';
const hasUpperCase = containsAtleastOneUpperCase(password);
const hasLowerCase = containsAtleastOneLowerCase(password);
const hasNumber = containsAtleastOneNumber(password);
const hasSpecialChar = containsAtLeastOneSpecialChar(password);console.log(`Has upper case: ${hasUpperCase}`); // 输出:true
console.log(`Has lower case: ${hasLowerCase}`); // 输出:true
console.log(`Has number: ${hasNumber}`); // 输出:true
console.log(`Has special char: ${hasSpecialChar}`); // 输出:true

5. 检查数字奇偶性

当我们需要对数据中的奇数组和偶数组进行区分处理的时候就可以使用这个函数了。

// 定义一个函数 isEven,该函数接受一个数字 number
export const isEven = (number: number) => (number % 2 === 0);
// 返回该数字是否为偶数

6. 检查非空对象

当我们需要检查对象是否非空时,我们就可以使用下面这个函数了。这在帮助我们避免对空数据进行操作是非常有用的一个辅助函数。

// 该函数接受一个对象 obj
export const isNonEmptyObject = (obj: Record<string, unknown>) => {// 检查对象是否为非空对象,且键的数量大于0return typeof obj === 'object' && obj !== null && Object.keys(obj).length > 0;
};

使用示例:

const emptyObject = {};
const nonEmptyObject = { name: 'John Doe', age: 30 };const isEmpty = isNonEmptyObject(emptyObject);
const isNotEmpty = isNonEmptyObject(nonEmptyObject);console.log(`Empty object: ${isEmpty}`); // 输出:false
console.log(`Non-empty object: ${isNotEmpty}`); // 输出:true

7. 生成随机数字

当我们需要随机生成一个包含随机大小写字母和数字的字符串时,就可以使用下面的这个函数了。

// 该函数接受一个可选的长度参数 length,默认为10
export const generateRandomId = (length = 10) => {// 定义一个包含所有可能字符的字符串const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';// 初始化一个空字符串 idlet id = '';// 循环 length 次,从 chars 中随机选择一个字符并添加到 id 中for (let i = 0; i < length; i++) {id += chars.charAt(Math.floor(Math.random() * chars.length));}// 返回生成的 idreturn id;
};

使用示例:

const randomId1 = generateRandomId();
const randomId2 = generateRandomId();console.log(`Random ID 1: ${randomId1}`); // 输出:类似于 '4jH5y2d1kX'
console.log(`Random ID 2: ${randomId2}`); // 输出:类似于 'qW3E2v1z7B'

8. 深拷贝

当我们需要创建对象的深拷贝时,下面这个函数就很有用了。它可以帮助我们避免意外的去修改原始对象数据。减少bug的出现

// 定义一个泛型函数 deepCloneObject,用于深度克隆对象
export const deepCloneObject = <T extends Record<string, any>>(obj: T): T => {// 如果 obj 为空或不是对象,则直接返回 objif (!obj || typeof obj !== 'object') return obj;// 创建一个新对象,用于存储克隆的值const copy: Record<string, any> = {};// 遍历 obj 中的每一个键for (const key in obj) {// 如果 obj[key] 是对象,则递归调用 deepCloneObject 进行深度克隆// 否则,直接复制 obj[key] 的值copy[key] = typeof obj[key] === 'object' ? deepCloneObject(obj[key]) : obj[key];}// 将 copy 转换为 T 类型并返回return copy as T;
};

使用示例:

const originalObject = {name: 'John Doe',age: 30,address: {city: 'San Francisco',country: 'USA'}
};const clonedObject = deepCloneObject(originalObject);console.log(`Original object: ${JSON.stringify(originalObject)}`);
console.log(`Cloned object: ${JSON.stringify(clonedObject)}`);// 修改克隆对象
clonedObject.age = 35;
clonedObject.address.city = 'New York';console.log(`Modified cloned object: ${JSON.stringify(clonedObject)}`);// 原始对象保持不变
console.log(`Original object after modification: ${JSON.stringify(originalObject)}`);

相关文章:

8个常用的辅助函数!!

在开发各种项目时&#xff0c;我们会发现经常需要一些辅助函数来帮助我们实现一些需求&#xff0c;并且这些函数是在很多项目里都可以进行复用的。下面我就列出我们一些常用的辅助函数&#xff0c;来帮助大家在开发项目时&#xff0c;进行复用。 1. 首字母大写 将字符串的第一…...

服务器数据恢复—OceanStor存储中NAS卷数据丢失如何恢复数据?

服务器存储数据恢复环境&故障&#xff1a; 华为OceanStor某型号存储。工作人员在上传数据时发现该存储上一个NAS卷数据丢失&#xff0c;管理员随即关闭系统应用&#xff0c;停止上传数据。这个丢失数据的卷中主要数据类型为office文件、PDF文档、图片文件&#xff08;JPG、…...

54.Python-web框架-Django-免费模板django-datta-able

1.Datta Able Django介绍 Detta Able Djiango是什么 Datta Able Django 是一个由AppSeed提供的开源Django管理面板&#xff0c;基于现代设计&#xff0c;为开发者提供了一流的功能和优雅的界面。它源自CodedThemes的高风格化Bootstrap 4模板——Datta Able Bootstrap Lite&…...

XP系统安装Node.js v8.6.0并搭建Vue2开发环境(项目兼容到Vista的IE9浏览器)

下载并安装Node.js v8.6.0 通常我们开发Vue2项目&#xff0c;是通过vue create命令建立Vue2工程&#xff0c;用npm run serve命令启动Vue2网站的。 vue命令是用JavaScript写的&#xff0c;不是用C语言写的&#xff0c;必须要Node.js环境才能运行&#xff0c;由Node.js自带的np…...

redis序列化

文章目录 1、为什么要进行序列化操作&#xff1f;2、序列化方式2.1、自定义序列化2. 2、StringRedisTemplate&#xff08;重点&#xff09; 1、为什么要进行序列化操作&#xff1f; 不进行序列化向redis存入数据代码&#xff1a; SpringBootTest class RedisDemoApplicationT…...

IOT-Tree 1.7.0实现了一个类似Node-Red的流程功能

本人一直研究这个软件&#xff0c;1.7.0版本最近刚刚发布&#xff0c;里面有个大变化&#xff0c;增加了消息流的功能&#xff0c;这个功能和IBM的Node-Red很相似。 Node-Red那个图形化流程很多年前就给了我很深刻的印象&#xff0c;我个人理解是&#xff0c;通过这样的图形化…...

nc网络收发测试-tcp客户端\TCP服务器\UDP\UDP广播

netcat&#xff08;nc&#xff09;&#xff1a; 作用&#xff1a;一个功能强大的网络工具&#xff0c;提供了简单的网络测试和网络编程功能。工作原理&#xff1a;可以用于建立TCP或UDP连接&#xff0c;并发送和接收数据。示例用法&#xff1a; 监听TCP端口&#xff1a;nc -l 1…...

程序员该有怎么样的职业素养

目录 1、持续学习 2、解决问题的能力 3、团队协作能力 4、责任感 5、沟通能力 6、总结 作为一个从业者&#xff0c;我认为对于程序员而言&#xff0c;职业素养是非常重要的。职业素养不仅影响个人的职业发展&#xff0c;也影响团队和企业的整体氛围和效率。在我的职业生涯…...

51交通灯

一、基本原理 利用51单片机控制各个路口红绿灯及时间显示。 设计的重点&#xff1a; 1、各个路口红绿灯亮灭的规则&#xff0c;暂不考虑左转方向&#xff1b; 2、倒计时的实现&#xff0c;利用单片机的定时器进行计数得到秒信号&#xff1b; 3、时间显示&#xff1a;东西南…...

鸿蒙Arkts上传图片并获取接口返回信息

需求&#xff1a; 选择相册图片后&#xff0c;将文件上传到服务器&#xff0c;接口会返回图片地址。 问题&#xff1a; 1、鸿蒙自带的文件上传返回值只会返回上传状态&#xff0c;不会返回接口返回信息。 类似问题 HarmonyOS上传文件以及权限授权_harmonyos中axios上传文件…...

超文本标记语言(HTML)简介

HTML 基础 超文本标记语言&#xff08;英语&#xff1a;HyperText Markup Language&#xff0c;简称&#xff1a;HTML&#xff09;是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是&#xff1a;一组段落、一个重点信息列表、也可以含有图片和数据表。正如标题所示…...

使用thymeleaf直接渲染字符串

目录 一、依赖 二、示例代码 一、依赖 <--JAVA 8--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId><version>2.7.18</version></dependency><-…...

Spring Boot整合发送QQ邮箱功能

1. 创建Spring Boot项目 使用Spring Initializr&#xff08;https://start.spring.io/&#xff09;创建一个新的Spring Boot项目&#xff0c;并添加spring-boot-starter-mail依赖。 2. 添加配置 在application.properties或application.yml文件中添加QQ邮箱的SMTP配置。这里…...

Milvus向量数据库

Milvus 是一个开源的向量数据库&#xff0c;专为处理高维向量数据而设计&#xff0c;常用于大规模向量相似性搜索和基于向量的机器学习应用。它支持高效地管理、搜索和操作嵌入&#xff08;如文本、图像、音频的特征向量&#xff09;&#xff0c;在推荐系统、图像检索、语义搜索…...

python cls的使用

import threadingclass Test:# new方法用于创建类的实例def __new__(cls, *args, **kwargs):print("__new__:", cls.__class__.__name__)return object.__new__(cls) # 返回实例给init self参数# init用于初始化类的实例&#xff0c;实例由new方法传递过来的&#xf…...

idea中maven下载依赖缓慢解决方法

解决IDEA中Maven下载依赖包过慢或报错的问题_maven 下载依赖要很久-CSDN博客...

JS 中的各种距离 scrollTop?clientHeight?

元素的各种距离 DOM 对象 属性描述offsetWidth只读&#xff0c;返回元素的宽度&#xff08;包括元素宽度、内边距和边框&#xff0c;不包括外边距&#xff09;offsetHeight只读&#xff0c;返回元素的高度&#xff08;包括元素高度、内边距和边框&#xff0c;不包括外边距&am…...

继承-进阶-易错点

子类同名方法隐藏父类方法 即使调用不匹配也不会再去父类寻找&#xff0c;而是直接报错 //下面代码输出结果&#xff1a;( )&#xfeff;class A { public:void f(){ cout<<"A::f()"<<endl; }int a; };class B : public A { public:void f(int a){c…...

【图论应用】使用多路图(multigraph)对上海地铁站点图建模,并解决最短路径问题

文章目录 1 前言2 导包导入数据集3 创建多路图&#xff0c;导入节点和边信息3 绘制线路图4 计算最短路径 1 前言 最近正在学习图神经网络&#xff0c;先pick up了一些最基础的图论知识并学习了一些好玩的应用。 本文启发于B站视频&#xff08;BV1LY411R7HJ&#xff09;&#…...

RabbitMQ安装配置,封装工具类,发送消息及监听

1. Get-Started docker安装rabbitmq 拉取镜像 [rootheima ~]# docker pull rabbitmq:3.8-management 3.8-management: Pulling from library/rabbitmq 7b1a6ab2e44d: Pull complete 37f453d83d8f: Pull complete e64e769bc4fd: Pull complete c288a913222f: Pull complet…...

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

Mac软件卸载指南,简单易懂!

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

IP如何挑?2025年海外专线IP如何购买?

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...