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)}`);

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

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

相关文章

QTTabBar在重置Internet Explorer后失效

网上常见的办法是&#xff1a; 打开IE浏览器>>设置>>Internet选项>>高级。勾选启用第三方浏览器扩展&#xff0c;重启后生效。 打开IE浏览器-设置–管理加载项&#xff0c;启用QTTabBar。 实际在Win10上使用的时候会遇到点开IE自动跳转到Edge的问题。这时…

数字孪生技术及其广泛应用场景探讨

通过将实际物理世界中的物体或系统建模、模拟和分析&#xff0c;数字孪生技术可以提供更精确、更可靠、更高效的解决方案。数字孪生技术在智能制造、城市建设、智慧物流等众多领域中得到了广泛的应用。 通过将数据可视化呈现在虚拟环境中&#xff0c;我们可以更清晰地观察和理…

CodeArts Snap:辅助你编程的神器

CodeArts Snap - Visual Studio Marketplace 文心一言 CodeArts Snap&#xff1a;辅助你编程的神器 一、简介 CodeArts Snap是一款基于华为云研发大模型开发的智能开发助手&#xff0c;旨在覆盖软件开发的全生命周期&#xff0c;为开发者提供端到端的智能支持。自2023年7月…

element-plus(el-table)中summary-method和span-method用法详解

el-table官方文档 el-table属性名说明类型参数summary-method自定义的合计计算方法Function columns, data span-method合并行或列的计算方法Functionrow, column, rowIndex, columnIndex 合并表格行&#xff08;通用&#xff09; const mergeObj ref({}); // 用来记录需要…

Matlab实现DBO-BiTCN-BiGRU-Attention蜣螂算法优化双向时间卷积双向门控循环单元融合注意力机制多变量回归预测

下面是一个使用DBO-BiTCN-BiGRU-Attention&#xff08;蜣螂算法优化双向时间卷积双向门控循环单元融合注意力机制&#xff09;进行多变量回归预测的简化示例的Matlab代码。请注意&#xff0c;这只是一个示例&#xff0c;并且可能需要根据您的具体数据和问题进行适当的修改和调整…

网络编程2----UDP简单客户端服务器的实现

首先我们要知道传输层提供的协议主要有两种&#xff0c;TCP协议和UDP协议&#xff0c;先来介绍一下它们的区别&#xff1a; 1、TCP是面向连接的&#xff0c;UDP是无连接的。 连接的本质是双方分别保存了对方的关键信息&#xff0c;而面向连接并不意味着数据一定能正常传输到对…

【NLP】给Transformer降降秩,通过分层选择性降阶提高语言模型的推理能力

【NLP】给Transformer降降秩&#xff0c;通过分层选择性降阶提高语言模型的推理能力 文章目录 【自然语言处理-论文翻译与学习】序1、导论2、相关工作3、相关工具4、方案5、实验5.1 使用 GPT-J 对 CounterFact 数据集进行彻底分析5.1.1 数据集中的哪些事实是通过降阶恢复的&…

使用谷歌 Gemini API 构建自己的 ChatGPT(一)

AI领域一直由OpenAI和微软等公司主导&#xff0c;而Gemini则崭露头角&#xff0c;以更大的规模和多样性脱颖而出。它被设计用于无缝处理文本、图像、音频和视频&#xff1b;这些基础模型重新定义了人工智能交互的边界。随着谷歌在人工智能领域强势回归&#xff0c;了解Gemini如…

oracle绑定执行计划测试

创建表 SQL> create table xytest as select * from dba_objects where object_id is not null;Table created. 查询数据 SQL> select count(*) from xytest;COUNT(*) ----------87577在object_id创建索引 SQL> create index idx_obj_id on xytest(object_id);Inde…

17.路由配置与页面创建

路由配置与页面创建 官网&#xff1a;https://router.vuejs.org/zh/ Vue Router 和 组合式 API | Vue Router (vuejs.org) 1. 修改index.ts import { RouteRecordRaw, createRouter, createWebHistory } from "vue-router"; import Layout from /layout/Index.vueco…

中国版Sora?快手「可灵」到底行不行?

“可灵”与Sora有相似的技术架构&#xff0c;生成的视频动作流畅、幅度大&#xff0c;对物理世界理解力与还原度很高。可生成120秒、每秒30帧的高清视频&#xff0c;分辨率高达1080p&#xff0c;并且支持多种不同的屏幕比例。 “中国版SORA”到底是不是名副其实&#xff1f;能…

【Android面试八股文】1. 你说一说Handler机制吧 2. 你知道Handler的同步屏障吗? 3. Looper一直在循环,会造成阻塞吗?为什么?

文章目录 一. 你说一说Handler机制吧二、你知道Handler的同步屏障吗&#xff1f;2.1 Handler消息的分类2.2 什么是同步屏障2.3 为什么要设计同步屏障2.4 同步屏障的用法 三、Looper一直在循环&#xff0c;会造成阻塞吗&#xff1f;为什么&#xff1f;扩展阅读 一. 你说一说Hand…

YASKAWA机器人HW1171921-B电缆维修

安川机器人作为现代工业自动化的重要设备&#xff0c;其稳定运行对于生产线的连续性和效率至关重要。然而&#xff0c;随着使用时间的增长&#xff0c;可能会出现各种YASKAWA机器人本体线缆故障&#xff0c;如断线、短路、接触不良等。 一、安川工业机器人电缆维修前的准备 在进…

leetcode打卡#day43 携带研究材料(第六期模拟笔试)、416. 分割等和子集

携带研究材料&#xff08;第六期模拟笔试&#xff09; #include<iostream> #include<algorithm> #include<vector>using namespace std;int getMaxValue(vector<int>& weights, vector<int>& values, int n, int m) {vector<vector&…

2024/06/13--代码随想录算法2/17| 62.不同路径、63. 不同路径 II、343. 整数拆分 (可跳过)、96.不同的二叉搜索树 (可跳过)

62.不同路径 力扣链接 动态规划5步曲 确定dp数组&#xff08;dp table&#xff09;以及下标的含义&#xff1a; dp[i][j] &#xff1a;表示从&#xff08;0 &#xff0c;0&#xff09;出发&#xff0c;到(i, j) 有dp[i][j]条不同的路径。确定递推公式&#xff0c;dp[i][j] d…

vue3delete请求报403forbidden,前后端解决方式

在做开发时&#xff0c;前期已经在Controller类加上CrossOrigin(origins "*")&#xff0c;发送get和post请求都没问题&#xff0c;但遇到delete请求时&#xff0c;又报出跨域问题 一.前端添加proxy代理服务器&#xff08;未能解决&#xff09; 在vue.config.js中使…

热门开源项目推荐~商城系统mall项目详细介绍

Mall 项目是一个开源的电商系统&#xff0c;它包括前台商城系统和后台管理系统&#xff0c;主要基于 SpringBoot 和 MyBatis 进行实现&#xff0c;并采用 Docker 容器化部署1315161819。以下是对 Mall 项目的详细介绍&#xff1a; 项目概览 Mall 项目旨在提供一个高效、可扩展…

【面经总结】Java基础 - Java8 新特性

Java8 新特性 Java8 有什么新特性 Stream API&#xff1a;函数式编程思想&#xff0c;更方便处理集合、文件Optional 类&#xff1a;解决空指针异常Lambda 表达式&#xff1a;替代匿名内部类来实现函数式接口默认方法&#xff1a;接口中可以定义默认实现 Stream API Stream…

【Python入门与进阶】Python如何处理不同进制的数据

Python 提供了多种方法来处理不同进制的数据&#xff0c;包括二进制、八进制、十进制和十六进制。以下是一些常见的操作方式&#xff1a; 1. 进制转换 Python 内置了一些函数&#xff0c;可以方便地在不同进制之间进行转换。 1.1 从不同进制转换为十进制 二进制&#xff1a…

u-boot启动第一阶段 Start.S

从sram的uboot的第一阶段跳转到ddr下的uboot的第二阶段地址&#xff08;不直接从ram中完成uboot是因为ram空间有限&#xff09; 从start.s中构建异常向量表&#xff0c;然后到lowlevel中&#xff0c;然后完成2到7&#xff0c;之后再再ram中做栈重定位动作&#xff0c;建立mmu&a…