前端开发中实用的JavaScript函数

前言

开发中为了提高开发效率并编写更清晰、可复用、可维护的代码，我们经常使用各种自定义函数，记录一下在前端开发中实用的JavaScript函数。

1、将当前日期转换为星期几

/**
 * 将日期转为星期几
 * @param {number} timestamp 时间戳，如果不传取当前日期
 */
function getCurrentDayOfWeek(timestamp) {
    const daysOfWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    const currentDate = timestamp ? new Date(timestamp) : new Date();
    const dayOfWeekIndex = currentDate.getDay();

    return daysOfWeek[dayOfWeekIndex];
}

getCurrentDayOfWeek(); // 星期一

2、计算距离当前日期的天数

/**
 * 计算距离当前日期的天数
 * @param {number} timestamp 时间戳
 */
function getDaysFromTimestamp(timestamp) {
    const now = new Date().getTime();
    const timeDifference = now - timestamp;
    const daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
    return daysDifference;
}

getDaysFromTimestamp(1627474800000); // 360

3、日期格式化

/**
 * 日期格式化
 * @param {object} options 函数的参数项
 * @param {number} options.timestamp 时间戳, 默认当前日期
 * @param {string} options.format 时间戳，默认值 'yyyy-MM-dd hh:mm:ss'
 */
function formatDate(options = {}) {
    const { timestamp, format = 'yyyy-MM-dd hh:mm:ss'} = options;
    const date = timestamp ? new Date(timestamp) : new Date();
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    const hours = date.getHours().toString().padStart(2, '0');
    const minutes = date.getMinutes().toString().padStart(2, '0');
    const seconds = date.getSeconds().toString().padStart(2, '0');

    return format.replace('yyyy', year)
        .replace('MM', month)
	.replace('dd', day)
	.replace('hh', hours)
	.replace('mm', minutes)
	.replace('ss', seconds);
}

formatDate() // 2022-10-05 20:20:00
formatDate({timestamp: 1627474800000}) // 2021-07-28 20:20:00
formatDate({timestamp: 1627474800000, format: 'yyyy-MM'}) // 2021-07
formatDate({format: 'yyyy-MM'}) // 2022-10

4、生成唯一标识符（UUID）

生成唯一标识符对于跟踪对象或数据非常有用。generateUUID函数生成符合UUID格式的唯一标识符，可用于唯一标识数据或对象。

function generateUUID() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        const r = Math.random() * 16 | 0,
            v = c === 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
    });
}

generateUUID(); // fdec3388-7262-4db8-a655-2ef1efef79bb

5、判断是否为整数

在某些情况下，你可能需要检查一个值是否为整数。isInteger函数接受一个值作为参数，并返回布尔值，指示该值是否为整数。

function isInteger(value) {
    return Number.isInteger(value);
}

isInteger(13.5); // false
isInteger('13'); // false
isInteger(13); // true

6、将首字母大写

有时，你可能需要将字符串中的首字母大写，以满足特定的文本格式。capitalizeFirstLetter函数接受一个字符串作为参数，并返回一个新字符串，其中首字母大写。

function capitalizeFirstLetter(str) {
    return str.charAt(0).toUpperCase() + str.slice(1);
}

capitalizeFirstLetter('sibert is a Web Front-End Developer'); // Sibert is a Web Front-End Developer

7、随机生成指定范围内的整数

有时，你可能需要生成指定范围内的整数，而不仅仅是整数。getRandomInt函数可以接受min和max两个参数，然后生成一个在这两个值之间的随机整数。

function getRandomInt(min, max) {
    if (min > max) {
        [min, max] = [max, min];
    }
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

getRandomInt(100, 0); // 35

8、判断是否为闰年

在某些情况下，你可能需要判断某一年是否为闰年。isLeapYear函数接受一个年份作为参数，并返回布尔值，指示该年份是否为闰年。

function isLeapYear(year) {
    return (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
}

isLeapYear(2022);
// false