在開發(fā)各種項(xiàng)目時(shí)，我們會(huì)發(fā)現(xiàn)經(jīng)常需要一些輔助函數(shù)來幫助我們實(shí)現(xiàn)一些需求，并且這些函數(shù)是在很多項(xiàng)目里都可以進(jìn)行復(fù)用的。下面我就列出我們一些常用的輔助函數(shù)，來幫助大家在開發(fā)項(xiàng)目時(shí)，進(jìn)行復(fù)用。

1. 首字母大寫

將字符串的第一個(gè)字母大寫，其余部分轉(zhuǎn)換為小寫。

// 該函數(shù)接受一個(gè)可選的字符串參數(shù) word
export const capitalizeFirstLetter = (word?: string) => {// 如果傳入了字符串 word，則將其第一個(gè)字符轉(zhuǎn)換為大寫，并將其余字符轉(zhuǎn)換為小寫return word ? word.charAt(0).toUpperCase() + word.toLocaleLowerCase().slice(1) : '';// 如果未傳入字符串，則返回空字符串
};

使用示例:

const formattedName = capitalizeFirstLetter('johN dOE');
// 將 'johN dOE' 轉(zhuǎn)換為 'John doe'
console.log(formattedName); // 輸出：John doe

2. 格式化日期

此函數(shù)使用 moment 庫來格式化日期，使用前需要我們安裝moment庫。它可以根據(jù) isTime 標(biāo)志將日期格式化為 DD/MM/YYYY 或 HH A，可以根據(jù)我們的需求輸出不同的時(shí)間格式。

npm install moment

// 導(dǎo)入 moment 庫
import moment from 'moment';// 該函數(shù)接受一個(gè)日期字符串 date 和一個(gè)布爾值 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. 縮略文段

但我們遇到需要將文字段落進(jìn)行縮短，縮短到指定的長度并附加省略號(hào) (…)時(shí)，就可以使用下面這個(gè)函數(shù)。

// 該函數(shù)接受一個(gè)字符串 text 和一個(gè)數(shù)字 maxLength
export const truncateText = (text: string, maxLength: number) => {// 如果字符串長度小于或等于最大長度，則返回原字符串if (text.length <= maxLength) return text;// 否則截取字符串的前 maxLength 個(gè)字符，并添加省略號(hào)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.' 截?cái)酁?'This is a...'
console.log(truncatedText); // 輸出：This is a...

4. 檢查字符串是否包含字符類型

但當(dāng)我們遇到需要檢查字符串是否包含至少一個(gè)大寫字母、一個(gè)小寫字母、一個(gè)數(shù)字或一個(gè)特殊字符的需求時(shí)就可以使用下面這個(gè)函數(shù)。在校驗(yàn)密碼最常見也最多用。

// 該函數(shù)接受一個(gè)字符串 val
export const containsAtleastOneUpperCase = (val: string) => /(?=.*?[A-Z])/.test(val);
// 使用正則表達(dá)式檢查字符串是否包含至少一個(gè)大寫字母// 定義一個(gè)函數(shù) containsAtleastOneLowerCase，該函數(shù)接受一個(gè)字符串 val
export const containsAtleastOneLowerCase = (val: string) => val ? /(?=.*?[a-z])/.test(val) : false;
// 使用正則表達(dá)式檢查字符串是否包含至少一個(gè)小寫字母// 定義一個(gè)函數(shù) containsAtleastOneNumber，該函數(shù)接受一個(gè)字符串 val
export const containsAtleastOneNumber = (val: string) => /(?=.*[0-9])/.test(val);
// 使用正則表達(dá)式檢查字符串是否包含至少一個(gè)數(shù)字// 定義一個(gè)函數(shù) containsAtLeastOneSpecialChar，該函數(shù)接受一個(gè)字符串 val
export const containsAtLeastOneSpecialChar = (val: string) => /(?=.*[$&+,:;=?@#|'<>.^*_()%!-])/.test(val);
// 使用正則表達(dá)式檢查字符串是否包含至少一個(gè)特殊字符

使用示例:

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. 檢查數(shù)字奇偶性

當(dāng)我們需要對數(shù)據(jù)中的奇數(shù)組和偶數(shù)組進(jìn)行區(qū)分處理的時(shí)候就可以使用這個(gè)函數(shù)了。

// 定義一個(gè)函數(shù) isEven，該函數(shù)接受一個(gè)數(shù)字 number
export const isEven = (number: number) => (number % 2 === 0);
// 返回該數(shù)字是否為偶數(shù)

6. 檢查非空對象

當(dāng)我們需要檢查對象是否非空時(shí)，我們就可以使用下面這個(gè)函數(shù)了。這在幫助我們避免對空數(shù)據(jù)進(jìn)行操作是非常有用的一個(gè)輔助函數(shù)。

// 該函數(shù)接受一個(gè)對象 obj
export const isNonEmptyObject = (obj: Record<string, unknown>) => {// 檢查對象是否為非空對象，且鍵的數(shù)量大于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. 生成隨機(jī)數(shù)字

當(dāng)我們需要隨機(jī)生成一個(gè)包含隨機(jī)大小寫字母和數(shù)字的字符串時(shí)，就可以使用下面的這個(gè)函數(shù)了。

// 該函數(shù)接受一個(gè)可選的長度參數(shù) length，默認(rèn)為10
export const generateRandomId = (length = 10) => {// 定義一個(gè)包含所有可能字符的字符串const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';// 初始化一個(gè)空字符串 idlet id = '';// 循環(huán) length 次，從 chars 中隨機(jī)選擇一個(gè)字符并添加到 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. 深拷貝

當(dāng)我們需要?jiǎng)?chuàng)建對象的深拷貝時(shí)，下面這個(gè)函數(shù)就很有用了。它可以幫助我們避免意外的去修改原始對象數(shù)據(jù)。減少bug的出現(xiàn)

// 定義一個(gè)泛型函數(shù) deepCloneObject，用于深度克隆對象
export const deepCloneObject = <T extends Record<string, any>>(obj: T): T => {// 如果 obj 為空或不是對象，則直接返回 objif (!obj || typeof obj !== 'object') return obj;// 創(chuàng)建一個(gè)新對象，用于存儲(chǔ)克隆的值const copy: Record<string, any> = {};// 遍歷 obj 中的每一個(gè)鍵for (const key in obj) {// 如果 obj[key] 是對象，則遞歸調(diào)用 deepCloneObject 進(jìn)行深度克隆// 否則，直接復(fù)制 obj[key] 的值copy[key] = typeof obj[key] === 'object' ? deepCloneObject(obj[key]) : obj[key];}// 將 copy 轉(zhuǎn)換為 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)}`);