当前位置: 首页 > 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)}`);

相关文章:

  • try-with-resources 工作原理
  • DockerHub无法访问,国内镜像拉取迂回解决方案
  • 万字长文爆肝Spring(一)
  • CSS选择器种类总结
  • Spring Boot中Excel的导入导出的实现之EasyPoi框架使用教程
  • docker安装消息队列mq中的rabbit服务
  • python操作数据库,django操作数据库
  • 【Vue】自学笔记(四)
  • 有没有硅基生命?AGI在哪里?
  • 【面试干货】ArrayList、Vector、LinkedList的存储性能和特性比较
  • 类android设备reset过程
  • C++语法08 数据类型之间的强制转换
  • FlinkCDC 3.1.0 支持 Flink 1.18.0 版本选择
  • B树与B+树与Mysql innodb的B+树和其相关索引
  • 厂里资讯之总体架构介绍以及环境搭建
  • C++回声服务器_9-epoll边缘触发模式版本服务器
  • export和import的用法总结
  • JavaScript 基础知识 - 入门篇(一)
  • javascript从右向左截取指定位数字符的3种方法
  • Javascript基础之Array数组API
  • JavaWeb(学习笔记二)
  • nodejs实现webservice问题总结
  • Redux 中间件分析
  • SegmentFault 社区上线小程序开发频道,助力小程序开发者生态
  • spring boot 整合mybatis 无法输出sql的问题
  • 从tcpdump抓包看TCP/IP协议
  • 大型网站性能监测、分析与优化常见问题QA
  • 对象管理器(defineProperty)学习笔记
  • 基于阿里云移动推送的移动应用推送模式最佳实践
  • 看域名解析域名安全对SEO的影响
  • 漂亮刷新控件-iOS
  • 深度解析利用ES6进行Promise封装总结
  • 吐槽Javascript系列二:数组中的splice和slice方法
  • 问:在指定的JSON数据中(最外层是数组)根据指定条件拿到匹配到的结果
  • AI算硅基生命吗,为什么?
  • 阿里云API、SDK和CLI应用实践方案
  • ​​快速排序(四)——挖坑法,前后指针法与非递归
  • ${factoryList }后面有空格不影响
  • (2)Java 简介
  • (2)STM32单片机上位机
  • (3)医疗图像处理:MRI磁共振成像-快速采集--(杨正汉)
  • (4)事件处理——(6)给.ready()回调函数传递一个参数(Passing an argument to the .ready() callback)...
  • (delphi11最新学习资料) Object Pascal 学习笔记---第5章第5节(delphi中的指针)
  • (java版)排序算法----【冒泡,选择,插入,希尔,快速排序,归并排序,基数排序】超详细~~
  • (python)数据结构---字典
  • (不用互三)AI绘画:科技赋能艺术的崭新时代
  • (附源码)spring boot网络空间安全实验教学示范中心网站 毕业设计 111454
  • (附源码)ssm本科教学合格评估管理系统 毕业设计 180916
  • (力扣题库)跳跃游戏II(c++)
  • (三)Pytorch快速搭建卷积神经网络模型实现手写数字识别(代码+详细注解)
  • (算法)Game
  • (转)http-server应用
  • (转)Sublime Text3配置Lua运行环境
  • (转)总结使用Unity 3D优化游戏运行性能的经验
  • ****Linux下Mysql的安装和配置