常用的功能函數

(1): 功能函數

1: 回到頂部

Vue.prototype.$scrollTo = (x = 0, y = 0, type = 'smooth') => {window.scrollTo({top: x,left: y,behavior: type // 滾動行為：smooth平滑滾動，instant瞬間滾動，默認值auto，等同于instant}) }

2: 判斷傳遞過來的值是否為空

//判斷傳過來的值是否為空 export function isNull(data) {if(data == '' || data == null || data == undefined ){return true}return false } // 或者使用includes export function isNull(data) {let arr = [undefined,"",false,null]return arr.includes(data) }// 或者使用空值合并(注意空值合并只會檢驗null和undefined，不推薦)// !!(data?? "") 這樣寫的也有個弊端就是對于 輸入框中 輸入的 0 NaN 和 false都是返回為falseexport function isNull(data) {let flag = !!(data?? "")return flag }

3: 函數防抖

export function debounce(fn,delay=500) {let timer = null;return function() {if(timer) clearTimeout(timer)timer = setTimeout(()=>{fn.apply(this,arguments)},delay)} }

4: 函數節流

export function throttle(fn,wait=500) {let previous = 0;return function() {let now = Date.now();if(now - previous > wait) {fn.apply(this,arguments)}} }

5: 驗證手機號

export function validatePhone(phone) {let pattern = /^1[3,4,5,7,8,9]\d{9}$/;if (pattern.test(phone)) {return true;} else {return false;} }

6: 驗證郵箱

export function validateEmail(email) {let pattern = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;if (pattern.test(email)) {return true;} else {return false;} }

6+: 倒計時實現

// 倒計時timeDown(endTime){//獲取時間差let now = new Date().getTime()/1000let totalSeconds = parseInt((endTime - now));//天數var days = Math.floor(totalSeconds / (60 * 60 * 24));//取模（余數）var modulo = totalSeconds % (60 * 60 * 24);//小時數var hours = Math.floor(modulo / (60 * 60));modulo = modulo % (60 * 60);//分鐘var minutes = Math.floor(modulo / 60);//秒var seconds = modulo % 60;//輸出還剩多少時間return `${days}天 ${hours}小時 ${minutes}分 ${seconds}秒`},

7: 驗證密碼

export function isPassword(pwd) {let pattern = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;return pattern.test(pwd); }

8: 證件照

/**** @param {string} number - 證件號碼* @param {number | string} type = 1 - 證件類型 1：身份證 2：護照*/ export function isIDNo(number, type = 1) {let pattern;const _type = +type;switch (_type) {case 1:pattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;break;case 2:pattern = /^[a-zA-Z0-9]{5,17}$/;break;default:return true;}return pattern.test(number); }

9: 驗證對象是否為空

/*** 判斷是否為空對象* @param {Object} obj* @returns {boolean}*/第一種寫法： export function isEmptyObj(obj) {let isEmpty = true;for (let key in obj) {if (key) {isEmpty = false;break;}}return isEmpty; } 第二種寫法： export function isEmptyObj1(obj) {let obj1 = JSON.stringify(obj)if(obj1 === "{}"){return true}return false }

10: 日期格式轉換

// 第一種寫法 function dateTimeFiter(num) {// 時間戳數據處理let date = new Date(num);// 時間戳為10位需*1000，時間戳為13位的話不需乘1000let y = date.getFullYear();let MM = date.getMonth() + 1;MM = MM < 10 ? "0" + MM : MM; // 月補0let d = date.getDate();d = d < 10 ? "0" + d : d; // 天補0let h = date.getHours();h = h < 10 ? "0" + h : h; // 小時補0let m = date.getMinutes();m = m < 10 ? "0" + m : m; // 分鐘補0let s = date.getSeconds();s = s < 10 ? "0" + s : s; // 秒補0return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s; } // 第二種寫法function dateTimeFiter(num) {// 時間戳數據處理let date = new Date(num);// 時間戳為10位需*1000，時間戳為13位的話不需乘1000let y = date.getFullYear();let MM = date.getMonth() + 1;MM = MM.toString().padStart(2,"0")let d = date.getDate();d = d.toString().padStart(2,"0")let h = date.getHours();h = h.toString().padStart(2,"0")let m = date.getMinutes();m = m.toString().padStart(2,"0")let s = date.getSeconds();s = s.toString().padStart(2,"0")return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s; } // 第三種寫法function dateTimeFiter(num) {// 時間戳數據處理let date = new Date(num);// 時間戳為10位需*1000，時間戳為13位的話不需乘1000let y = date.getFullYear();let MM = date.getMonth() + 1;MM = MM < 10 ? "0" + MM : MM; // 月補0let d = date.getDate();d = padNum(d)let h = date.getHours();h = padNum(h)let m = date.getMinutes();m = padNum(m)let s = date.getSeconds();s = padNum(h)return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s; }function padNum(num) {return num < 10 ? "0" + num : num}export default dateTimeFiter // 第四種寫法 function fromatDate(fmt, dateTime) {let date = dateTime ? dateTime : new Date()var o = {"Y+": date.getFullYear(), // 年份"M+": date.getMonth() + 1, // 月份"d+": date.getDate(), // 日"h+": date.getHours(), // 小時"m+": date.getMinutes(), // 分"s+": date.getSeconds(), // 秒"q+": Math.floor((date.getMonth() + 3) / 3), // 季度"S": date.getMilliseconds() // 毫秒};if (/(y+)/.test(fmt))fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));for (var k in o)if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) :(("00" + o[k]).substr(("" + o[k]).length)));return fmt; }export default fromatDate如果日期復雜可以使用 day.js 或者 moment.js

11: 獲取文件的大小

bytesToSize(bytes) {if (bytes === 0) return '0 KB';var k = 1000, // or 1024sizes = ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],i = Math.floor(Math.log(bytes) / Math.log(k));return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i]; }, 使用import tool from '@/common/tool.js';filters: {formatCurrentSize(value) {return tool.bytesToSize(value);}},<text slot="footer">{{ currentSize | formatCurrentSize }}</text>

12: 生成隨機字符串

const random = function(min, max) { // 生成隨機數范圍 if (arguments.length === 2) { return Math.floor(min + Math.random() * ((max + 1) - min)) }else { return null} } export default random

13: 獲取search參數并且組成一個對象

var paramsString = "https://blog.csdn.net/lxs19930928?spm=1010.2135.3001.5421&name=張三" function getSearchParams(url) {var arr = url.split("?")var searchParams = new URLSearchParams(arr[1]);var obj = {}for (let [key,val] of searchParams) {obj[key]=val}return obj } getSearchParams(paramsString) // {spm: '1010.2135.3001.5421', name: '張三'}// 或者使用qs轉換import qs from 'qs'function getSearchParams(url) {let index = url.lastIndexOf("?")+1var params = url.slice(index)let parseObj = qs.parse(params)console.log("parseObj",parseObj) // {spm: '1010.2135.3001.5421', name: '張三'}return parseObj}export default getSearchParams

14: 千分位分隔符

var num=12345678.32423432; function (num) {return num.toString().replace(/\d+/, (p) => {return p.replace(/\d(?=(\d{3})+$)+/g, (p1, p2) => {return p1 + ','})}) } console.log(regForm(num));//12,345,678.32423432 export default regForm

(2)：支付寶小程序常用的功能函數

/* 各種環境check方法：1.支付寶瀏覽器 checkAlipay2.支付寶小程序 checkAlipayApp3.平臺app checkApp4.ios瀏覽器 checkIos5.安卓瀏覽器 checkAndroid6.微信瀏覽器 checkWeixin7.微信小程序 checkWeixinApp8.獲取APP版本號 getAppVersion9.獲取APP ticket getAppTicket */// 支付寶瀏覽器 const checkAlipay = function () {if (navigator.userAgent.toLowerCase().indexOf('alipayclient') > -1) {return true} else {return false} }// 支付寶小程序 const checkAlipayApp = function () {if (navigator.userAgent.toLowerCase().indexOf('alipayclient') > -1 && (navigator.userAgent.toLowerCase().indexOf('miniprogram') > -1 ||navigator.userAgent.toLowerCase().indexOf('alipayide/webview') > -1)) {return true} else {return false} }// 平臺app const checkApp = function () {if (/(pigcmso2oreallifeapp)/.test(navigator.userAgent.toLowerCase())) {return true} else {return false} }// ios瀏覽器 const checkIos = function () {if (/(iphone|ipad|ipod)/.test(navigator.userAgent.toLowerCase())) {return true} else {return false} }// 安卓瀏覽器 const checkAndroid = function () {if (/(android)/.test(navigator.userAgent.toLowerCase())) {return true} else {return false} }// 微信瀏覽器 const checkWeixin = function () {if (/(micromessenger)/.test(navigator.userAgent.toLowerCase())) {return true} else {return false} }// 微信小程序 const checkWeixinApp = function () {if (window.__wxjs_environment === 'miniprogram' || (checkWeixin() && /(miniprogram)/.test(navigator.userAgent.toLowerCase()))) {return true} else {return false} }// 獲取APP版本號 const getAppVersion = function () {var reg = /versioncode=(.*?),/;var arr = reg.exec(navigator.userAgent.toLowerCase());if (arr == null) {return '85'} else {return arr[1]} }const getAppTicket = function () {var reg = /ticket=(.*?),/var arr = reg.exec(navigator.userAgent)if (arr == null) {return ''} else {return arr[1]} }export default {checkAlipay,checkAlipayApp,checkApp,checkIos,checkAndroid,checkWeixin,checkWeixinApp,getAppVersion,getAppTicket }

(3):moment.js

下載moment.js

yarn add -D momentmoment(new Date()).format('YYYY-MM-DD HH:mm:ss'); // 2022-01-01 16:37:44moment("2021-10-23").format('YYYY-MM-DD HH:mm:ss'); // 2021-10-23 00:00:00moment("2021-10-23").format('YYYY-MM-DD HH:mm:ss'); // 2021-10-20 00:00:00 import moment from "moment";/*** 格式化時間* @param {*} dataStr* @param {*} pattern*/ const formatDateTime = function(dataStr, pattern = "YYYY-MM-DD HH:mm:ss") {return dataStr ? moment(dataStr).format(pattern) : ""; };/*** 時間格式化* @param {*} dataStr* @param {*} pattern*/ const formatTime = function(dataStr) {return formatDateTime(dataStr, "HH:mm:ss"); };/*** 日期格式化* @param {*} dataStr* @param {*} pattern*/ const formatDate = function(dataStr) {return formatDateTime(dataStr, "YYYY-MM-DD"); };export default {formatDateTime,formatTime,formatDate,};

總結

以上是生活随笔為你收集整理的javascript-鄙人常用的功能函数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。