JS（JavaScript）常用函数方法（推荐）

1、深拷贝

export function deepClone(source) {
    if (!source && typeof source !== 'object' || source==null || source==undefined) {
      throw new Error('error arguments', 'shallowClone')
    }
    const targetObj = source.constructor === Array ? [] : {}
    Object.keys(source).forEach(keys => {
      if (source[keys] && typeof source[keys] === 'object') {
        targetObj[keys] = deepClone(source[keys])
      } else {
        targetObj[keys] = source[keys]
      }
    })
    return targetObj
}

2、时间转化格式

export function format(time, format) {
  var t = new Date(time);
  var tf = function (i) {
    return (i < 10 ? '0' : '') + i
  };
  return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) {
    switch (a) {
      case 'yyyy':
        return tf(t.getFullYear());
        break;
      case 'MM':
        return tf(t.getMonth() + 1);
        break;
      case 'mm':
        return tf(t.getMinutes());
        break;
      case 'dd':
        return tf(t.getDate());
        break;
      case 'HH':
        return tf(t.getHours());
        break;
      case 'ss':
        return tf(t.getSeconds());
        break;
    };
  });
};

3、正整数判断

export function isInte(num) { 
  let reg = /^[1-9][0-9]*$/;
  return reg.test(num);
}

4、过滤特殊字符

export function stripscript(str) {
    var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）&;—|{ }【】‘；：”“'。，、？]")
    var rs = "";
    for (var i = 0; i < str.length; i++) {
        rs = rs + str.substr(i, 1).replace(pattern, '');
    }
    return rs;
}

5、验证邮箱

export function validateEmail(value){
    let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/; 
    return !reg.test(value) ? true : false;
}

6、验证密码 6至20位的字母+数字

export function validatePass(value){
    let reg = /^(?!\D+$)(?![^a-zA-Z]+$)\S{6,20}$/;
    return !reg.test(value) ? true : false;
}

7、验证验证码

export function validateVCode(value){
    let reg = /^[a-z0-9]{6}$/;
    return !reg.test(value) ? true : false;
}

8、将参数转成form格式

export function formParams(data) {
  let form = new FormData();
  for (let i in data) {
    form.append(i, data[i]);
  }
  return form;
};

9、截取字符长度

cutStrLength(str, Ilength) {
        let tmp = 0;
        let len = 0;
        let okLen = 0
        for (let i = 0; i < Ilength; i++) {
            if (str.charCodeAt(i) > 255)
                tmp += 2
            else
                len += 1
            okLen += 1
            if (tmp + len == Ilength) {
                return (str.substring(0, okLen));
            }
            if (tmp + len > Ilength) {
                return (str.substring(0, okLen - 1) + "");
            }
        }
    },

10、对象数据拷贝

dataCopy: function (data) {
        if (typeof data == "object") {
            let _data = JSON.stringify(data);
            return JSON.parse(_data);
        };
        return data;
    },

11、检测浏览器是否支持svg

function isSupportSVG () {
    var SVG_NS = 'http://www.w3.org/2000/svg';
    return !!document.createElementNS && !!document.createElementNS(SVG_NS, 'svg').createSVGRect;
}
console.log(isSupportSVG());

12、检测浏览器是否支持canvas

function isSupportCanvas () {
    if ( document.createElement('canvas').getContext ) {
        return true;
    }
    else {
        return false;
    }
}
console.log(isSupportCanvas());

13、检测是否是微信浏览器

function isWeiXinClient () {
    var ua = navigator.userAgent.toLowerCase();
    if ( ua.match(/MicroMessenger/i) == "micromessenger" ) {
        return true;
    }
    else {
        return false;
    }
}
alert(isWeiXinClient());

14、检测是否移动端及浏览器内核

var browser = {
    versions : function () {
        var u = navigator.userAgent;
        return {
            trident : u.indexOf('Trident') > -1, //IE内核
            presto : u.indexOf('Presto') > -1, //opera内核
            webKit : u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
            gecko : u.indexOf('Firefox') > -1, //火狐内核Gecko
            mobile : !!u.match(/AppleWebKit.*Mobile.*/), //是否移动终端
            ios : !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios
            android : u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android
            iPhone : u.indexOf('iPhone') > -1, //iPhone
            iPad : u.indexOf('iPad') > -1, //iPad
            webApp : u.indexOf('Safari') > -1 //Safari
        };
    }
};
if ( browser.versions.mobile() || browser.versions.ios() || browser.versions.android() 
|| browser.versions.iPhone() || browser.versions.iPad() ) {
    alert('移动端');
}

15、检测是否电脑端 / 移动端

var browser = {
    versions : function () {
        var u = navigator.userAgent, app = navigator.appVersion;
        var sUserAgent = navigator.userAgent;
        return {
            trident : u.indexOf('Trident') > -1,
            presto : u.indexOf('Presto') > -1,
            isChrome : u.indexOf("chrome") > -1,
            isSafari : !u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u),
            isSafari3 : !u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u) && u.indexOf('webkit/5') != -1,
            webKit : u.indexOf('AppleWebKit') > -1,
            gecko : u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
            mobile : !!u.match(/AppleWebKit.*Mobile.*/),
            ios : !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
            android : u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
            iPhone : u.indexOf('iPhone') > -1,
            iPad : u.indexOf('iPad') > -1,
            iWinPhone : u.indexOf('Windows Phone') > -1
        };
    }()
};
 
if ( browser.versions.mobile || browser.versions.iWinPhone ) {
    window.location = "http:/www.baidu.com/m/";
}

16、检测浏览器内核

function getInternet () {
    if ( navigator.userAgent.indexOf("MSIE") > 0 ) {
        return "MSIE";       //IE浏览器
    }
    if ( isFirefox = navigator.userAgent.indexOf("Firefox") > 0 ) {
        return "Firefox";     //Firefox浏览器
    }
    if ( isSafari = navigator.userAgent.indexOf("Safari") > 0 ) {
        return "Safari";      //Safan浏览器
    }
    if ( isCamino = navigator.userAgent.indexOf("Camino") > 0 ) {
        return "Camino";   //Camino浏览器
    }
    if ( isMozilla = navigator.userAgent.indexOf("Gecko/") > 0 ) {
        return "Gecko";    //Gecko浏览器
    }
}

17、强制移动端页面横屏显示

$(window).on("orientationchange", function ( event ) {
    if ( event.orientation == 'portrait' ) {
        $('body').css('transform', 'rotate(90deg)');
    }
    else {
        $('body').css('transform', 'rotate(0deg)');
    }
});
$(window).orientationchange();

18、电脑端页面全屏显示

function fullscreen ( element ) {
    if ( element.requestFullscreen ) {
        element.requestFullscreen();
    }
    else if ( element.mozRequestFullScreen ) {
        element.mozRequestFullScreen();
    }
    else if ( element.webkitRequestFullscreen ) {
        element.webkitRequestFullscreen();
    }
    else if ( element.msRequestFullscreen ) {
        element.msRequestFullscreen();
    }
}
fullscreen(document.documentElement);

19、获得 / 失去焦点

//1、JavaScript实现
<input id = "i_input" type = "text" value = "会员卡号/手机号" />
// JavaScript
window.onload = function () {
    var oIpt = document.getElementById("i_input");
    if ( oIpt.value == "会员卡号/手机号" ) {
        oIpt.style.color = "#888";
    }
    else {
        oIpt.style.color = "#000";
    };
    oIpt.onfocus = function () {
        if ( this.value == "会员卡号/手机号" ) {
            this.value = "";
            this.style.color = "#000";
            this.type = "password";
        }
        else {
            this.style.color = "#000";
        }
    };
 
    oIpt.onblur = function () {
        if ( this.value == "" ) {
            this.value = "会员卡号/手机号";
            this.style.color = "#888";
            this.type = "text";
        }
    };
}
 
//2、jQuery实现
< input type = "text" class= "oldpsw" id = "showPwd" value = "请输入您的注册密码" / >
< input type = "password" name = "psw" class= "oldpsw" id = "password" value = "" style = "display:none;" / >
// jQuery
    $("#showPwd").focus(function () {
        var text_value = $(this).val();
        if ( text_value == '请输入您的注册密码' ) {
            $("#showPwd").hide();
            $("#password").show().focus();
        }
    });
$("#password").blur(function () {
    var text_value = $(this).val();
    if ( text_value == "" ) {
        $("#showPwd").show();
        $("#password").hide();
    }
});

20、获取上传文件大小

< input type = "file" id = "filePath" onchange = "getFileSize(this)" / >
// 兼容IE9低版本
    function getFileSize ( obj ) {
        var filesize;
        if ( obj.files ) {
            filesize = obj.files[ 0 ].size;
        }
        else {
            try {
                var path, fso;
                path = document.getElementById('filePath').value;
                fso = new ActiveXObject("Scripting.FileSystemObject");
                filesize = fso.GetFile(path).size;
            }
            catch ( e ) {
                // 在IE9及低版本浏览器，如果不容许ActiveX控件与页面交互，点击了否，就无法获取size
                console.log(e.message); // Automation 服务器不能创建对象
                filesize = 'error'; // 无法获取
            }
        }
        return filesize;
    }

21、限制上传文件类型

//1、高版本浏览器
< input type = "file" name = "filePath" accept = ".jpg,.jpeg,.doc,.docxs,.pdf" / >
//2、限制图片
< input type = "file" class = "file" value = "上传" accept = "image/*" >
//3、低版本浏览器
< input type = "file" id = "filePath" onchange = "limitTypes()" >
    /* 通过扩展名，检验文件格式。
     * @parma filePath{string} 文件路径
     * @parma acceptFormat{Array} 允许的文件类型
     * @result 返回值{Boolen}：true or false
     */
    function checkFormat ( filePath, acceptFormat ) {
        var resultBool = false,
            ex = filePath.substring(filePath.lastIndexOf('.') + 1);
        ex = ex.toLowerCase();
        for ( var i = 0; i < acceptFormat.length; i++ ) {
            if ( acceptFormat[ i ] == ex ) {
                resultBool = true;
                break;
            }
        }
        return resultBool;
    };
function limitTypes () {
    var obj = document.getElementById('filePath');
    var path = obj.value;
    var result = checkFormat(path, [ 'bmp', 'jpg', 'jpeg', 'png' ]);
    if ( !result ) {
        alert('上传类型错误，请重新上传');
        obj.value = '';
    }
}

22、正则表达式

//验证邮箱
/^\w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/
//验证手机号
/^1[3|5|8|7]\d{9}$/
//验证URL
/^http:\/\/.+\./
//验证身份证号码
/(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/
//匹配字母、数字、中文字符
/^([A-Za-z0-9]|[\u4e00-\u9fa5])*$/
//匹配中文字符
/[\u4e00-\u9fa5]/
//匹配双字节字符(包括汉字)
/[^\x00-\xff]/

23、限制字符数

<input id="txt" type="text">
//字符串截取
    function getByteVal ( val, max ) {
        var returnValue = '';
        var byteValLen = 0;
        for ( var i = 0; i < val.length; i++ ) {
            if ( val[ i ].match(/[^\x00-\xff]/ig) != null ) byteValLen += 2;
            else byteValLen += 1;
            if ( byteValLen > max ) break;
            returnValue += val[ i ];
        }
        return returnValue;
    };
 
$('#txt').on('keyup', function () {
    var val = this.value;
    if ( val.replace(/[^\x00-\xff]/g, "**").length > 14 ) {
        this.value = getByteVal(val, 14);
    }
});

24、验证码倒计时

<input id="send" type="button" value="发送验证码">
// JavaScript
var times = 60, // 时间设置60秒
    timer = null;
document.getElementById('send').onclick = function () {
    // 计时开始
    timer = setInterval(function () {
        times--;
        if ( times <= 0 ) {
            send.value = '发送验证码';
            clearInterval(timer);
            send.disabled = false;
            times = 60;
        }
        else {
            send.value = times + '秒后重试';
            send.disabled = true;
        }
    }, 1000);
};
var times = 60,
    timer = null;
$('#send').on('click', function () {
    var $this = $(this);
    // 计时开始
    timer = setInterval(function () {
        times--;
        if ( times <= 0 ) {
            $this.val('发送验证码');
            clearInterval(timer);
            $this.attr('disabled', false);
            times = 60;
        }
        else {
            $this.val(times + '秒后重试');
            $this.attr('disabled', true);
        }
    }, 1000);
});

25、时间倒计时

<p id="_lefttime"></p>
var times = 60,timer = null;

26、倒计时跳转

<div id="showtimes"></div>
// 设置倒计时秒数
var t = 10;
// 显示倒计时秒数
function showTime () {
    t -= 1;
    document.getElementById('showtimes').innerHTML = t;
    if ( t == 0 ) {
        location.href = 'error404.asp';
    }
    //每秒执行一次 showTime()
    setTimeout("showTime()", 1000);
}
showTime();

27、时间戳、毫秒格式化

function formatDate ( now ) {
    var y = now.getFullYear();
    var m = now.getMonth() + 1; // 注意 JavaScript 月份+1
    var d = now.getDate();
    var h = now.getHours();
    var m = now.getMinutes();
    var s = now.getSeconds();
    return y + "-" + m + "-" + d + " " + h + ":" + m + ":" + s;
}
var nowDate = new Date(1442978789184);
alert(formatDate(nowDate));

28、当前日期

var calculateDate = function () {
    var date = new Date();
    var weeks = [ "日", "一", "二", "三", "四", "五", "六" ];
    return date.getFullYear() + "年" + (date.getMonth() + 1) + "月" +
        date.getDate() + "日 星期" + weeks[ date.getDay() ];
};
$(function () {
    $("#dateSpan").html(calculateDate());
});

29、判断周六 / 周日

<p id = "text" > < / p >
    function time ( y, m ) {
        var tempTime = new Date(y, m, 0);
        var time = new Date();
        var saturday = new Array();
        var sunday = new Array();
 
        for ( var i = 1; i <= tempTime.getDate(); i++ ) {
            time.setFullYear(y, m - 1, i);
            var day = time.getDay();
            if ( day == 6 ) {
                saturday.push(i);
            }
            else if ( day == 0 ) {
                sunday.push(i);
            }
        }
        var text = y + "年" + m + "月份" + "<br />"
            + "周六：" + saturday.toString() + "<br />"
            + "周日：" + sunday.toString();
        document.getElementById("text").innerHTML = text;
    };
time(2018, 5);