原理：將數字轉成ASCII碼對應的十進制

JavaScript API

String.fromCharCode(number)

示例

let ch1 = [];   //存儲大寫字母
let ch2 = [];   //存儲小寫字母

for(let i=0; i<26; i++) {
  ch1.push(String.fromCharCode(i+65));//大寫

  ch2.push(String.fromCharCode(i + 97));//小寫
}

console.log(ch1);
console.log(ch2);

拓展：ASCII

什么是ASCII？

ASCII（American Standard Code for Information Interchange， 美國標準信息交換代碼）是基于拉丁字母的一套電腦編碼系統，主要用于顯示現代英語和其他西歐語言。它是現今最通用的單字節編碼系統，并等同于國際標準ISO/IEC 646。

ASCII 產生原因

在計算機中，所有的數據在存儲和運算時都要使用二進制數表示（因為計算機用高電平和低電平分別表示1和0），例如，像a、b、c、d這樣的52個字母（包括大寫）以及0、1等數字還有一些常用的符號（例如*、#、@等）在計算機中存儲時也要使用二進制數來表示，而具體用哪些二進制數字表示哪個符號，當然每個人都可以約定自己的一套（這就叫編碼），而大家如果要想互相通信而不造成混亂，那么大家就必須使用相同的編碼規則，于是美國有關的標準化組織就出臺了ASCII編碼，統一規定了上述常用符號用哪些二進制數來表示。

美國信息交換標準代碼是由美國國家標準學會(American National Standard Institute , ANSI )制定的，是一種標準的單字節字符編碼方案，用于基于文本的數據。它最初是美國國家標準，供不同計算機在相互通信時用作共同遵守的西文字符編碼標準，后來它被國際標準化組織（International Organization for Standardization, ISO）定為國際標準，稱為ISO 646標準。適用于所有拉丁文字字母 。

ASCII 大小規則

常見ASCII碼的大小規則：0~9<A~Z<a~z。

1. 數字比字母要小。如 “7”<“F”；
2. 數字0比數字9要小，并按0到9順序遞增。如 “3”<“8” ；
3. 字母A比字母Z要小，并按A到Z順序遞增。如“A”<“Z” ；
4. 同個字母的大寫字母比小寫字母要小32。如“A”<“a” 。

幾個常見字母的ASCII碼大小： “A”為65；“a”為97；“0”為 48。

ASCII 存在的問題

在英語中，用128個符號編碼便可以表示所有，但是用來表示其他語言，128個符號是不夠的。比如，在法語中，字母上方有注音符號，它就無法用 ASCII 碼表示。于是，一些歐洲國家就決定，利用字節中閑置的最高位編入新的符號。比如，法語中的é的編碼為130（二進制10000010）。這樣一來，這些歐洲國家使用的編碼體系，可以表示最多256個符號。

但是，這里又出現了新的問題。不同的國家有不同的字母，因此，哪怕它們都使用256個符號的編碼方式，代表的字母卻不一樣。比如，130在法語編碼中代表了é，在希伯來語編碼中卻代表了字母Gimel (?)，在俄語編碼中又會代表另一個符號。但是不管怎樣，所有這些編碼方式中，0--127表示的符號是一樣的，不一樣的只是128--255的這一段 。

至于亞洲國家的文字，使用的符號就更多了，漢字就多達10萬左右。一個字節只能表示256種符號，肯定是不夠的，就必須使用多個字節表達一個符號。比如，簡體中文常見的編碼方式是 GB2312，使用兩個字節表示一個漢字，所以理論上最多可以表示 256 x 256 = 65536 個符號。

ASCII 標準表

ASCII碼表具體如下所示：

• 展示的是二級標題
• 二級標題三級標題
• markdown的段落格式段落字體分割線刪除線下劃線腳注
• MarkDown錨點的使用
• MarkDown插入視頻
• MarkDown列表
• 列表嵌套
• MarkDown區塊
• 區塊中使用列表
• 列表中使用區塊
• 事項清單
• MarkDown代碼
• 代碼區塊
• MarkDown鏈接
• 高級鏈接
• MarkDown圖片
• MarkDwon使用表格
• 表格的對齊方式支持html標簽轉義

markdown初級

    我展示的是一級標題
    =
    我展示的是二級標題
    -

我展示的是一級標題

我展示的是二級標題

總結： 在文字下方一行寫1 or n個等于號表示一級標題 在文字下方一行寫1 or n個減號號表示二級標題

    # 一級標題
    ## 二級標題
    ### 三級標題
    #### 四級標題
    ##### 五級標題
    ###### 六級標題
    #######

一級標題

二級標題

三級標題

四級標題

五級標題

六級標題

####### 不支持七級標題

總結：一共只有六級標題

markdown的段落格式

段落

開啟新的段落的兩種方式
后面加上兩個空格然后回車（enter） or空一行 這樣的

字體

    *斜體文本*
    _斜體文本_
    **粗體文本**
    __粗體文本__
    ***粗斜體文本***
    ___粗斜體文本___

    ###分割線
    ***

斜體文本
斜體文本
粗體文本
粗體文本
粗斜體文本
粗斜體文本

分割線

    ****

    *     *      *
	***

    - - -

    ----------
    *
    **

*
**
總結：3 or n(n>=3)

刪除線

		RUNOOB.COM
		GOOGLE.COM
		~~BAIDU.COM~~  

RUNOOB.COM
GOOGLE.COM BAIDU.COM

總結：飄號鍵盤數字1的左邊

下劃線

	<u>下劃線文本</u>

下劃線文本

腳注

    創建腳注格式類似這樣 [^RUNOOB]。

    [^RUNOOB]: 菜鳥教程 -- 學的不僅是技術，更是夢想！！！

創建腳注格式類似這樣 [^RUNOOB]。

[^RUNOOB]: 菜鳥教程 -- 學的不僅是技術，更是夢想！！！

總結：腳注對文本的補充說明。

MarkDown錨點的使用

    MarkDown不支持錨點，所以只能借助html的錨點有兩種方式
    <a id="jump1">標題</a>
    <span id="jump2">標題二</span>

    [標題](#jump1)
    [標題二](#jump2)

MarkDown不支持錨點，所以只能借助html的錨點有兩種方式
標題
標題二

標題
標題二

總結：標題必須添加a標簽或者span標簽才行而且必須指定id

MarkDown插入視頻

html的Iframe標簽，可以參考w3c或者碼農教程 兼容性不是很好

    <iframe src="http://www.manongjc.com/" width="400" height="400" scrolling="yes" />

    <iframe src="//player.bilibili.com/player.html?aid=684723947&bvid=BV1vU4y1971F&cid=735989487&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

    <video controls height='100%' width='100%' preload="none" poster="http://media.w3.org/2010/05/sintel/poster.png" src="https://encooacademy.oss-cn-shanghai.aliyuncs.com/activity/OpenBrowser.mp4"></video>

MarkDown列表

Markdown 支持有序列表和無序列表。

無序列表使用星號(*)、加號(+)或是減號(-)作為列表標記，這些標記后面要添加一個空格，然后再填寫內容：

* 第一項
* 第二項
* 第三項

+ 第一項
+ 第二項
+ 第三項

- 第一項
- 第二項
- 第三項

* 第一項
* 第二項
* 第三項

• 第一項
• 第二項
• 第三項

• 第一項
• 第二項
• 第三項

• 第一項
• 第二項
• 第三項

• 第一項
• 第二項
• 第三項

有序列表使用數字并加上 . 號來表示，如：

1. 第一項
2. 第二項
3. 第三項

1. 第一項
2. 第二項
3. 第三項

列表嵌套

  1. 第一項：
      - 第一項嵌套的第一個元素
      + 第一項嵌套的第二個元素
      * 第一項嵌套的第三個元素

  2. 第二項：
      - 第二項嵌套的第一個元素
      - 第二項嵌套的第二個元素
  * 要有縮進 

1. 第一項：
2. 第一項嵌套的第一個元素
3. 第一項嵌套的第二個元素
4. 第一項嵌套的第三個元素
5. 第二項：
6. 第二項嵌套的第一個元素
7. 第二項嵌套的第二個元素

• 要有縮進 總結：（+），（-），（*），（數字點）后面都要加一個空格，否則無效

MarkDown區塊

Markdown 區塊引用是在段落開頭使用 > 符號 ，然后后面緊跟一個空格符號：

    > 區塊引用
    > 菜鳥教程
    > 學的不僅是技術更是夢想
    另外區塊是可以嵌套的，一個 > 符號是最外層，兩個 > 符號是第一層嵌套，以此類推：
    > 最外層
    > > 第一層嵌套
    > > > 第二層嵌套
    犯得上發生
    大師傅士大夫
    > > 回到第二層

區塊引用 菜鳥教程 學的不僅是技術更是夢想 另外區塊是可以嵌套的，一個 > 符號是最外層，兩個 > 符號是第一層嵌套，以此類推： 最外層

第一層嵌套

第二層嵌套 犯得上發生 大師傅士大夫 回到第二層

區塊中使用列表

    > + 第一項   
    > * 第二項

第一項

第二項

列表中使用區塊

* 第一項
    > 第一項的內容
* 第二項
    > 第二項的內容

• 第一項 第一項的內容
• 第二項 第二項的內容

事項清單

to-do list - [x] 已完成項目 - [x] 已完成項目1 - [x] 已完成項目2 - [ ] 代辦事項 - [ ] 代辦事項1 - [ ] 代辦事項2 - [ ] 待辦事項3

to-do list

• [x] 已完成項目
• [x] 已完成項目1
• [x] 已完成項目2
• [ ] 代辦事項
• [ ] 代辦事項1
• [ ] 代辦事項2
• [ ] 待辦事項3

MarkDown代碼

如果是段落上的一個函數或片段的代碼可以用反引號把它包起來(`)，例如： printf() 函數

總結：反引號英文下鍵盤數字1左邊

代碼區塊

• 方法一 代碼區塊使用 4 個空格或者兩個個制表符（Tab 鍵）。 class Main{ public static void main(String args[]){ System.out.println("Hello MarkDown"); } }
• 方法二 你也可以用 ``` 包裹一段代碼，并指定一種語言（也可以不指定）：

```java

class Main{ public Main(){

}

} ```

```c++

abc

```

class Main{
    public Main(){

    }
}

abc

總結：方法二結束也要```,更容易區分代碼塊

MarkDown鏈接

鏈接使用方法如下： [鏈接名稱](鏈接地址)

或者

<鏈接地址>

例子：百度 or http://www.baidu.com鏈接[^footnote] [^footnote]: 直接使用鏈接地址

總結：腳注[^變量名] [^變量名]: 必須以這種格式。

高級鏈接

我們可以通過變量來設置一個鏈接，變量賦值在文檔末尾進行：

    這個鏈接用 1 作為網址變量 [Google][1]

    [1]: http://www.google.com/

這個鏈接用 runoob 作為網址變量 Runoob BaiDu 然后在文檔的結尾為變量賦值（網址）

MarkDown圖片

Markdown 圖片語法格式如下：

     \![alt 屬性文本](圖片地址)
     \![alt 屬性文本](圖片地址 "可選標題")

屬性文本：圖片鏈接失效時顯示的文字。
可選標題：鼠標懸停時，顯示的文字。

MarkDwon使用表格

Markdown 制作表格使用 | 來分隔不同的單元格，使用 - 來分隔表頭和其他行。

語法格式如下 | 表頭 | 表頭 | | --- | ---- | | 單元格 | 單元格 | | 單元格 | 單元格 |

表頭 表頭 單元格 單元格 單元格 單元格

表格的對齊方式

    | 左對齊 | 右對齊 | 居中 |
    | :----   | ----:   | :---:|
    | 單元格   | 單元格 | 單元格 |

左對齊 右對齊 居中 單元格 單元格 單元格

左對齊 右對齊 居中對齊 單元格 單元格 單元格 單元格 單元格 單元格

MarkDown高級技巧

支持html標簽

不在 Markdown 涵蓋范圍之內的標簽，都可以直接在文檔里面用 HTML 撰寫。

目前支持的 HTML 元素有：<kbd> <b> <i> <em> <sup> <sub> <br>等 ，如：

    使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重啟電腦

使用 Ctrl+Alt+Del 重啟電腦

轉義

Markdown 使用了很多特殊符號來表示特定的意義，如果需要顯示特定的符號則需要使用轉義字符，Markdown 使用反斜杠轉義特殊字符：

文本加粗 ** 正常顯示星號 **

Markdown 支持以下這些符號前面加上反斜杠來幫助插入普通的符號：

\ 反斜線
` 反引號
* 星號
_ 下劃線
{} 花括號
[] 方括號
() 小括號
# 井字號
+ 加號
- 減號
. 英文句點
! 感嘆號

言

在我們日常開發的時候，可能會遇到各種各樣的需求，但是自己一時半會兒可能找不到合適的辦法去解決。書到用時方恨少，下面的這些JavaScript的工具函數可能就會派上大用場了，我們可以進行復用，提高我們的工作效率。

我把下面的方法都大致分了個類放在了我的GitHub上。大家可以clone下來直接使用，也可以在需要用到時在里面去查找，善用ctrl+F。
這個倉庫也會持更新的，如果里面沒有，但是需要用到的工具函數，大家也可以在issues提出來，說不定就幫到了別人喲~

大家學完知識后別忘了順手再下載Freemen App投遞下簡歷，暫時沒求職意向的小伙伴也可以先囤下崗位，跪求各位程序員大佬動動手指，讓小編可以加個雞腿。

正則校驗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);

驗證統一社會信用代碼

/**
 *  @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"文件"路徑

/**
 *  @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);

驗證座機電話(國內),如: 0341-86091234

/**
 * @param { string } value
 */
export const isLandlineTelephone = value => /\d{3}-\d{8}|\d{4}-\d{7}/g.test(value);

驗證身份證號(1代,15位數字)

/**
 * @param { string } value
 */
export const isIDCardOld = value => /^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$/g.test(value);

驗證身份證號(2代,18位數字),最后一位是校驗位,可能為數字或字符X

/**
 * @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);

驗證身份證號, 支持1/2代(15位/18位數字)

/**
 * @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);

驗證護照（包含香港、澳門）

/**
 * @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);

驗證帳號是否合法(字母開頭，允許5-16字節，允許字母數字下劃線組合

/**
 * @param { string } value
 */
export const isWebAccount = value => /^[a-zA-Z]\w{4,15}$/g.test(value);

驗證中文/漢字

/**
 * @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);

驗證小數

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

驗證數字

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

驗證qq號格式

/**
 * @param { string } value
 */
export const isQQNum = value => /^[1-9][0-9]{4,10}$/g.test(value);

驗證數字和字母組成

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

驗證英文字母

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

驗證大寫英文字母

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

驗證小寫英文字母

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

瀏覽器操作相關browser工具函數

返回當前url

export const currentURL = () => window.location.href;

獲取url參數（第一種）

/**
 * @param {*} name
 * @param {*} 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[2]);
    return null;
}

獲取url參數（第二種）

/**
 * @param {*} name
 * @param {*} origin
 */
export function getUrlParams(name, origin = null) {
    let url = location.href;
    let temp1 = url.split('?');
    let pram = temp1[1];
    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[1];
        obj[key] = value;
    }
    return obj[name];
}

修改url中的參數

/**
 * @param { string } paramName
 * @param { string } replaceWith
 */
export function replaceParamVal(paramName,replaceWith) {
    var oUrl = location.href.toString();
    var re=eval('/('+ paramName+'=)([^&]*)/gi');
    location.href = oUrl.replace(re,paramName+'='+replaceWith);
    return location.href;
}

刪除url中指定的參數

/**
 * @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[i][1];
        }
        delete obj[name];
        var url = baseUrl + JSON.stringify(obj).replace(/[\"\{\}]/g,"").replace(/\:/g,"=").replace(/\,/g,"&");
        return url
    }
}

獲取窗口可視范圍的高度

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;
}

獲取窗口可視范圍寬度

export function getPageViewWidth() {
    let d = document,
        a = d.compatMode == "BackCompat" ? d.body : d.documentElement;
    return a.clientWidth;
}

獲取窗口寬度

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);
}

獲取窗口尺寸

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
            }
        }
    }
}

獲取滾動條距頂部高度

export function getPageScrollTop() {
    let a = document;
    return a.documentElement.scrollTop || a.body.scrollTop;
}

獲取滾動條距左邊的高度

export function getPageScrollLeft() {
    let a = document;
    return a.documentElement.scrollLeft || a.body.scrollLeft;
}

開啟全屏

/**
 * @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()
    }
}

關閉全屏

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()
    }
}

返回當前滾動條位置

export const getScrollPosition = (el = window) => ({
    x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
    y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
});

滾動到指定元素區域

export const smoothScroll = element =>{
    document.querySelector(element).scrollIntoView({
        behavior: 'smooth'
    });
};

平滑滾動到頁面頂部

export const scrollToTop = () => {
    const c = document.documentElement.scrollTop || document.body.scrollTop;
    if (c > 0) {
        window.requestAnimationFrame(scrollToTop);
        window.scrollTo(0, c - c / 8);
    }
};

http跳轉https

export const httpsRedirect = () => {
    if (location.protocol !== 'https:') location.replace('https://' + location.href.split('//')[1]);
};

檢查頁面底部是否可見

export const bottomVisible = () =>{
    return document.documentElement.clientHeight + window.scrollY >=
        (document.documentElement.scrollHeight || document.documentElement.clientHeight);
};

打開一個窗口

/**
 * @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();
    }
}

自適應頁面（rem）

/**
 * @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");
}

日期工具date工具函數

可以參考我的另一篇文章《前端的各種日期操作》，或者直接到我的GitHub查看

瀏覽器存儲相關storage工具函數

主要為瀏覽器存儲方面的工具函數，大部分搬運自大神火狼1

localStorage 存貯

/**
 * 目前對象值如果是函數 、RegExp等特殊對象存貯會被忽略
 * @param { String } key  屬性
 * @param { string } value 值
 */
export const localStorageSet = (key, value) => {
    if (typeof (value) === 'object') value = JSON.stringify(value);
    localStorage.setItem(key, value)
};

localStorage 獲取

/**
 * @param {String} key  屬性
 */
export const localStorageGet = (key) => {
    return localStorage.getItem(key)
};

localStorage 移除

/**
 * @param {String} key  屬性
 */
export const localStorageRemove = (key) => {
    localStorage.removeItem(key)
};

localStorage 存貯某一段時間失效

/**
 * @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)
};

sessionStorage 存貯

/**
 * @param {String} key  屬性
 * @param {*} value 值
 */
export const sessionStorageSet = (key, value) => {
    if (typeof (value) === 'object') value = JSON.stringify(value);
    sessionStorage.setItem(key, value)
};

sessionStorage 獲取

/**
 * @param {String} key  屬性
 */
export const sessionStorageGet = (key) => {
    return sessionStorage.getItem(key)
};

sessionStorage 刪除

/**
 * @param {String} key  屬性
 */
export const sessionStorageRemove = (key) => {
    sessionStorage.removeItem(key)
};

sessionStorage 存貯某一段時間失效

/**
 * @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)
};

cookie 存貯

/**
 * @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 = `${key}=${value};expires=${d.toUTCString()}`
};

cookie 獲取

/**
 * @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[1];
            break
        }
    }
    return cookieValue
};

cookie 刪除

/**
 * @param {String} key  屬性
 */
export const cookieRemove = (key) => {
    document.cookie = `${encodeURIComponent(key)}=;expires=${new Date()}`
};

更多的工具函數

這里包含了平時可能常用的工具函數，包含數字，字符串，數組和對象等等操作。

金錢格式化，三位加逗號

/**
 *  @param { number } num
 */
export const formatMoney = num => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

截取字符串并加身略號

export function subText(str, length) {
    if (str.length === 0) {
        return '';
    }
    if (str.length > length) {
        return str.substr(0, length) + "...";
    } else {
        return str;
    }
}

獲取文件base64編碼

/**
 * @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('/')[1].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('異常文件，請重新選擇');
        }
    })
}

B轉換到KB,MB,GB并保留兩位小數

/**
 * @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';
    }
}

base64轉file

/**
 *  @param { base64 } base64
 *  @param { string } filename 轉換后的文件名
 */
export const base64ToFile = (base64, filename )=> {
    let arr = base64.split(',');
    let mime = arr[0].match(/:(.*?);/)[1];
    let suffix = mime.split('/')[1] ;// 圖片后綴
    let bstr = atob(arr[1]);
    let n = bstr.length;
    let u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
    }
    return new File([u8arr], `${filename}.${suffix}`, { type: mime })
};

base64轉blob

/**
 *  @param { base64 } base64
 */
export const base64ToBlob = base64 => {
    let arr = base64.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
};

blob轉file

/**
 *  @param { blob } blob
 *  @param { string } fileName
 */
export const blobToFile = (blob, fileName) => {
    blob.lastModifiedDate = new Date();
    blob.name = fileName;
    return blob;
};

file轉base64

/**
 * @param { * } file 圖片文件
 */
export const fileToBase64 = file => {
    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function (e) {
        return e.target.result
    };
};

遞歸生成樹形結構

export function getTreeData(data, pid, pidName = 'parentId', idName = 'id', childrenName = 'children', key) {
    let arr = [];

    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;
}

遍歷樹節點

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);
        }
    }
}

追溯父節點

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; 
}

尋找所有子節點

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;
}

根據pid生成樹形結構

/**
 *  @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) }));
};

查詢數組中是否存在某個元素并返回元素第一次出現的下標

/** 
 * @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;
}

Windows根據詳細版本號判斷當前系統名稱

/**
 * @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"
    }
}

判斷手機是Andoird還是IOS

/**
 *  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;
}

函數防抖

/**
 * @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;

        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);
        }
    }
}

函數節流

/**
 * @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();

            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)
            }
        }

    }
}

判斷數據類型

/**
 * @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'
    };

    if(target === null) {
        return 'null';
    }else if(ret == "object"){
        let str = Object.prototype.toString.call(target);
        return template[str];
    }else{
        return ret;
    }
}

生成指定范圍隨機數

/**
 * @param { number } min 
 * @param { number } max 
 */
export const RandomNum = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;

數組亂序

/**
 * @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
}

數組交集

/**
 * @param { array} arr1
 * @param { array } arr2
 */
export const similarity = (arr1, arr2) => arr1.filter(v => arr2.includes(v));

數組中某元素出現的次數

/**
 * @param { array } arr
 * @param {*} value
 */
export function countOccurrences(arr, value) {
    return arr.reduce((a, v) => v === value ? a + 1 : a + 0, 0);
}

加法函數（精度丟失問題）

/**
 * @param { number } arg1
 * @param { number } arg2
 */
export function add(arg1, arg2) {
    let r1, r2, m;
    try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 }
    try { r2 = arg2.toString().split(".")[1].length } catch (e) { r2 = 0 }
    m = Math.pow(10, Math.max(r1, r2));
    return (arg1 * m + arg2 * m) / m
}

減法函數（精度丟失問題）

/**
 * @param { number } arg1
 * @param { number } arg2
 */
export function sub(arg1, arg2) {
    let r1, r2, m, n;
    try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 }
    try { r2 = arg2.toString().split(".")[1].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));
}

除法函數（精度丟失問題）

/**
 * @param { number } num1
 * @param { number } num2
 */
export function division(num1,num2){
    let t1,t2,r1,r2;
    try{
        t1 = num1.toString().split('.')[1].length;
    }catch(e){
        t1 = 0;
    }
    try{
        t2=num2.toString().split(".")[1].length;
    }catch(e){
        t2=0;
    }
    r1=Number(num1.toString().replace(".",""));
    r2=Number(num2.toString().replace(".",""));
    return (r1/r2)*Math.pow(10,t2-t1);
}

乘法函數（精度丟失問題）

/**
 * @param { number } num1
 * @param { number } num2
 */
export function mcl(num1,num2){
    let m=0,s1=num1.toString(),s2=num2.toString();
    try{m+=s1.split(".")[1].length}catch(e){}
    try{m+=s2.split(".")[1].length}catch(e){}
    return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m);
}

遞歸優化（尾遞歸）

/**
 * @param { function } f
 */
export function tco(f) {
    let value;
    let active = false;
    let accumulated = [];

    return function accumulator() {
        accumulated.push(arguments);
        if (!active) {
            active = true;
            while (accumulated.length) {
                value = f.apply(this, accumulated.shift());
            }
            active = false;
            return value;
        }
    };
}

生成隨機整數

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
    }
}

去除空格

/**
 * @param { string } str 待處理字符串
 * @param  { number } type 去除空格類型 1-所有空格  2-前后空格  3-前空格 4-后空格 默認為1
 */
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*$)/g, "");
        case 3:
            return str.replace(/(^\s)/g, "");
        case 4:
            return str.replace(/(\s$)/g, "");
        default:
            return str;
    }
}

大小寫轉換

/**
 * @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;
    }
}

隨機16進制顏色 hexColor

/**
 * 方法一
 */
export function hexColor() {

    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;
}

隨機16進制顏色 randomHexColorCode

/**
 * 方法二
 */
export const randomHexColorCode = () => {
    let n = (Math.random() * 0xfffff * 1000000).toString(16);
    return '#' + n.slice(0, 6);
};

轉義html(防XSS攻擊)

export const escapeHTML = str =>{
    str.replace(
        /[&<>'"]/g,
        tag =>
            ({
                '&': '&',
                '<': '<',
                '>': '>',
                "'": ''',
                '"': '"'
            }[tag] || tag)
    );
};

檢測移動/PC設備

export const detectDeviceType = () => { return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? 'Mobile' : 'Desktop'; };

隱藏所有指定標簽

/**
 * 例: hide(document.querySelectorAll('img'))
 */
export const hideTag = (...el) => [...el].forEach(e => (e.style.display = 'none'));

返回指定元素的生效樣式

/**
 * @param { element} el  元素節點
 * @param { string } ruleName  指定元素的名稱
 */
export const getStyle = (el, ruleName) => getComputedStyle(el)[ruleName];

檢查是否包含子元素

/**
 * @param { element } parent
 * @param { element } child
 * 例：elementContains(document.querySelector('head'), document.querySelector('title')); // true
 */
export const elementContains = (parent, child) => parent !== child && parent.contains(child);

數字超過規定大小加上加號“+”，如數字超過99顯示99+

/**
 * @param { number } val 輸入的數字
 * @param { number } maxNum 數字規定界限
 */
export const outOfNum = (val, maxNum) =>{
    val = val ? val-0 :0;
    if (val > maxNum ) {
        return `${maxNum}+`
    }else{
        return val;
    }
};

未完待續...

最后

上面的工具函數，一部分來自于自己平時的總結，一部分來自于上面的參考文章,，感謝大神們的總結。如果對你有幫助，為了方便查閱，不妨在GitHub上點個star~

這個倉庫會持續更新，如果你有更好的點子，或者沒有找到你想要的工具函數，歡迎issues~

文中若有不準確或錯誤的地方，歡迎指出，更歡迎issues~

原作者姓名： xmanlin
原出處：segmentfault