書到用時方恨少，一大波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
）；
驗證統一社會信用程式碼
/**
* @param { string } value
*/
export
const
isCreditCode
=
value
=>
/^
［
0
-
9
A
-
HJ
-
NPQRTUWXY
］{
2
}
\
d
{
6
}［
0
-
9
A
-
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
-
9
a
-
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
|
3
gp
|
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
*/
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
；
}
}；
未完待續。。。
參考
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
原出處：segmentfault
原文連結：書到用時方恨少，一大波JS開發工具函式來了 - 前端車站的技術分享 - SegmentFault 思否