2020必收藏的一大波JS开发工具函数来了-Js中文网

前言

在我们日常开发的时候，可能会遇到各种各样的需求，但是自己一时半会儿可能找不到合适的办法去解决。书到用时方恨少，下面的这些JavaScript的工具函数可能就会派上大用场了，我们可以进行复用，提高我们的工作效率。

我把下面的方法都大致分了个类放在了我的GitHub上。大家可以clone下来直接使用，也可以在需要用到时在里面去查找，善用ctrl+F。
这个仓库也会持更新的，如果里面没有，但是需要用到的工具函数，大家也可以在issues提出来，说不定就帮到了别人哟~

正则校验check工具函数

这里的正则表达式主要参考了any-rule。

验证不能包含字母


/**
 * @param { string } value
 */
export const isNoWord = value => /^[^A-Za-z]*$/g.test(value);

验证中文和数字


/**
 * @param { string } value
 */
export const isCHNAndEN = value => /^((?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0])|(\d))+$/g.test(value);

验证邮政编码(中国)


/**
 * @param { string } value
 */
export const isPostcode = value => /^(0[1-7]|1[0-356]|2[0-7]|3[0-6]|4[0-7]|5[1-7]|6[1-7]|7[0-5]|8[013-6])\d{4}$/g.test(value);

验证微信号，6至20位，以字母开头，字母，数字，减号，下划线


/**
 * @param { string } value
 */
export const isWeChatNum = value => /^[a-zA-Z][-_a-zA-Z0-9]{5,19}$/g.test(value);

### 验证16进制颜色


/**
 * @param { string } value
 */
export const isColor16 = value => /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/g.test(value);

验证火车车次


/**
 * @param { string } value
 */
export const isTrainNum = value => /^[GCDZTSPKXLY1-9]\d{1,4}$/g.test(value);

验证手机机身码(IMEI)


/**
 *  @param { string } value
 */
export const isIMEI = value => /^\d{15,17}$/g.test(value);

验证必须带端口号的网址(或ip)


/**
 * @param { string } value
 */
export const isHttpAndPort = value => /^((ht|f)tps?:\/\/)?[\w-]+(\.[\w-]+)+:\d{1,5}\/?$/g.test(value);

### 验证网址(支持端口和”?+参数”和”#+参数)


/**
 *  @param { string } value
 */
export const isRightWebsite = value => /^(((ht|f)tps?):\/\/)?[\w-]+(\.[\w-]+)+([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?$/g.test(value);

Js中文网 – 前端进阶资源教程 www.javascriptC.com,Flutter 中文教程
专注分享前端/Flutter知识，你想要的，在这里都能找到

验证统一社会信用代码


/**
 *  @param { string } value
 */
export const isCreditCode = value => /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/g.test(value);

验证迅雷链接


/**
 *  @param { string } value
 */
export const isThunderLink = value => /^thunderx?:\/\/[a-zA-Z\d]+=$/g.test(value);

### 验证ed2k链接(宽松匹配)


/**
 *  @param { string } value
 */
export const ised2k = value => /^ed2k:\/\/\|file\|.+\|\/$/g.test(value);

验证磁力链接(宽松匹配)


/**
 *  @param { string } value
 */
export const isMagnet = value => /^magnet:\?xt=urn:btih:[0-9a-fA-F]{40,}.*$/g.test(value);

验证子网掩码


/**
 *  @param { string } value
 */
export const isSubnetMask = value => /^(?:\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(?:\.(?:\d{1,2}|1\d\d|2[0-4]\d|25[0-5])){3}$/g.test(value);

验证linux”文件夹”路径


/**
 *  @param { string } value
 */
export const isLinuxFolderPath = value => /^(\/[^/]+)+\/?$/g.test(value);

### 验证linux”文件”路径

Js中文网 – 前端进阶资源教程 www.javascriptC.com,Flutter 中文教程
专注分享前端/Flutter知识，你想要的，在这里都能找到


/**
 *  @param { string } value
 */
export const isLinuxFilePath = value => /^(\/[^/]+)+$/g.test(value);

验证window”文件夹”路径


/**
 *  @param { string } value
 */
export const isWindowsFolderPath = value => /^[a-zA-Z]:\\(?:\w+\\?)*$/g.test(value);

验证window下”文件”路径


/**
 *  @param { string } value
 */
export const isWindowsFilePath = value => /^[a-zA-Z]:\\(?:\w+\\)*\w+\.\w+$/g.test(value);

验证股票代码(A股)


/**
 *  @param { string } value
 */
export const isAShare = value => /^(s[hz]|S[HZ])(000[\d]{3}|002[\d]{3}|300[\d]{3}|600[\d]{3}|60[\d]{4})$/g.test(value);

验证版本号格式必须为X.Y.Z


/**
 *  @param { string } value
 */
export const isVersion = value => /^\d+(?:\.\d+){2}$/g.test(value);

验证视频链接地址（视频格式可按需增删）


/**
 *  @param { string } value
 */
export const isVideoUrl = value => /^https?:\/\/(.+\/)+.+(\.(swf|avi|flv|mpg|rm|mov|wav|asf|3gp|mkv|rmvb|mp4))$/i.test(value);

验证图片链接地址（图片格式可按需增删）


/**
 *  @param { string } value
 */
export const isImageUrl = value => /^https?:\/\/(.+\/)+.+(\.(gif|png|jpg|jpeg|webp|svg|psd|bmp|tif))$/i.test(value);

验证银行卡号（10到30位, 覆盖对公/私账户, 参考微信支付）


/**
 * @param { string } value
 */
export const isAccountNumber = value => /^[1-9]\d{9,29}$/g.test(value);

验证中文姓名


/**
 * @param { string } value
 */
export const isChineseName = value => /^(?:[\u4e00-\u9fa5·]{2,16})$/g.test(value);

验证英文姓名


/**
 * @param { string } value
 */
export const isEnglishName = value => /(^[a-zA-Z]{1}[a-zA-Z\s]{0,20}[a-zA-Z]{1}$)/g.test(value);

### 验证车牌号(新能源)


/**
 * @param { string } value
 */
export const isLicensePlateNumberNER = value => /[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领 A-Z]{1}[A-HJ-NP-Z]{1}(([0-9]{5}[DF])|([DF][A-HJ-NP-Z0-9][0-9]{4}))$/g.test(value);

验证车牌号(非新能源)


/**
 * @param { string } value
 */
export const isLicensePlateNumberNNER = value => /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领 A-Z]{1}[A-HJ-NP-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/g.test(value);

验证车牌号(新能源+非新能源)


/**
 * @param { string } value
 */
export const isLicensePlateNumber = value => /^(?:[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领 A-Z]{1}[A-HJ-NP-Z]{1}(?:(?:[0-9]{5}[DF])|(?:[DF](?:[A-HJ-NP-Z0-9])[0-9]{4})))|(?:[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领 A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9 挂学警港澳]{1})$/g.test(value);

验证手机号中国(严谨), 根据工信部2019年最新公布的手机号段


/**
 * @param { string } value
 */
export const isMPStrict = value => /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-7|9])|(?:5[0-3|5-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1|8|9]))\d{8}$/g.test(value);

验证手机号中国(宽松), 只要是13,14,15,16,17,18,19开头即可


/**
 * @param { string } value
 */
export const isMPRelaxed = value => /^(?:(?:\+|00)86)?1[3-9]\d{9}$/g.test(value);

验证email(邮箱)

/**

 * @param { string } value

 */

export const isEmail = value => /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/g.test(value);
```javascript
### 验证座机电话(国内),如: 0341-86091234
</code></pre>
/**

 * @param { string } value

 */

export const isLandlineTelephone = value => /\d{3}-\d{8}|\d{4}-\d{7}/g.test(value);
<pre><code class="language-javascript line-numbers"><br />### 验证身份证号(1代,15位数字)
</code></pre>
/**

 * @param { string } value

 */

export const isIDCardOld = value => /^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$/g.test(value);
<pre><code class="language-javascript line-numbers"><br />### 验证身份证号(2代,18位数字),最后一位是校验位,可能为数字或字符X
</code></pre>
/**

 * @param { string } value

 */

export const isIDCardNew = value => /^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}[\dXx]$/g.test(value);
<pre><code class="language-javascript line-numbers"><br />### 验证身份证号, 支持1/2代(15位/18位数字)
</code></pre>
/**

 * @param { string } value

 */

export const isIDCard = value => /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/g.test(value);
<pre><code class="language-javascript line-numbers"><br />### 验证护照（包含香港、澳门）
</code></pre>
/**

 * @param { string } value

 */

export const isPassport = value => /(^[EeKkGgDdSsPpHh]\d{8}$)|(^(([Ee][a-fA-F])|([DdSsPp][Ee])|([Kk][Jj])|([Mm][Aa])|(1[45]))\d{7}$)/g.test(value);
<pre><code class="language-javascript line-numbers"><br />### 验证帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线组合
</code></pre>
/**

 * @param { string } value

 */

export const isWebAccount = value => /^[a-zA-Z]\w{4,15}$/g.test(value);
<pre><code class="language-javascript line-numbers"><br />### 验证中文/汉字
</code></pre>
/**

 * @param { string } value

 */

export const isChineseCharacter = value => /^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0])+$/g.test(value);
<pre><code class="language-javascript line-numbers"><br />### 验证小数
</code></pre>
/**

 * @param { string } value

 */

export const isDecimal = value => /^\d+.\d+$/g.test(value);
<pre><code class="language-javascript line-numbers"><br />### 验证数字
</code></pre>
/**

 * @param { string } value

 */

export const isNumber = value => /^\d{1,}$/g.test(value);
<pre><code class="language-javascript line-numbers"><br />### 验证qq号格式
</code></pre>
/**

 * @param { string } value

 */

export const isQQNum = value => /^[1-9][0-9]{4,10}$/g.test(value);
<pre><code class="language-javascript line-numbers"><br />### 验证数字和字母组成
</code></pre>
/**

 * @param { string } value

 */

export const isNumAndStr = value => /^[A-Za-z0-9]+$/g.test(value);
<pre><code class="language-javascript line-numbers"><br />### 验证英文字母
</code></pre>
/**

 * @param { string } value

 */

export const isEnglish = value => /^[a-zA-Z]+$/g.test(value);
<pre><code class="language-javascript line-numbers"><br />### 验证大写英文字母
</code></pre>
/**

 * @param { string } value

 */

export const isCapital = value => /^[A-Z]+$/g.test(value);
<pre><code class="language-javascript line-numbers"><br />### 验证小写英文字母
</code></pre>
/**

 * @param { string } value

 */

export const isLowercase = value => /^[a-z]+$/g.test(value);
<pre><code class="language-javascript line-numbers"><br />## 浏览器操作相关browser工具函数
### 返回当前url
</code></pre>
export const currentURL = () => window.location.href;
<pre><code class="language-javascript line-numbers"><br />### 获取url参数（第一种）
</code></pre>
/**

 * @param {<em>} name

 * @param {</em>} origin

 */
export function getUrlParam(name, origin = null) {

    let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");

    let r = null;

    if (origin == null) {

        r = window.location.search.substr(1).match(reg);

    } else {

        r = origin.substr(1).match(reg);

    }

    if (r != null) return decodeURIComponent(r<a href="https://github.com/XmanLin/MyUtils/issues">2</a>);

    return null;

}
<pre><code class="language-javascript line-numbers"><br />### 获取url参数（第二种）
</code></pre>
/**

 * @param {<em>} name

 * @param {</em>} origin

 */

export function getUrlParams(name, origin = null) {

    let url = location.href;

    let temp1 = url.split('?');

    let pram = temp1<a href="https://github.com/XmanLin/MyUtils">1</a>;

    let keyValue = pram.split('&');

    let obj = {};

    for (let i = 0; i < keyValue.length; i++) {

        let item = keyValue[i].split('=');

        let key = item[0];

        let value = item<a href="https://github.com/XmanLin/MyUtils">1</a>;

        obj[key] = value;

    }

    return obj[name];

}
<pre><code class="language-javascript line-numbers"><br />### 修改url中的参数
</code></pre>
/**

 * @param { string } paramName

 * @param { string } replaceWith

 <em>/

export function replaceParamVal(paramName,replaceWith) {

    var oUrl = location.href.toString();

    var re=eval('/('+ paramName+'=)([^&]</em>)/gi');

    location.href = oUrl.replace(re,paramName+'='+replaceWith);

    return location.href;

}
<pre><code class="language-javascript line-numbers"><br />### 删除url中指定的参数
</code></pre>
/**

 * @param { string } name

 */

export function funcUrlDel(name){

    var loca =location;

    var baseUrl = loca.origin + loca.pathname + "?";

    var query = loca.search.substr(1);

    if (query.indexOf(name)>-1) {

        var obj = {};

        var arr = query.split("&");

        for (var i = 0; i < arr.length; i++) {

            arr[i] = arr[i].split("=");

            obj[arr[i][0]] = arr<a href="https://github.com/XmanLin/MyUtils">i</a>;

        }

        delete obj[name];

        var url = baseUrl + JSON.stringify(obj).replace(/[\"{}]/g,"").replace(/:/g,"=").replace(/\,/g,"&");

        return url

    }

}
<pre><code class="language-javascript line-numbers"><br />### 获取窗口可视范围的高度
</code></pre>
export function getClientHeight() {

    let clientHeight = 0;

    if (document.body.clientHeight && document.documentElement.clientHeight) {

        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;

    }

    else {

        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;

    }

    return clientHeight;

}
<pre><code class="language-javascript line-numbers"><br />### 获取窗口可视范围宽度
</code></pre>
export function getPageViewWidth() {

    let d = document,

        a = d.compatMode == "BackCompat" ? d.body : d.documentElement;

    return a.clientWidth;

}
<pre><code class="language-javascript line-numbers"><br />### 获取窗口宽度
</code></pre>
export function getPageWidth() {

    let g = document,

        a = g.body,

        f = g.documentElement,

        d = g.compatMode == "BackCompat" ? a : g.documentElement;

    return Math.max(f.scrollWidth, a.scrollWidth, d.clientWidth);

}
<pre><code class="language-javascript line-numbers"><br />### 获取窗口尺寸
</code></pre>
export function getViewportOffset() {

    if (window.innerWidth) {

        return {

            w: window.innerWidth,

            h: window.innerHeight

        }

    } else {

        // ie8及其以下

        if (document.compatMode === "BackCompat") {

            // 怪异模式

            return {

                w: document.body.clientWidth,

                h: document.body.clientHeight

            }

        } else {

            // 标准模式

            return {

                w: document.documentElement.clientWidth,

                h: document.documentElement.clientHeight

            }

        }

    }

}
<pre><code class="language-javascript line-numbers"><br />### 获取滚动条距顶部高度
</code></pre>
export function getPageScrollTop() {

    let a = document;

    return a.documentElement.scrollTop || a.body.scrollTop;

}
<pre><code class="language-javascript line-numbers"><br />### 获取滚动条距左边的高度
</code></pre>
export function getPageScrollLeft() {

    let a = document;

    return a.documentElement.scrollLeft || a.body.scrollLeft;

}
<pre><code class="language-javascript line-numbers"><br />### 开启全屏
</code></pre>
/**

 * @param {*} element

 */

export function launchFullscreen(element) {

    if (element.requestFullscreen) {

        element.requestFullscreen()

    } else if (element.mozRequestFullScreen) {

        element.mozRequestFullScreen()

    } else if (element.msRequestFullscreen) {

        element.msRequestFullscreen()

    } else if (element.webkitRequestFullscreen) {

        element.webkitRequestFullScreen()

    }

}
<pre><code class="language-javascript line-numbers"><br />### 关闭全屏
</code></pre>
export function exitFullscreen() {

    if (document.exitFullscreen) {

        document.exitFullscreen()

    } else if (document.msExitFullscreen) {

        document.msExitFullscreen()

    } else if (document.mozCancelFullScreen) {

        document.mozCancelFullScreen()

    } else if (document.webkitExitFullscreen) {

        document.webkitExitFullscreen()

    }

}
<pre><code class="language-javascript line-numbers"><br />### 返回当前滚动条位置
</code></pre>
export const getScrollPosition = (el = window) => ({

    x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,

    y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop

});
<pre><code class="language-javascript line-numbers"><br />### 滚动到指定元素区域
</code></pre>
export const smoothScroll = element =>{

    document.querySelector(element).scrollIntoView({

        behavior: 'smooth'

    });

};
<pre><code class="language-javascript line-numbers"><br />### 平滑滚动到页面顶部
</code></pre>
export const scrollToTop = () => {

    const c = document.documentElement.scrollTop || document.body.scrollTop;

    if (c > 0) {

        window.requestAnimationFrame(scrollToTop);

        window.scrollTo(0, c - c / 8);

    }

};
<pre><code class="language-javascript line-numbers"><br />### http跳转https
</code></pre>
export const httpsRedirect = () => {

    if (location.protocol !== 'https:') location.replace('https://' + location.href.split('//')<a href="https://github.com/XmanLin/MyUtils">1</a>);

};
<pre><code class="language-javascript line-numbers"><br />### 检查页面底部是否可见
</code></pre>
export const bottomVisible = () =>{

    return document.documentElement.clientHeight + window.scrollY >=

        (document.documentElement.scrollHeight || document.documentElement.clientHeight);

};
<pre><code class="language-javascript line-numbers"><br />### 打开一个窗口
</code></pre>
/**

 * @param { string } url

 * @param { string } windowName

 * @param { number } width

 * @param { number } height

 */

export function openWindow(url, windowName, width, height) {

    var x = parseInt(screen.width / 2.0) - width / 2.0;

    var y = parseInt(screen.height / 2.0) - height / 2.0;

    var isMSIE = navigator.appName == "Microsoft Internet Explorer";

    if (isMSIE) {

        var p = "resizable=1,location=no,scrollbars=no,width=";

        p = p + width;

        p = p + ",height=";

        p = p + height;

        p = p + ",left=";

        p = p + x;

        p = p + ",top=";

        p = p + y;

        window.open(url, windowName, p);

    } else {

        var win = window.open(

            url,

            "ZyiisPopup",

            "top=" +

            y +

            ",left=" +

            x +

            ",scrollbars=" +

            scrollbars +

            ",dialog=yes,modal=yes,width=" +

            width +

            ",height=" +

            height +

            ",resizable=no"

        );

        eval("try { win.resizeTo(width, height); } catch(e) { }");

        win.focus();

    }

}
<pre><code class="language-javascript line-numbers"><br />### 自适应页面（rem）
</code></pre>
/**

 * @param { number } width

 */

export function AutoResponse(width = 750) {

    const target = document.documentElement;

    target.clientWidth >= 600

        ? (target.style.fontSize = "80px")

        : (target.style.fontSize = target.clientWidth / width * 100 + "px");

}
<pre><code class="language-javascript line-numbers"><br />## 日期工具date工具函数
可以参考我的另一篇文章《[前端的各种日期操作][4]》，或者直接到我的[GitHub][5]查看
## 浏览器存储相关storage工具函数
主要为浏览器存储方面的工具函数，大部分搬运自大神[火狼1][6]
### localStorage 存贮
</code></pre>
/**

 * 目前对象值如果是函数 、RegExp等特殊对象存贮会被忽略

 * @param { String } key  属性

 * @param { string } value 值

 */

export const localStorageSet = (key, value) => {

    if (typeof (value) === 'object') value = JSON.stringify(value);

    localStorage.setItem(key, value)

};
<pre><code class="language-javascript line-numbers"><br />### localStorage 获取
</code></pre>
/**

 * @param {String} key  属性

 */

export const localStorageGet = (key) => {

    return localStorage.getItem(key)

};
<pre><code class="language-javascript line-numbers"><br />### localStorage 移除
</code></pre>
/**

 * @param {String} key  属性

 */

export const localStorageRemove = (key) => {

    localStorage.removeItem(key)

};
<pre><code class="language-javascript line-numbers"><br />### localStorage 存贮某一段时间失效
</code></pre>
/**

 * @param {String} key  属性

 * @param {*} value 存贮值

 * @param { number } expire 过期时间,毫秒数

 */

export const localStorageSetExpire = (key, value, expire) => {

    if (typeof (value) === 'object') value = JSON.stringify(value);

    localStorage.setItem(key, value);

    setTimeout(() => {

        localStorage.removeItem(key)

    }, expire)

};
<pre><code class="language-javascript line-numbers"><br />### sessionStorage 存贮
</code></pre>
/**

 * @param {String} key  属性

 * @param {*} value 值

 */

export const sessionStorageSet = (key, value) => {

    if (typeof (value) === 'object') value = JSON.stringify(value);

    sessionStorage.setItem(key, value)

};
<pre><code class="language-javascript line-numbers"><br />### sessionStorage 获取
</code></pre>
/**

 * @param {String} key  属性

 */

export const sessionStorageGet = (key) => {

    return sessionStorage.getItem(key)

};
<pre><code class="language-javascript line-numbers"><br />### sessionStorage 删除
</code></pre>
/**

 * @param {String} key  属性

 */

export const sessionStorageRemove = (key) => {

    sessionStorage.removeItem(key)

};
<pre><code class="language-javascript line-numbers"><br />### sessionStorage 存贮某一段时间失效
</code></pre>
/**

 * @param {String} key  属性

 * @param {*} value 存贮值

 * @param {String} expire 过期时间,毫秒数

 */

export const sessionStorageSetExpire = (key, value, expire) => {

    if (typeof (value) === 'object') value = JSON.stringify(value);

    sessionStorage.setItem(key, value);

    setTimeout(() => {

        sessionStorage.removeItem(key)

    }, expire)

};
<pre><code class="language-javascript line-numbers"><br />### cookie 存贮
</code></pre>
/**

 * @param {String} key  属性

 * @param {*} value  值

 * @param { String } expire  过期时间,单位天

 */

export const cookieSet = (key, value, expire) => {

    const d = new Date();

    d.setDate(d.getDate() + expire);

    document.cookie = <code>${key}=${value};expires=${d.toUTCString()}</code>

};
<pre><code class="language-javascript line-numbers"><br />### cookie 获取
</code></pre>
/**

 * @param {String} key  属性

 */

export const cookieGet = (key) => {

    const cookieStr = unescape(document.cookie);

    const arr = cookieStr.split('; ');

    let cookieValue = '';

    for (let i = 0; i < arr.length; i++) {

        const temp = arr[i].split('=');

        if (temp[0] === key) {

            cookieValue = temp<a href="https://github.com/XmanLin/MyUtils">1</a>;

            break

        }

    }

    return cookieValue

};
<pre><code class="language-javascript line-numbers"><br />### cookie 删除
</code></pre>
/**

 * @param {String} key  属性

 */

export const cookieRemove = (key) => {

    document.cookie = <code>${encodeURIComponent(key)}=;expires=${new Date()}</code>

};
<pre><code class="language-javascript line-numbers"><br />## 更多的工具函数
这里包含了平时可能常用的工具函数，包含数字，字符串，数组和对象等等操作。
### 金钱格式化，三位加逗号
</code></pre>
/**

 *  @param { number } num

 */

export const formatMoney = num => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
<pre><code class="language-javascript line-numbers"><br />### 截取字符串并加身略号
</code></pre>
export function subText(str, length) {

    if (str.length === 0) {

        return '';

    }

    if (str.length > length) {

        return str.substr(0, length) + "...";

    } else {

        return str;

    }

}
<pre><code class="language-javascript line-numbers"><br />### 获取文件base64编码
</code></pre>
/**

 * @param file

 * @param format  指定文件格式

 * @param size  指定文件大小(字节)

 * @param formatMsg 格式错误提示

 * @param sizeMsg   大小超出限制提示

 * @returns {Promise<any>}

 */

export function fileToBase64String(file, format = ['jpg', 'jpeg', 'png', 'gif'], size = 20 * 1024 * 1024, formatMsg = '文件格式不正确', sizeMsg = '文件大小超出限制') {

    return new Promise((resolve, reject) => {

        // 格式过滤

        let suffix = file.type.split('/')<a href="https://github.com/XmanLin/MyUtils">1</a>.toLowerCase();

        let inFormat = false;

        for (let i = 0; i < format.length; i++) {

            if (suffix === format[i]) {

                inFormat = true;

                break;

            }

        }

        if (!inFormat) {

            reject(formatMsg);

        }

        // 大小过滤

        if (file.size > size) {

            reject(sizeMsg);

        }

        // 转base64字符串

        let fileReader = new FileReader();

        fileReader.readAsDataURL(file);

        fileReader.onload = () => {

            let res = fileReader.result;

            resolve({base64String: res, suffix: suffix});

            reject('异常文件，请重新选择');

        }

    })

}
<pre><code class="language-javascript line-numbers"><br />### B转换到KB,MB,GB并保留两位小数
</code></pre>
/**

 * @param { number } fileSize

 */

export function formatFileSize(fileSize) {

    let temp;

    if (fileSize < 1024) {

        return fileSize + 'B';

    } else if (fileSize < (1024 * 1024)) {

        temp = fileSize / 1024;

        temp = temp.toFixed(2);

        return temp + 'KB';

    } else if (fileSize < (1024 * 1024 * 1024)) {

        temp = fileSize / (1024 * 1024);

        temp = temp.toFixed(2);

        return temp + 'MB';

    } else {

        temp = fileSize / (1024 * 1024 * 1024);

        temp = temp.toFixed(2);

        return temp + 'GB';

    }

}
<pre><code class="language-javascript line-numbers"><br />### base64转file
</code></pre>
/**

 *  @param { base64 } base64

 *  @param { string } filename 转换后的文件名

 <em>/

export const base64ToFile = (base64, filename )=> {

    let arr = base64.split(',');

    let mime = arr[0].match(/:(.</em>?);/)<a href="https://github.com/XmanLin/MyUtils">1</a>;

    let suffix = mime.split('/')<a href="https://github.com/XmanLin/MyUtils">1</a> ;// 图片后缀

    let bstr = atob(arr<a href="https://github.com/XmanLin/MyUtils">1</a>);

    let n = bstr.length;

    let u8arr = new Uint8Array(n);

    while (n--) {

        u8arr[n] = bstr.charCodeAt(n)

    }

    return new File([u8arr], <code>${filename}.${suffix}</code>, { type: mime })

};
<pre><code class="language-javascript line-numbers"><br />### base64转blob
</code></pre>
/**

 *  @param { base64 } base64

 <em>/

export const base64ToBlob = base64 => {

    let arr = base64.split(','),

        mime = arr[0].match(/:(.</em>?);/)<a href="https://github.com/XmanLin/MyUtils">1</a>,

        bstr = atob(arr<a href="https://github.com/XmanLin/MyUtils">1</a>),

        n = bstr.length,

        u8arr = new Uint8Array(n);

    while (n--) {

        u8arr[n] = bstr.charCodeAt(n);

    }

    return new Blob([u8arr], { type: mime });

};
<pre><code class="language-javascript line-numbers"><br />### blob转file
</code></pre>
/**

 *  @param { blob } blob

 *  @param { string } fileName

 */

export const blobToFile = (blob, fileName) => {

    blob.lastModifiedDate = new Date();

    blob.name = fileName;

    return blob;

};
<pre><code class="language-javascript line-numbers"><br />### file转base64
</code></pre>
/**

 * @param { * } file 图片文件

 */

export const fileToBase64 = file => {

    let reader = new FileReader();

    reader.readAsDataURL(file);

    reader.onload = function (e) {

        return e.target.result

    };

};
<pre><code class="language-javascript line-numbers"><br />### 递归生成树形结构
</code></pre>
export function getTreeData(data, pid, pidName = 'parentId', idName = 'id', childrenName = 'children', key) {

    let arr = [];
<pre><code>for (let i = 0; i < data.length; i++) {

    if (data[i][pidName] == pid) {

        data[i].key = data[i][idName];

        data[i][childrenName] = getTreeData(data, data[i][idName], pidName, idName, childrenName);

        arr.push(data[i]);

    }

}
return arr;

</code></pre>
}
<pre><code class="language-javascript line-numbers"><br />### 遍历树节点
</code></pre>
export function foreachTree(data, childrenName = 'children', callback) {

    for (let i = 0; i < data.length; i++) {

        callback(data[i]);

        if (data[i][childrenName] && data[i][childrenName].length > 0) {

            foreachTree(data[i][childrenName], childrenName, callback);

        }

    }

}
<pre><code class="language-javascript line-numbers"><br />### 追溯父节点
</code></pre>
export function traceParentNode(pid, data, rootPid, pidName = 'parentId', idName = 'id', childrenName = 'children') {

    let arr = [];

    foreachTree(data, childrenName, (node) => {

        if (node[idName] == pid) {

            arr.push(node);

            if (node[pidName] != rootPid) {

                arr = arr.concat(traceParentNode(node[pidName], data, rootPid, pidName, idName));

            }

        }

    });

    return arr;

}
<pre><code class="language-javascript line-numbers"><br />### 寻找所有子节点
</code></pre>
export function traceChildNode(id, data, pidName = 'parentId', idName = 'id', childrenName = 'children') {

    let arr = [];

    foreachTree(data, childrenName, (node) => {

        if (node[pidName] == id) {

            arr.push(node);

            arr = arr.concat(traceChildNode(node[idName], data, pidName, idName, childrenName));

        }

    });

    return arr;

}
<pre><code class="language-javascript line-numbers"><br />### 根据pid生成树形结构
</code></pre>
/**

 *  @param { object } items 后台获取的数据

 *  @param { * } id 数据中的id

 *  @param { * } link 生成树形结构的依据

 */

export const createTree = (items, id = null, link = 'pid') =>{

    items.filter(item => item[link] === id).map(item => ({ ...item, children: createTree(items, item.id) }));

};
<pre><code class="language-javascript line-numbers"><br />### 查询数组中是否存在某个元素并返回元素第一次出现的下标
</code></pre>
/**

 * @param {*} item

 * @param { array } data

 */

export function inArray(item, data) {

    for (let i = 0; i < data.length; i++) {

        if (item === data[i]) {

            return i;

        }

    }

    return -1;

}
<pre><code class="language-javascript line-numbers"><br />### Windows根据详细版本号判断当前系统名称
</code></pre>
/**

 * @param { string } osVersion

 */

export function OutOsName(osVersion) {

    if(!osVersion){

        return

    }

    let str = osVersion.substr(0, 3);

    if (str === "5.0") {

        return "Win 2000"

    } else if (str === "5.1") {

        return "Win XP"

    } else if (str === "5.2") {

        return "Win XP64"

    } else if (str === "6.0") {

        return "Win Vista"

    } else if (str === "6.1") {

        return "Win 7"

    } else if (str === "6.2") {

        return "Win 8"

    } else if (str === "6.3") {

        return "Win 8.1"

    } else if (str === "10.") {

        return "Win 10"

    } else {

        return "Win"

    }

}
<pre><code class="language-javascript line-numbers"><br />### 判断手机是Andoird还是IOS
</code></pre>
/**

 *  0: ios

 *  1: android

 *  2: 其它

 */

export function getOSType() {

    let u = navigator.userAgent, app = navigator.appVersion;

    let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;

    let isIOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);

    if (isIOS) {

        return 0;

    }

    if (isAndroid) {

        return 1;

    }

    return 2;

}
<pre><code class="language-javascript line-numbers"><br />### 函数防抖
</code></pre>
/**

 * @param { function } func

 * @param { number } wait 延迟执行毫秒数

 * @param { boolean } immediate  true 表立即执行，false 表非立即执行

 */

export function debounce(func,wait,immediate) {

    let timeout;

    return function () {

        let context = this;

        let args = arguments;
<pre><code>    if (timeout) clearTimeout(timeout);

    if (immediate) {

        let callNow = !timeout;

        timeout = setTimeout(() => {

            timeout = null;

        }, wait);

        if (callNow) func.apply(context, args)

    }

    else {

        timeout = setTimeout(() => {

            func.apply(context, args)

        }, wait);

    }

}

</code></pre>
}
<pre><code class="language-javascript line-numbers"><br />### 函数节流
</code></pre>
/**

 * @param { function } func 函数

 * @param { number } wait 延迟执行毫秒数

 * @param { number } type 1 表时间戳版，2 表定时器版

 */

export function throttle(func, wait ,type) {

    let previous, timeout;

    if(type===1){

        previous = 0;

    }else if(type===2){

        timeout = null;

    }

    return function() {

        let context = this;

        let args = arguments;

        if(type===1){

            let now = Date.now();
<pre><code>        if (now - previous > wait) {

            func.apply(context, args);

            previous = now;

        }

    }else if(type===2){

        if (!timeout) {

            timeout = setTimeout(() => {

                timeout = null;

                func.apply(context, args)

            }, wait)

        }

    }
}

</code></pre>
}
<pre><code class="language-javascript line-numbers"><br />### 判断数据类型
</code></pre>
/**

 * @param {*} target

 */

export function type(target) {

    let ret = typeof(target);

    let template = {

        "[object Array]": "array",

        "[object Object]":"object",

        "[object Number]":"number - object",

        "[object Boolean]":"boolean - object",

        "[object String]":'string-object'

    };
<pre><code>if(target === null) {

    return 'null';

}else if(ret == "object"){

    let str = Object.prototype.toString.call(target);

    return template[str];

}else{

    return ret;

}

</code></pre>
}
<pre><code class="language-javascript line-numbers"><br />### 生成指定范围随机数
</code></pre>
/**

 * @param { number } min

 * @param { number } max

 */

export const RandomNum = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
<pre><code class="language-javascript line-numbers"><br />### 数组乱序
</code></pre>
/**

 * @param {array} arr

 */

export function arrScrambling(arr) {

    let array = arr;

    let index = array.length;

    while (index) {

        index -= 1;

        let randomIndex = Math.floor(Math.random() * index);

        let middleware = array[index];

        array[index] = array[randomIndex];

        array[randomIndex] = middleware

    }

    return array

}
<pre><code class="language-javascript line-numbers"><br />### 数组交集
</code></pre>
/**

 * @param { array} arr1

 * @param { array } arr2

 */

export const similarity = (arr1, arr2) => arr1.filter(v => arr2.includes(v));
<pre><code class="language-javascript line-numbers"><br />### 数组中某元素出现的次数
</code></pre>
/**

 * @param { array } arr

 * @param {*} value

 */

export function countOccurrences(arr, value) {

    return arr.reduce((a, v) => v === value ? a + 1 : a + 0, 0);

}
<pre><code class="language-javascript line-numbers"><br />### 加法函数（精度丢失问题）
</code></pre>
/**

 * @param { number } arg1

 * @param { number } arg2

 */

export function add(arg1, arg2) {

    let r1, r2, m;

    try { r1 = arg1.toString().split(".")<a href="https://github.com/XmanLin/MyUtils">1</a>.length } catch (e) { r1 = 0 }

    try { r2 = arg2.toString().split(".")<a href="https://github.com/XmanLin/MyUtils">1</a>.length } catch (e) { r2 = 0 }

    m = Math.pow(10, Math.max(r1, r2));

    return (arg1 * m + arg2 * m) / m

}
<pre><code class="language-javascript line-numbers"><br />### 减法函数（精度丢失问题）
</code></pre>
/**

 * @param { number } arg1

 * @param { number } arg2

 */

export function sub(arg1, arg2) {

    let r1, r2, m, n;

    try { r1 = arg1.toString().split(".")<a href="https://github.com/XmanLin/MyUtils">1</a>.length } catch (e) { r1 = 0 }

    try { r2 = arg2.toString().split(".")<a href="https://github.com/XmanLin/MyUtils">1</a>.length } catch (e) { r2 = 0 }

    m = Math.pow(10, Math.max(r1, r2));

    n = (r1 >= r2) ? r1 : r2;

    return Number(((arg1 * m - arg2 * m) / m).toFixed(n));

}
<pre><code class="language-javascript line-numbers"><br />### 除法函数（精度丢失问题）
</code></pre>
/**

 * @param { number } num1

 * @param { number } num2

 <em>/

export function division(num1,num2){

    let t1,t2,r1,r2;

    try{

        t1 = num1.toString().split('.')<a href="https://github.com/XmanLin/MyUtils">1</a>.length;

    }catch(e){

        t1 = 0;

    }

    try{

        t2=num2.toString().split(".")<a href="https://github.com/XmanLin/MyUtils">1</a>.length;

    }catch(e){

        t2=0;

    }

    r1=Number(num1.toString().replace(".",""));

    r2=Number(num2.toString().replace(".",""));

    return (r1/r2)</em>Math.pow(10,t2-t1);

}
<pre><code class="language-javascript line-numbers"><br />### 乘法函数（精度丢失问题）
</code></pre>
/**

 * @param { number } num1

 * @param { number } num2

 <em>/

export function mcl(num1,num2){

    let m=0,s1=num1.toString(),s2=num2.toString();

    try{m+=s1.split(".")<a href="https://github.com/XmanLin/MyUtils">1</a>.length}catch(e){}

    try{m+=s2.split(".")<a href="https://github.com/XmanLin/MyUtils">1</a>.length}catch(e){}

    return Number(s1.replace(".",""))</em>Number(s2.replace(".",""))/Math.pow(10,m);

}
<pre><code class="language-javascript line-numbers"><br />### 递归优化（尾递归）
</code></pre>
/**

 * @param { function } f

 */

export function tco(f) {

    let value;

    let active = false;

    let accumulated = [];
<pre><code>return function accumulator() {

    accumulated.push(arguments);

    if (!active) {

        active = true;

        while (accumulated.length) {

            value = f.apply(this, accumulated.shift());

        }

        active = false;

        return value;

    }

};

</code></pre>
}
<pre><code class="language-javascript line-numbers"><br />### 生成随机整数
</code></pre>
export function randomNumInteger(min, max) {

    switch (arguments.length) {

        case 1:

            return parseInt(Math.random() * min + 1, 10);

        case 2:

            return parseInt(Math.random() * (max - min + 1) + min, 10);

        default:

            return 0

    }

}
<pre><code class="language-javascript line-numbers"><br />### 去除空格
</code></pre>
/**

 * @param { string } str 待处理字符串

 * @param  { number } type 去除空格类型 1-所有空格  2-前后空格  3-前空格 4-后空格 默认为1

 <em>/

export function trim(str, type = 1) {

    if (type && type !== 1 && type !== 2 && type !== 3 && type !== 4) return;

    switch (type) {

        case 1:

            return str.replace(/\s/g, "");

        case 2:

            return str.replace(/(^\s)|(\s</em>$)/g, "");

        case 3:

            return str.replace(/(^\s)/g, "");

        case 4:

            return str.replace(/(\s$)/g, "");

        default:

            return str;

    }

}
<pre><code class="language-javascript line-numbers"><br />### 大小写转换
</code></pre>
/**

 * @param { string } str 待转换的字符串

 * @param { number } type 1-全大写 2-全小写 3-首字母大写 其他-不转换

 */
export function turnCase(str, type) {

    switch (type) {

        case 1:

            return str.toUpperCase();

        case 2:

            return str.toLowerCase();

        case 3:

            return str[0].toUpperCase() + str.substr(1).toLowerCase();

        default:

            return str;

    }

}
<pre><code class="language-javascript line-numbers"><br />### 随机16进制颜色 hexColor
</code></pre>
/**

 * 方法一

 */

export function hexColor() {
<pre><code>let str = '#';

let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F'];

for (let i = 0; i < 6; i++) {

    let index = Number.parseInt((Math.random() * 16).toString());

    str += arr[index]

}

return str;

</code></pre>
}
<pre><code class="language-javascript line-numbers"><br />### 随机16进制颜色 randomHexColorCode
</code></pre>
/**

 * 方法二

 */

export const randomHexColorCode = () => {

    let n = (Math.random() * 0xfffff * 1000000).toString(16);

    return '#' + n.slice(0, 6);

};
<pre><code class="language-javascript line-numbers"><br />### 转义html(防XSS攻击)
</code></pre>
export const escapeHTML = str =>{

    str.replace(

        /[&<>'"]/g,

        tag =>

            ({

                '&': '&',

                '<': '<',

                '>': '>',

                "'": ''',

                '"': '"'

            }[tag] || tag)

    );

};
<pre><code class="language-javascript line-numbers"><br />### 检测移动/PC设备
</code></pre>
export const detectDeviceType = () => { return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? 'Mobile' : 'Desktop'; };
<pre><code class="language-javascript line-numbers"><br />### 隐藏所有指定标签
</code></pre>
/**

 * 例: hide(document.querySelectorAll('img'))

 */

export const hideTag = (...el) => [...el].forEach(e => (e.style.display = 'none'));
<pre><code class="language-javascript line-numbers"><br />### 返回指定元素的生效样式
</code></pre>
/**

 * @param { element} el  元素节点

 * @param { string } ruleName  指定元素的名称

 */

export const getStyle = (el, ruleName) => getComputedStyle(el)[ruleName];
<pre><code class="language-javascript line-numbers"><br />### 检查是否包含子元素
</code></pre>
/**

 * @param { element } parent

 * @param { element } child

 * 例：elementContains(document.querySelector('head'), document.querySelector('title')); // true

 */

export const elementContains = (parent, child) => parent !== child && parent.contains(child);
<pre><code class="language-javascript line-numbers"><br />### 数字超过规定大小加上加号“+”，如数字超过99显示99+
</code></pre>
/**

 * @param { number } val 输入的数字

 * @param { number } maxNum 数字规定界限

 */

export const outOfNum = (val, maxNum) =>{

    val = val ? val-0 :0;

    if (val > maxNum ) {

        return <code>${maxNum}+</code>

    }else{

        return val;

    }

};

```

未完待续...
参考
https://github.com/any86/any-...

https://juejin.im/post/5cc7af...

https://juejin.im/post/5da1a0...

https://juejin.im/post/5deb2c...

https://juejin.im/post/5de5be...
最后
上面的工具函数，一部分来自于自己平时的总结，一部分来自于上面的参考文章,，感谢大神们的总结。如果对你有帮助，为了方便查阅，不妨在GitHub上点个star~
这个仓库会持续更新，如果你有更好的点子，或者没有找到你想要的工具函数，欢迎issues~
文中若有不准确或错误的地方，欢迎指出，更欢迎issues~

  作者：xmanlin

  链接：https://segmentfault.com/a/1190000022019952

   原文标题：2020必收藏的一大波JS开发工具函数来了 - Js中文网 · 前端进阶资源教程
 原文地址：https://www.javascriptc.com/3990.html

  
 阅读全文 
  看完两件小事
 如果你觉得这篇文章对你挺有启发，我想请你帮我两个小忙：
  关注我们的 GitHub 博客，让我们成为长期关系 
 把这篇文章分享给你的朋友 / 交流群，让更多的人看到，一起进步，一起成长！
  关注公众号 「画漫画的程序员」，公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程 
 
  
 
 本文著作权归作者所有，如若转载，请注明出处
转载请注明：文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com
标题：2020必收藏的一大波JS开发工具函数来了
链接：https://www.javascriptc.com/3990.html

2020必收藏的一大波JS开发工具函数来了

原文标题：2020必收藏的一大波JS开发工具函数来了 -Js中文网 · 前端进阶资源教程

前言