今日分享一篇积累和收集了很久的JS utils工具函数，文章代码量较多，建议收藏起来慢慢看，当哪一天需要用到的时候，打开你尘封已久的收藏夹，相信能让你的业务代码开发事半功倍。
汇集了时间相关，DOM相关，URL相关，判断相关，图片相关，缓存相关等。部分逻辑处理较为简单，如果是业务量较为复杂的情况建议要斟酌使用，但对于大部分的项目应该是绰绰有余。接下来就进入代码部分吧～
时间相关
时间戳转自定义格式时间
export const dateRegExp = (time, strText) => { const date = new Date(time) if (/(y+)/.test(strText)) { strText = strText.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) } const dataType = { 'M+': date.getMonth() + 1, 'd+': date.getDate(), 'h+': date.getHours(), 'm+': date.getMinutes(), 's+': date.getSeconds() } for (const typeKey in dataType) { if (new RegExp(`(${typeKey})`).test(strText)) { const typeValue = dataType[typeKey] + '' strText = strText.replace(RegExp.$1, (RegExp.$1.length === 1 ? typeValue : padLeftZero(typeValue))) } } return strText}格式化距离现在已过去的时间
export function formatPassTime(startTime) { var currentTime = Date.parse(new Date()), time = currentTime - startTime, day = parseInt(time / (1000 * 60 * 60 * 24)), hour = parseInt(time / (1000 * 60 * 60)), min = parseInt(time / (1000 * 60)), month = parseInt(day / 30), year = parseInt(month / 12); if (year) return year + "年前" if (month) return month + "个月前" if (day) return day + "天前" if (hour) return hour + "小时前" if (min) return min + "分钟前" else return '刚刚'}判断两个不同格式的日期是否为同一天
export function isSameDay(d1, d2) { if (!d2) { d2 = new Date(); } var d1_year = d1.getFullYear(), d1_month = d1.getMonth() + 1, d1_date = d1.getDate(); var d2_year = d2.getFullYear(), d2_month = d2.getMonth() + 1, d2_date = d2.getDate() return d1_date === d2_date && d1_month === d2_month && d1_year === d2_year;}判断时间是不是今天
export function isTodayDate(time) { if (new Date(time).toDateString() === new Date().toDateString()) { return true; } return false;}URL 相关
URL 参数转对象
export function parseQueryString(url) { url = url ? url:window.location.search ; let search = url[0] === '?' ? url : url.substring(url.lastIndexOf('?')); let q = {}; search.replace(/([^?&=]+)=([^&]+)/g, (_, k, v) => q[k] = decodeURIComponent(v)); return q;}获取URL参数
export function getQueryString(name) { const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i') const r = window.location.search.substr(1).match(reg) if (r !== null) { return decodeURI(r[2]) } return null}获取URL hash后面的参数
export getHashQueryString = (key) => { const after = window.location.href.split('?')[1] if (after) { const reg = new RegExp(`(^|&)${ key }=([^&]*)(&|$)`) const r = after.match(reg) if (r != null) { return decodeURIComponent(r[2]) } return null } return null}对象序列化
export function serialize(query, encode = false) { return Object.keys(query) .map((key) => `${key}=${encode ? encodeURIComponent(query[key]) : query[key]}`) .join('&')}判断相关
判断是否支持 Intersection
export function isSupportIntersection() { return ( 'IntersectionObserver' in window && 'IntersectionObserverEntry' in window && 'intersectionRatio' in window.IntersectionObserverEntry.prototype )}判断是否IOS
export const isIOS = (() => { return /ios|iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase())})()判断是否安卓
export function formatPassTime(startTime) { var currentTime = Date.parse(new Date()), time = currentTime - startTime, day = parseInt(time / (1000 * 60 * 60 * 24)), hour = parseInt(time / (1000 * 60 * 60)), min = parseInt(time / (1000 * 60)), month = parseInt(day / 30), year = parseInt(month / 12); if (year) return year + "年前" if (month) return month + "个月前" if (day) return day + "天前" if (hour) return hour + "小时前" if (min) return min + "分钟前" else return '刚刚'}0判断微信内置浏览器
export function formatPassTime(startTime) { var currentTime = Date.parse(new Date()), time = currentTime - startTime, day = parseInt(time / (1000 * 60 * 60 * 24)), hour = parseInt(time / (1000 * 60 * 60)), min = parseInt(time / (1000 * 60)), month = parseInt(day / 30), year = parseInt(month / 12); if (year) return year + "年前" if (month) return month + "个月前" if (day) return day + "天前" if (hour) return hour + "小时前" if (min) return min + "分钟前" else return '刚刚'}1判断是否支持webp格式 2种方式
export function formatPassTime(startTime) { var currentTime = Date.parse(new Date()), time = currentTime - startTime, day = parseInt(time / (1000 * 60 * 60 * 24)), hour = parseInt(time / (1000 * 60 * 60)), min = parseInt(time / (1000 * 60)), month = parseInt(day / 30), year = parseInt(month / 12); if (year) return year + "年前" if (month) return month + "个月前" if (day) return day + "天前" if (hour) return hour + "小时前" if (min) return min + "分钟前" else return '刚刚'}2判断浏览器是否是移动端
export function formatPassTime(startTime) { var currentTime = Date.parse(new Date()), time = currentTime - startTime, day = parseInt(time / (1000 * 60 * 60 * 24)), hour = parseInt(time / (1000 * 60 * 60)), min = parseInt(time / (1000 * 60)), month = parseInt(day / 30), year = parseInt(month / 12); if (year) return year + "年前" if (month) return month + "个月前" if (day) return day + "天前" if (hour) return hour + "小时前" if (min) return min + "分钟前" else return '刚刚'}3文件类型判断
export function formatPassTime(startTime) { var currentTime = Date.parse(new Date()), time = currentTime - startTime, day = parseInt(time / (1000 * 60 * 60 * 24)), hour = parseInt(time / (1000 * 60 * 60)), min = parseInt(time / (1000 * 60)), month = parseInt(day / 30), year = parseInt(month / 12); if (year) return year + "年前" if (month) return month + "个月前" if (day) return day + "天前" if (hour) return hour + "小时前" if (min) return min + "分钟前" else return '刚刚'}4数据类型判断
export function formatPassTime(startTime) { var currentTime = Date.parse(new Date()), time = currentTime - startTime, day = parseInt(time / (1000 * 60 * 60 * 24)), hour = parseInt(time / (1000 * 60 * 60)), min = parseInt(time / (1000 * 60)), month = parseInt(day / 30), year = parseInt(month / 12); if (year) return year + "年前" if (month) return month + "个月前" if (day) return day + "天前" if (hour) return hour + "小时前" if (min) return min + "分钟前" else return '刚刚'}5DOM 相关
查询元素是否存在某个 class
export function formatPassTime(startTime) { var currentTime = Date.parse(new Date()), time = currentTime - startTime, day = parseInt(time / (1000 * 60 * 60 * 24)), hour = parseInt(time / (1000 * 60 * 60)), min = parseInt(time / (1000 * 60)), month = parseInt(day / 30), year = parseInt(month / 12); if (year) return year + "年前" if (month) return month + "个月前" if (day) return day + "天前" if (hour) return hour + "小时前" if (min) return min + "分钟前" else return '刚刚'}6给某个元素添加 class
export function formatPassTime(startTime) { var currentTime = Date.parse(new Date()), time = currentTime - startTime, day = parseInt(time / (1000 * 60 * 60 * 24)), hour = parseInt(time / (1000 * 60 * 60)), min = parseInt(time / (1000 * 60)), month = parseInt(day / 30), year = parseInt(month / 12); if (year) return year + "年前" if (month) return month + "个月前" if (day) return day + "天前" if (hour) return hour + "小时前" if (min) return min + "分钟前" else return '刚刚'}7删除某个元素的 class
export function formatPassTime(startTime) { var currentTime = Date.parse(new Date()), time = currentTime - startTime, day = parseInt(time / (1000 * 60 * 60 * 24)), hour = parseInt(time / (1000 * 60 * 60)), min = parseInt(time / (1000 * 60)), month = parseInt(day / 30), year = parseInt(month / 12); if (year) return year + "年前" if (month) return month + "个月前" if (day) return day + "天前" if (hour) return hour + "小时前" if (min) return min + "分钟前" else return '刚刚'}8获取页面滚动距离
export function formatPassTime(startTime) { var currentTime = Date.parse(new Date()), time = currentTime - startTime, day = parseInt(time / (1000 * 60 * 60 * 24)), hour = parseInt(time / (1000 * 60 * 60)), min = parseInt(time / (1000 * 60)), month = parseInt(day / 30), year = parseInt(month / 12); if (year) return year + "年前" if (month) return month + "个月前" if (day) return day + "天前" if (hour) return hour + "小时前" if (min) return min + "分钟前" else return '刚刚'}9滚动到某个位置回调
export function isSameDay(d1, d2) { if (!d2) { d2 = new Date(); } var d1_year = d1.getFullYear(), d1_month = d1.getMonth() + 1, d1_date = d1.getDate(); var d2_year = d2.getFullYear(), d2_month = d2.getMonth() + 1, d2_date = d2.getDate() return d1_date === d2_date && d1_month === d2_month && d1_year === d2_year;}0拨打电话
export function isSameDay(d1, d2) { if (!d2) { d2 = new Date(); } var d1_year = d1.getFullYear(), d1_month = d1.getMonth() + 1, d1_date = d1.getDate(); var d2_year = d2.getFullYear(), d2_month = d2.getMonth() + 1, d2_date = d2.getDate() return d1_date === d2_date && d1_month === d2_month && d1_year === d2_year;}1复制文本
export function isSameDay(d1, d2) { if (!d2) { d2 = new Date(); } var d1_year = d1.getFullYear(), d1_month = d1.getMonth() + 1, d1_date = d1.getDate(); var d2_year = d2.getFullYear(), d2_month = d2.getMonth() + 1, d2_date = d2.getDate() return d1_date === d2_date && d1_month === d2_month && d1_year === d2_year;}2动态加载第三方js
export function isSameDay(d1, d2) { if (!d2) { d2 = new Date(); } var d1_year = d1.getFullYear(), d1_month = d1.getMonth() + 1, d1_date = d1.getDate(); var d2_year = d2.getFullYear(), d2_month = d2.getMonth() + 1, d2_date = d2.getDate() return d1_date === d2_date && d1_month === d2_month && d1_year === d2_year;}3解决 requestAnimationFrame 的兼容问题
export function isSameDay(d1, d2) { if (!d2) { d2 = new Date(); } var d1_year = d1.getFullYear(), d1_month = d1.getMonth() + 1, d1_date = d1.getDate(); var d2_year = d2.getFullYear(), d2_month = d2.getMonth() + 1, d2_date = d2.getDate() return d1_date === d2_date && d1_month === d2_month && d1_year === d2_year;}4动态创建form表单导出数据(POST)
export function isSameDay(d1, d2) { if (!d2) { d2 = new Date(); } var d1_year = d1.getFullYear(), d1_month = d1.getMonth() + 1, d1_date = d1.getDate(); var d2_year = d2.getFullYear(), d2_month = d2.getMonth() + 1, d2_date = d2.getDate() return d1_date === d2_date && d1_month === d2_month && d1_year === d2_year;}5图片相关
base64转Buffer
export function isSameDay(d1, d2) { if (!d2) { d2 = new Date(); } var d1_year = d1.getFullYear(), d1_month = d1.getMonth() + 1, d1_date = d1.getDate(); var d2_year = d2.getFullYear(), d2_month = d2.getMonth() + 1, d2_date = d2.getDate() return d1_date === d2_date && d1_month === d2_month && d1_year === d2_year;}6base64转Blob
export function isSameDay(d1, d2) { if (!d2) { d2 = new Date(); } var d1_year = d1.getFullYear(), d1_month = d1.getMonth() + 1, d1_date = d1.getDate(); var d2_year = d2.getFullYear(), d2_month = d2.getMonth() + 1, d2_date = d2.getDate() return d1_date === d2_date && d1_month === d2_month && d1_year === d2_year;}7调整拍照图片方向
export function isSameDay(d1, d2) { if (!d2) { d2 = new Date(); } var d1_year = d1.getFullYear(), d1_month = d1.getMonth() + 1, d1_date = d1.getDate(); var d2_year = d2.getFullYear(), d2_month = d2.getMonth() + 1, d2_date = d2.getDate() return d1_date === d2_date && d1_month === d2_month && d1_year === d2_year;}8缓存相关
获取指定 Cookie 值
export function isSameDay(d1, d2) { if (!d2) { d2 = new Date(); } var d1_year = d1.getFullYear(), d1_month = d1.getMonth() + 1, d1_date = d1.getDate(); var d2_year = d2.getFullYear(), d2_month = d2.getMonth() + 1, d2_date = d2.getDate() return d1_date === d2_date && d1_month === d2_month && d1_year === d2_year;}9设置 Cookie 值
export function isTodayDate(time) { if (new Date(time).toDateString() === new Date().toDateString()) { return true; } return false;}0简易版 Storage 操作，sessionStorage 及 localStorage 类似
export function isTodayDate(time) { if (new Date(time).toDateString() === new Date().toDateString()) { return true; } return false;}1数字相关
数字四舍五入，保留n位小数
export function isTodayDate(time) { if (new Date(time).toDateString() === new Date().toDateString()) { return true; } return false;}2数字每千位加逗号
export function isTodayDate(time) { if (new Date(time).toDateString() === new Date().toDateString()) { return true; } return false;}3随机数
export function isTodayDate(time) { if (new Date(time).toDateString() === new Date().toDateString()) { return true; } return false;}4字符串相关
手机号码中间4位隐藏星号
export function isTodayDate(time) { if (new Date(time).toDateString() === new Date().toDateString()) { return true; } return false;}5检测密码强度 1：密码弱 2：密码中等 3：密码强 4：密码很强
export function isTodayDate(time) { if (new Date(time).toDateString() === new Date().toDateString()) { return true; } return false;}6随机产生某个颜色
export function isTodayDate(time) { if (new Date(time).toDateString() === new Date().toDateString()) { return true; } return false;}7字符串替换全部
export function isTodayDate(time) { if (new Date(time).toDateString() === new Date().toDateString()) { return true; } return false;}8版本号比较
传入两个版本号，格式如：4.3.2，返回结果，小于-1，等于0，大于1。
export function isTodayDate(time) { if (new Date(time).toDateString() === new Date().toDateString()) { return true; } return false;}9对象转url字符串供导出接口(GET)使用
export function parseQueryString(url) { url = url ? url:window.location.search ; let search = url[0] === '?' ? url : url.substring(url.lastIndexOf('?')); let q = {}; search.replace(/([^?&=]+)=([^&]+)/g, (_, k, v) => q[k] = decodeURIComponent(v)); return q;}0其他
函数防抖
export function parseQueryString(url) { url = url ? url:window.location.search ; let search = url[0] === '?' ? url : url.substring(url.lastIndexOf('?')); let q = {}; search.replace(/([^?&=]+)=([^&]+)/g, (_, k, v) => q[k] = decodeURIComponent(v)); return q;}1节流函数
export function parseQueryString(url) { url = url ? url:window.location.search ; let search = url[0] === '?' ? url : url.substring(url.lastIndexOf('?')); let q = {}; search.replace(/([^?&=]+)=([^&]+)/g, (_, k, v) => q[k] = decodeURIComponent(v)); return q;}2最后
除开本文所示的场景，也还有很多没有列举到的情况，如果你有认为很不错的工具函数，欢迎留言交流～
专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）
原文：https://juejin.cn/post/7101661985695072263