前端的一些常用“工具方法”整理

孤我不夜城

已于 2022-06-28 10:50:40 修改

阅读量172

点赞数 1

分类专栏： js vue 浏览器文章标签： javascript 前端 jquery

于 2022-06-14 16:27:41 首次发布

本文链接：https://blog.csdn.net/weixin_44039165/article/details/125278620

版权

vue 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

浏览器

1 篇文章 0 订阅

订阅专栏

前端的一些常用工具方法

整理的是一些平常项目中常用的方法，后续持续更新中。。。建议收藏使用（狗头）

一、日期/时间处理

1. 检查日期是否有效

const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());

isDateValid("December 17, 1995 03:24:00");  // true

2. 计算两个日期之间的间隔

const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)
    
dayDif(new Date("2021-11-3"), new Date("2022-2-1"))  // 90

3. 查找日期位于一年中的第几天

const dayOfYear = (date) => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);

dayOfYear(new Date());   // 307

4. 是否为闰年

	/**
	* 是否为闫年
	* @return {Boolse} true|false
	*/
    isLeapYear: function(y) {
      return (y % 4 == 0 && y % 100 != 0) || y % 400 == 0;
    },

5. 返回星期数

	/**
     * 返回星期数
     * @return {Number}
     */
     getWhatDayOne: function(year, month, day) {
      let date = new Date(year + '/' + month + '/' + day);
      let index = date.getDay();
      let dayNames = ['日', '一', '二', '三', '四', '五', '六'];
      return dayNames[index];
    },
    
    /**
     * 返回星期数
     * @return {Number}
     */
    getWhatDay: function(year, month, day) {
      let date = new Date(year + '/' + month + '/' + day);
      let index = date.getDay();
      let dayNames = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      return dayNames[index];
    },
  
    /**
     * 返回星期数
     * @return {Number}
     */
    getMonthPreDay: function(year, month) {
      let date = new Date(year + '/' + month + '/01');
      let day = date.getDay();
      if (day == 0) {
        day = 7;
      }
      return day;
    },

6. 返回月份天数

 	/**
     * 返回月份天数
     * @return {Number}
     */
    getMonthDays: function(year, month) {
      if (/^0/.test(month)) {
        month = month.split('')[1];
      }
      return [0, 31, this.isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
    },

7. 补齐数字位数

 	/**
     * 补齐数字位数
     * @return {string}
     */
    getNumTwoBit: function(n) {
      n = Number(n);
      return (n > 9 ? '' : '0') + n;
    },

8. 日期对象转成字符串

 	/**
     * 日期对象转成字符串
     * @return {string}
     */
    date2Str: function(date, split) {
      if (typeof date == 'string') return date;
      split = split || '-';
      let y = date.getFullYear();
      let m = this.getNumTwoBit(date.getMonth() + 1);
      let d = this.getNumTwoBit(date.getDate());
      return [y, m, d].join(split);
    },

9. 返回日期格式字符串

	/**
     * 返回日期格式字符串
     * @param {Number} 0返回今天的日期、1返回明天的日期，2返回后天得日期，依次类推
     * @return {string} '2014-12-31'
     */
    getDay: function(i) {
      i = i || 0;
      let date = new Date();
      let diff = i * (1000 * 60 * 60 * 24);
      date = new Date(date.getTime() + diff);
      return this.date2Str(date);
    },

10. 时间戳转换为日期格式

	/**
     * 时间戳转换为日期格式
     * @return {String}
     */
    timestampToDate: function(timestamp) {
      let date = new Date(timestamp);
      return date.getFullYear() + '-' + getNumTwoBit(date.getMonth() + 1) + '-' + getNumTwoBit(date.getDate());
    },

11. 时间比较

   /**
    * 时间比较
    * @return {Boolean}
    */
   compareDate: function(date1, date2) {
     let startTime = new Date(date1.replace('-', '/').replace('-', '/'));
     let endTime = new Date(date2.replace('-', '/').replace('-', '/'));
     if (startTime >= endTime) {
       return false;
     }
     return true;
   },
   
   /**
    * 时间比较
    * @return {Boolean}
    */
   compareDateArr: function(date1, date2) {
     let startTime = new Date();
     startTime.setFullYear(parseInt(date1[0]), parseInt(date1[1]) - 1, parseInt(date1[2]));
     startTime.setHours(parseInt(date1[3]), parseInt(date1[4]));
     let endTime = new Date();
     endTime.setFullYear(parseInt(date2[0]), parseInt(date2[1]) - 1, parseInt(date2[2]));
     endTime.setHours(parseInt(date2[3]), parseInt(date2[4]));
     if (startTime >= endTime) {
       return false;
     }
     return true;
   },
   
   /**
    * 时间是否相等
    * @return {Boolean}
    */
   isEqual: function(date1, date2) {
     let startTime = new Date(date1).getTime();
     let endTime = new Date(date2).getTime();
     if (startTime == endTime) {
       return true;
     }
     return false;
   },

12. 其他相关

	
	getDateArr(str) {
      return [this.getYear(str), this.getMonth(str), this.getDate(str), this.getHour(str), this.getMinute(str)];
    },
  
    isDateString(str) {
      return /\d{4}(\-|\/|.)\d{1,2}\1\d{1,2}/.test(str) || /^([01][0-9]|2[0-3])(:[0-5][0-9]){1,2}$/.test(str);
    },
  
    getYear(value) {
      return this.isDateString(value) ? value.split(' ')[0].split(/-|\/|\./)[0] : value.getFullYear();
    },
  
    getMonth(value) {
      return this.isDateString(value) ? value.split(' ')[0].split(/-|\/|\./)[1] : value.getMonth() + 1;
    },
  
    getDate(value) {
      return this.isDateString(value) ? value.split(' ')[0].split(/-|\/|\./)[2] : value.getDate();
    },
  
    getHour(value) {
      if (this.isDateString(value)) {
        const str = value.split(' ')[1] || '00:00:00';
        return str.split(':')[0];
      }
      return value.getHours();
    },
  
    getMinute(value) {
      if (this.isDateString(value)) {
        const str = value.split(' ')[1] || '00:00:00';
        return str.split(':')[1];
      }
      return value.getMinutes();
    }

二、字符串操作

1. 字符串首字母大写

const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)

capitalize("hello world")  // Hello world

2. 随机字符串

const randomString = () => Math.random().toString(36).slice(2);

randomString();

3. 截断字符串

const truncateString = (string, length) => string.length < length ? string : `${string.slice(0, length - 3)}...`;

truncateString('Hi, I should be truncated because I am too loooong!', 36)

4. 去除字符串中的HTML

const stripHtml = html => (new DOMParser().parseFromString(html, 'text/html')).body.textContent || '';

5. 将数字转换为大写金额

export const changeToChinese = (Num) => {
    //判断如果传递进来的不是字符的话转换为字符
    if (typeof Num == "number") {
        Num = new String(Num);
    };
    Num = Num.replace(/,/g, "") //替换tomoney()中的“,”
    Num = Num.replace(/ /g, "") //替换tomoney()中的空格
    Num = Num.replace(/￥/g, "") //替换掉可能出现的￥字符
    if (isNaN(Num)) { //验证输入的字符是否为数字
        //alert("请检查小写金额是否正确");
        return "";
    };
    //字符处理完毕后开始转换，采用前后两部分分别转换
    var part = String(Num).split(".");
    var newchar = "";
    //小数点前进行转化
    for (var i = part[0].length - 1; i >= 0; i--) {
        if (part[0].length > 10) {
            return "";
            //若数量超过拾亿单位，提示
        }
        var tmpnewchar = ""
        var perchar = part[0].charAt(i);
        switch (perchar) {
            case "0":
                tmpnewchar = "零" + tmpnewchar;
                break;
            case "1":
                tmpnewchar = "壹" + tmpnewchar;
                break;
            case "2":
                tmpnewchar = "贰" + tmpnewchar;
                break;
            case "3":
                tmpnewchar = "叁" + tmpnewchar;
                break;
            case "4":
                tmpnewchar = "肆" + tmpnewchar;
                break;
            case "5":
                tmpnewchar = "伍" + tmpnewchar;
                break;
            case "6":
                tmpnewchar = "陆" + tmpnewchar;
                break;
            case "7":
                tmpnewchar = "柒" + tmpnewchar;
                break;
            case "8":
                tmpnewchar = "捌" + tmpnewchar;
                break;
            case "9":
                tmpnewchar = "玖" + tmpnewchar;
                break;
        }
        switch (part[0].length - i - 1) {
            case 0:
                tmpnewchar = tmpnewchar + "元";
                break;
            case 1:
                if (perchar != 0) tmpnewchar = tmpnewchar + "拾";
                break;
            case 2:
                if (perchar != 0) tmpnewchar = tmpnewchar + "佰";
                break;
            case 3:
                if (perchar != 0) tmpnewchar = tmpnewchar + "仟";
                break;
            case 4:
                tmpnewchar = tmpnewchar + "万";
                break;
            case 5:
                if (perchar != 0) tmpnewchar = tmpnewchar + "拾";
                break;
            case 6:
                if (perchar != 0) tmpnewchar = tmpnewchar + "佰";
                break;
            case 7:
                if (perchar != 0) tmpnewchar = tmpnewchar + "仟";
                break;
            case 8:
                tmpnewchar = tmpnewchar + "亿";
                break;
            case 9:
                tmpnewchar = tmpnewchar + "拾";
                break;
        }
        var newchar = tmpnewchar + newchar;
    }
    //小数点之后进行转化
    if (Num.indexOf(".") != -1) {
        if (part[1].length > 2) {
            // alert("小数点之后只能保留两位,系统将自动截断");
            part[1] = part[1].substr(0, 2)
        }
        for (i = 0; i < part[1].length; i++) {
            tmpnewchar = ""
            perchar = part[1].charAt(i)
            switch (perchar) {
                case "0":
                    tmpnewchar = "零" + tmpnewchar;
                    break;
                case "1":
                    tmpnewchar = "壹" + tmpnewchar;
                    break;
                case "2":
                    tmpnewchar = "贰" + tmpnewchar;
                    break;
                case "3":
                    tmpnewchar = "叁" + tmpnewchar;
                    break;
                case "4":
                    tmpnewchar = "肆" + tmpnewchar;
                    break;
                case "5":
                    tmpnewchar = "伍" + tmpnewchar;
                    break;
                case "6":
                    tmpnewchar = "陆" + tmpnewchar;
                    break;
                case "7":
                    tmpnewchar = "柒" + tmpnewchar;
                    break;
                case "8":
                    tmpnewchar = "捌" + tmpnewchar;
                    break;
                case "9":
                    tmpnewchar = "玖" + tmpnewchar;
                    break;
            }
            if (i == 0) tmpnewchar = tmpnewchar + "角";
            if (i == 1) tmpnewchar = tmpnewchar + "分";
            newchar = newchar + tmpnewchar;
        }
    }
    //替换所有无用汉字
    while (newchar.search("零零") != -1)
        newchar = newchar.replace("零零", "零");
    newchar = newchar.replace("零亿", "亿");
    newchar = newchar.replace("亿万", "亿");
    newchar = newchar.replace("零万", "万");
    newchar = newchar.replace("零元", "元");
    newchar = newchar.replace("零角", "");
    newchar = newchar.replace("零分", "");
    if (newchar.charAt(newchar.length - 1) == "元") {
        newchar = newchar + "整"
    }
    return newchar;
}

6. 严格的身份证校验

export const isCardID = (sId) => {
    if (!/(^\d{15}$)|(^\d{17}(\d|X|x)$)/.test(sId)) {
        console.log('你输入的身份证长度或格式错误')
        return false
    }
    //身份证城市
    var aCity = { 11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古", 21: "辽宁", 22: "吉林", 23: "黑龙江", 31: "上海", 32: "江苏", 33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山东", 41: "河南", 42: "湖北", 43: "湖南", 44: "广东", 45: "广西", 46: "海南", 50: "重庆", 51: "四川", 52: "贵州", 53: "云南", 54: "西藏", 61: "陕西", 62: "甘肃", 63: "青海", 64: "宁夏", 65: "新疆", 71: "台湾", 81: "香港", 82: "澳门", 91: "国外" };
    if (!aCity[parseInt(sId.substr(0, 2))]) {
        console.log('你的身份证地区非法')
        return false
    }

    // 出生日期验证
    var sBirthday = (sId.substr(6, 4) + "-" + Number(sId.substr(10, 2)) + "-" + Number(sId.substr(12, 2))).replace(/-/g, "/"),
        d = new Date(sBirthday)
    if (sBirthday != (d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate())) {
        console.log('身份证上的出生日期非法')
        return false
    }

    // 身份证号码校验
    var sum = 0,
        weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2],
        codes = "10X98765432"
    for (var i = 0; i < sId.length - 1; i++) {
        sum += sId[i] * weights[i];
    }
    var last = codes[sum % 11]; //计算出来的最后一位身份证号码
    if (sId[sId.length - 1] != last) {
        console.log('你输入的身份证号非法')
        return false
    }

    return true
}

7. 判断类型集合

export const checkStr = (str, type) => {
    switch (type) {
        case 'phone':   //手机号码
            return /^1[3|4|5|6|7|8|9][0-9]{9}$/.test(str);
        case 'tel':     //座机
            return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str);
        case 'card':    //身份证
            return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(str);
        case 'pwd':     //密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线
            return /^[a-zA-Z]\w{5,17}$/.test(str)
        case 'postal':  //邮政编码
            return /[1-9]\d{5}(?!\d)/.test(str);
        case 'QQ':      //QQ号
            return /^[1-9][0-9]{4,9}$/.test(str);
        case 'email':   //邮箱
            return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str);
        case 'money':   //金额(小数点2位)
            return /^\d*(?:\.\d{0,2})?$/.test(str);
        case 'URL':     //网址
            return /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/.test(str)
        case 'IP':      //IP
            return /((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))/.test(str);
        case 'date':    //日期时间
            return /^(\d{4})\-(\d{2})\-(\d{2}) (\d{2})(?:\:\d{2}|:(\d{2}):(\d{2}))$/.test(str) || /^(\d{4})\-(\d{2})\-(\d{2})$/.test(str)
        case 'number':  //数字
            return /^[0-9]$/.test(str);
        case 'english': //英文
            return /^[a-zA-Z]+$/.test(str);
        case 'chinese': //中文
            return /^[\\u4E00-\\u9FA5]+$/.test(str);
        case 'lower':   //小写
            return /^[a-z]+$/.test(str);
        case 'upper':   //大写
            return /^[A-Z]+$/.test(str);
        case 'HTML':    //HTML标记
            return /<("[^"]*"|'[^']*'|[^'">])*>/.test(str);
        default:
            return true;
    }
}

三、数组处理

1. 从数组中去除重复项

//双重for循环
let arr = [1,2,3,4,3,2,3,5];
let unique = (arr)=>{
    //第一层for循环 数组的前一项
    for(var i=0; i<arr.length; i++){
        //第二层for循环 数组后一项
        for(var j=i+1; j<arr.length; j++){
            if(arr[i] === arr[j]){                
                arr.splice(j,1);//删除反复元素
                j--;//修改下标
            }
        }
    }
    return arr;
}
unique(arr);
console.log(arr);

//利用indexOf实现数组去重，不批改原数组
let arr = [1,3,4,5,3,4,5,32,4];
let unique = (arr)=>{
    let newArr = [];//新数组，用来接管不反复的元素
    for(var i=0; i<arr.length; i++){
        if(newArr.indexOf(arr[i])===-1){
            newArr.push(arr[i]);
        }
    }
    rerurn newArr;
}
console.log(unique(arr));

//利用includes实现数组去重，不批改原数组
let arr = [1,3,5,3,5]
let unique = (arr)=>{
    let newArr = [];//新数组，用来接管不反复的数组
    for(var i=0; i<arr.length; i++){
        if(! newArr.includes(arr[i])){
            newArr.push(arr[i]);
        }
    }
return newArr;
}
console.log(unique(arr));

//利用set方法去重
let arr = [3,43,3,2,5,4]
let set = new Set();
let [...a] = set;
console.log(a);

2. 判断数组是否为空

const isNotEmpty = arr => Array.isArray(arr) && arr.length > 0;

isNotEmpty([1, 2, 3]);  // true

3. 合并两个数组

//利用数组的concat Api
const merge = (a, b) => a.concat(b);

//利用ES6的扩展运算符
const merge = (a, b) => [...a, ...b];

四、颜色操作

1. 将RGB转化为十六进制

const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);

rgbToHex(255, 255, 255);  // '#ffffff'

2. 获取随机的十六进制颜色

const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;

randomHex();

五、浏览器操作

1. 复制内容到剪切板

const copyToClipboard = (text) => navigator.clipboard.writeText(text);

copyToClipboard("Hello World");

2. 清楚所有cookie

const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`));

3. 获取选中的文本

const getSelectedText = () => window.getSelection().toString();

getSelectedText();

4. 检测是否为黑暗模式

const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches

console.log(isDarkMode)

5. 滚动到页面顶部

const goToTop = () => window.scrollTo(0, 0);

goToTop();

6. 判断当前标签页是否激活

const isTabInView = () => !document.hidden;

7. 判断当前是否事苹果设备

const isAppleDevice = () => /Mac|iPod|iPhone|iPad/.test(navigator.platform);

isAppleDevice();

8. 是否滚动到页面底部

const scrolledToBottom = () => document.documentElement.clientHeight + window.scrollY >= document.documentElement.scrollHeight;

9. 重定向到一个URL

const redirect = url => location.href = url

redirect("https://www.google.com/")

10.打开浏览器的打印

const showPrintDialog = () => window.print()

六、其他

1. 函数节流器

export const debouncer = (fn, time, interval = 200) => {
    if (time - (window.debounceTimestamp || 0) > interval) {
        fn && fn();
        window.debounceTimestamp = time;
    }
}

2. 检测密码强度

export const checkPwd = (str) => {
    var Lv = 0;
    if (str.length < 6) {
        return Lv
    }
    if (/[0-9]/.test(str)) {
        Lv++
    }
    if (/[a-z]/.test(str)) {
        Lv++
    }
    if (/[A-Z]/.test(str)) {
        Lv++
    }
    if (/[\.|-|_]/.test(str)) {
        Lv++
    }
    return Lv;
}

3. 去除空格

export const trim = (str, type) => {
    type = type || 1
    switch (type) {
        case 1:
            return str.replace(/\s+/g, "");
        case 2:
            return str.replace(/(^\s*)|(\s*$)/g, "");
        case 3:
            return str.replace(/(^\s*)/g, "");
        case 4:
            return str.replace(/(\s*$)/g, "");
        default:
            return str;
    }
}

4. 求两个集合的并集

export const union = (a, b) => {
    var newArr = a.concat(b);
    return this.unique(newArr);
}

5. 求两个集合的交集

export const intersect = (a, b) => {
    var _this = this;
    a = this.unique(a);
    return this.map(a, function (o) {
        return _this.contains(b, o) ? o : null;
    });
}

6. 根据url地址下载

export const download = (url) => {
    var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
    var isSafari = navigator.userAgent.toLowerCase().indexOf('safari') > -1;
    if (isChrome || isSafari) {
        var link = document.createElement('a');
        link.href = url;
        if (link.download !== undefined) {
            var fileName = url.substring(url.lastIndexOf('/') + 1, url.length);
            link.download = fileName;
        }
        if (document.createEvent) {
            var e = document.createEvent('MouseEvents');
            e.initEvent('click', true, true);
            link.dispatchEvent(e);
            return true;
        }
    }
    if (url.indexOf('?') === -1) {
        url += '?download';
    }
    window.open(url, '_self');
    return true;
}