JavaScript日常开发实用工具方法汇总

1. 千分位格式化数字

formatNum(num) {  //千分位格式化数字
    return num && num.toString().replace(/(?=(?!^)(\d{3})+$)/g, ',')
}

2. 字符串替换所有空格

变量.replace(/\s+/g, '')
var str = '  A B  C   D EF ';
console.log(str.replace(/\s/g, '#'));  // ##A#B##C###D#EF#
console.log(str.replace(/\s+/g, '#')); // #A#B#C#D#EF#

3. 获取中英文字符串的字节数

let string = '我是王小文aaa';
function strlen(str) {
    var len = 0;
    for (var i = 0; i < str.length; i++) {
        var c = str.charCodeAt(i);
        // 英文单字节加1 ，汉字加2
        if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {   
            len++;
        } else {
            len += 2;
        }
    }
    return len;
}
console.log(strlen(string));

4. 计时器 --> 通过【setInterval】累计毫秒数

(function () {
    start();
})()

let ms = 0;
timeStr = '';

function start() {
    // 要记得清楚定时器，否则会有多个定时器叠加!
    // clearInterval(this.timeInterval);
    let timeInterval = setInterval(timer.bind(this), 1000);
}

// 计时器
function timer() {
    ms = ms + 1000;
    timeStr = this.formatTime(ms);
    let divHtml = document.getElementsByTagName('div')[0];
    divHtml.innerHTML = timeStr;
}

// 格式化时间
function formatTime(date) {
    const formatDate = new Date(date);
    const hour = formatDate.getHours() - 8;
    const minute = formatDate.getMinutes();
    const second = formatDate.getSeconds();
    const timeArray = [hour, minute, second].map(this.formatNumber);
    // 小时没有，暂不显示
    if (timeArray[0] === '00') {
        timeArray.splice(0, 1);
    }
    return timeArray.join(':');
}

function formatNumber(n) {
    n = n.toString();
    return n[1] ? n : '0' + n;
}

5. 格式化日期格式

// 传入毫秒数作为参数，转化为date对象来处理日期和时间（Date 对象基于1970年1月1日（世界标准时间）起的毫秒数。）
let date = new Date(36525); 

function formatTime(date) {
    var year = date.getFullYear()
    var month = date.getMonth() + 1
    var day = date.getDate()
    var hour = date.getHours()
    var minute = date.getMinutes()
    var second = date.getSeconds()
    return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
function formatNumber(n) {
    n = n.toString()
    return n[1] ? n : '0' + n
}

6. 根据身份证获取出生日期

getBirthdayFromIdCard(idCard) {
    let birthday = '';
    if (idCard != null && idCard !== '') {
        if (idCard.length === 15) {
            birthday = '19' + idCard.substr(6, 6);
        } else if (idCard.length === 18) {
            birthday = idCard.substr(6, 8);
        }
        const year = birthday.substr(0, 4);
        const month = birthday.substr(4, 2);
        const day = birthday.substr(6, 2);
        return year + '-' + month + '-' + day;
    }
}

7. 立即执行函数

参考：https://blog.csdn.net/csdn_yu...
函数表达式，不是函数声明，可以加 ( ) 后立即执行函数。

(function(a) {
  console.log(a); //1.使用()运算符，打印出1234
}(1234));

(function(a) {
  console.log(a); //2.使用()运算符，打印出123
})(123);

8. return 的使用

if 判断语句返回false，应当尽早返回return；函数返回一个变量，应当在函数的末尾return出来。

// 语句判断false
if(满足不合格条件1) {
    return;
}
// 函数返回变量，需要使用return；
function square(x) {
   return x * x;
}
var demo = square(3);  // 9

9. break的使用

break会跳出整个循环体，continue只会跳出当次迭代，继续下面的循环。

// for循环 使用 break 可以跳出全部循环！使用 continue 可以跳出当次循环！
for(var i=1;i<5;i++){
    if(i==3){
        break;   // 使用break，弹出2次提示分别为1,2；如果使用continue，则会弹出3次，分别是1,2,4
    }
}

10. axios中params和data参数的区别：

• params：参数是加到请求url的字符串中的，用于get请求。
• data：参数加到请求体body中的，用于post请求。

11. 类型转换

console.log('11'-2); //数字 9
console.log('aaa'-2); //数字 NaN
console.log('11'+2); //字符串 '112'
console.log('aaa'+2); //字符串 'aaa2'
// 布尔值为false的几种情况：
0 '' undefined null false //值为false
1 '0' //值为true

// 判断是否是非数字类型 ：isNaN()
if(x==""||isNaN(x)){ }

12. mouseout / mouseleave 以及 mouseover / mouseout [解决闪烁问题]

mouseenter ：只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件（不具有事件冒泡）
mouseover：不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
mouseleave ：只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
mouseout：不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。

13. match()

在字符串内检索指定的值，它返回指定的值，而不是字符串的位置

var str="Hello world!"
str.match("world")  //world
str.match("worlld")  //null
str.match("world!")  //world!

14. 格式化日期的通用函数

function parseTime(time, cFormat) {
    if (arguments.length === 0) {
        return null;
    }

    if ((time + "").length === 10) {
        time = +time * 1000;
    }

    const format = cFormat || "{y}-{m}-{d} {h}:{i}:{s}";
    let date;
    if (typeof time === "object") {
        date = time;
    } else {
        date = new Date(parseInt(time));
    }
    const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay()
    };
    const timeStr = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
        let value = formatObj[key];
        if (key === "a")
            return ["周一", "周二", "周三", "周四", "周五", "周六", "周日"][value - 1];
        if (result.length > 0 && value < 10) {
            value = "0" + value;
        }
        return value || 0;
    });
    return timeStr;
}
console.log(parseTime('1542094580370', '{y}-{m}-{d} {h}:{i}:{s} {a}'))

15. 支持手机号码，座机，固定号码的正则表达式

/**
 * 支持格式示例-固话：86-021-51697170,+86-021-51697170，021-51697170
 * 支持格式示例-固话：(86)[phone],+(86)[phone]，[phone]
 * 支持格式示例-手机：[phone].
 */
private static Pattern PHONE_PATTERN = Pattern.compile("^" +
        "(((\\+)?(\\d{1,4}-)?(\\d{2,4}-)?\\d{7,8})|" +
        "((\\+)?(\\(\\d{1,4}\\))?(\\(\\d{2,4}\\))?\\d{7,8})|" +
        "((\\+)?(\\d{1,4}-)?(\\d{2,3}-)?([1][3,4,5,6,7,8,9][0-9]\\d{8})))$");

16. 限制文件的格式

fileName.substring(fileName.lastIndexOf('.') + 1);
allowFileType = 'gif,jpg,jpeg,png,bmp,doc,docx,xls,xlsx,ppt,pptx,zip,rar,gz,bzip2,7z,xz,tar,pdf,json';
if (!allowFileType.includes(fileType)) {
   console.log('文件格式不支持！');
}