常用的功能函數(shù)

(1): 功能函數(shù)

1: 回到頂部

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

2: 判斷傳遞過(guò)來(lái)的值是否為空

//判斷傳過(guò)來(lái)的值是否為空 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) }// 或者使用空值合并(注意空值合并只會(huì)檢驗(yàn)null和undefined，不推薦)// !!(data?? "") 這樣寫的也有個(gè)弊端就是對(duì)于 輸入框中 輸入的 0 NaN 和 false都是返回為falseexport function isNull(data) {let flag = !!(data?? "")return flag }

3: 函數(shù)防抖

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

4: 函數(shù)節(jié)流

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

5: 驗(yàn)證手機(jī)號(hào)

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: 驗(yàn)證郵箱

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+: 倒計(jì)時(shí)實(shí)現(xiàn)

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

7: 驗(yàn)證密碼

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 - 證件號(hào)碼* @param {number | string} type = 1 - 證件類型 1：身份證 2：護(hù)照*/ 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: 驗(yàn)證對(duì)象是否為空

/*** 判斷是否為空對(duì)象* @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: 日期格式轉(zhuǎn)換

// 第一種寫法 function dateTimeFiter(num) {// 時(shí)間戳數(shù)據(jù)處理let date = new Date(num);// 時(shí)間戳為10位需*1000，時(shí)間戳為13位的話不需乘1000let y = date.getFullYear();let MM = date.getMonth() + 1;MM = MM < 10 ? "0" + MM : MM; // 月補(bǔ)0let d = date.getDate();d = d < 10 ? "0" + d : d; // 天補(bǔ)0let h = date.getHours();h = h < 10 ? "0" + h : h; // 小時(shí)補(bǔ)0let m = date.getMinutes();m = m < 10 ? "0" + m : m; // 分鐘補(bǔ)0let s = date.getSeconds();s = s < 10 ? "0" + s : s; // 秒補(bǔ)0return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s; } // 第二種寫法function dateTimeFiter(num) {// 時(shí)間戳數(shù)據(jù)處理let date = new Date(num);// 時(shí)間戳為10位需*1000，時(shí)間戳為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) {// 時(shí)間戳數(shù)據(jù)處理let date = new Date(num);// 時(shí)間戳為10位需*1000，時(shí)間戳為13位的話不需乘1000let y = date.getFullYear();let MM = date.getMonth() + 1;MM = MM < 10 ? "0" + MM : MM; // 月補(bǔ)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(), // 小時(shí)"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如果日期復(fù)雜可以使用 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: 生成隨機(jī)字符串

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

13: 獲取search參數(shù)并且組成一個(gè)對(duì)象

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轉(zhuǎn)換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)：支付寶小程序常用的功能函數(shù)

/* 各種環(huán)境check方法：1.支付寶瀏覽器 checkAlipay2.支付寶小程序 checkAlipayApp3.平臺(tái)app checkApp4.ios瀏覽器 checkIos5.安卓瀏覽器 checkAndroid6.微信瀏覽器 checkWeixin7.微信小程序 checkWeixinApp8.獲取APP版本號(hào) 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} }// 平臺(tái)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版本號(hào) 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";/*** 格式化時(shí)間* @param {*} dataStr* @param {*} pattern*/ const formatDateTime = function(dataStr, pattern = "YYYY-MM-DD HH:mm:ss") {return dataStr ? moment(dataStr).format(pattern) : ""; };/*** 時(shí)間格式化* @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,};

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。