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)(021)51697170,+(86)(021)51697170，(021)51697170
 * 支持格式示例-手機：+86-10-13112312345, +86-13112312345，10-13112312345，13112312345.
 */
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('文件格式不支持！');
}