javascript-鄙人常用的功能函数

常用的功能函数

(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都是返回为false

export 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;
  }
}

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位的话不需乘1000
  let y = date.getFullYear();
  let MM = date.getMonth() + 1;
  MM = MM < 10 ? "0" + MM : MM; // 月补0
  let d = date.getDate();
  d = d < 10 ? "0" + d : d; // 天补0
  let h = date.getHours();
  h = h < 10 ? "0" + h : h; // 小时补0
  let m = date.getMinutes();
  m = m < 10 ? "0" + m : m; // 分钟补0
  let s = date.getSeconds();
  s = s < 10 ? "0" + s : s; // 秒补0
  return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
}
// 第二种写法

function dateTimeFiter(num) {
  // 时间戳数据处理
  let date = new Date(num);
  // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
  let 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位的话不需乘1000
  let y = date.getFullYear();
  let MM = date.getMonth() + 1;
  MM = MM < 10 ? "0" + MM : MM; // 月补0
  let 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

 如果日期复杂可以使用 day.js 或者 moment.js

11: 获取文件的大小

bytesToSize(bytes) {
    if (bytes === 0) return '0 KB';
    var k = 1000, // or 1024
    sizes = ['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("?")+1
    var 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.支付宝浏览器 checkAlipay
        2.支付宝小程序 checkAlipayApp
        3.平台app checkApp
        4.ios浏览器 checkIos
        5.安卓浏览器 checkAndroid
        6.微信浏览器 checkWeixin
        7.微信小程序 checkWeixinApp
        8.获取APP版本号 getAppVersion
        9.获取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 moment
 
moment(new Date()).format('YYYY-MM-DD HH:mm:ss'); // 2022-01-01 16:37:44

moment("2021-10-23").format('YYYY-MM-DD HH:mm:ss'); // 2021-10-23 00:00:00

moment("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-鄙人常用的功能函数

常用的功能函数

(1): 功能函数

(2)：支付宝小程序常用的功能函数

(3):moment.js

下载moment.js

推荐阅读更多精彩内容