辛苦總結的15條非常高效的JS技巧，掌握這15個JS技巧，可以少加點班，多抽出點時間來陪女朋友，她不香麼！
正文
延遲函數delay
<code>const
delay =ms
=>new
Promise
((
resolve, reject
) => setTimeout(resolve, ms))const
getData =status
=>new
Promise
((
resolve, reject
) => { status ? resolve('done'
) : reject('fail'
) })const
getRes =async
(data) => {try
{const
res =await
getData(data)const
timestamp =new
Date
().getTime()await
delay(1000
)console
.log(res,new
Date
().getTime() - timestamp) }catch
(error) {console
.log(error) } } getRes(true
) /<code>
分割指定長度的元素數組
<code>const
listChunk
=
(list,
size
=
1
,
cacheList
=
[])
=>
{
const
tmp
=
[...list]
if
(size
0
)
{
return
cacheList
}
while
(tmp.length)
{
cacheList.push(tmp.splice(0,
size))
}
return
cacheList
}
console.log(listChunk([1,
2
,
3
,
4
,
5
,
6
,
7
,
8
,
9
]))
//
[[1],
[2],
[3],
[4],
[5],
[6],
[7],
[8],
[9]]
console.log(listChunk([1,
2
,
3
,
4
,
5
,
6
,
7
,
8
,
9
],
3
))
//
[[1,
2
,
3
],
[4,
5
,
6
],
[7,
8
,
9
]]
console.log(listChunk([1,
2
,
3
,
4
,
5
,
6
,
7
,
8
,
9
],
0
))
//
[]
console.log(listChunk([1,
2
,
3
,
4
,
5
,
6
,
7
,
8
,
9
],
-1
))
//
[]
/<code>
獲取數組交集
<code>const
intersection =(
list, ...args
) => list.filter(item
=> args.every(list
=> list.includes(item)))console
.log(intersection([2
,1
], [2
,3
]))console
.log(intersection([1
,2
], [3
,4
])) /<code>
函數柯里化
<code>const
curring =fn
=> {const
{ length } = fnconst
curried =(
...args
) => {return
(args.length >= length ? fn(...args) :(
...args2
) => curried(...args.concat(args2))) }return
curried }const
listMerge =(
a, b, c
) => [a, b, c]const
curried = curring(listMerge)console
.log(curried(1
)(2
)(3
))console
.log(curried(1
,2
)(3
))console
.log(curried(1
,2
,3
)) /<code>
字符串前面空格去除與替換
<code>const
trimStart =str
=> str.replace(new
RegExp
('^([\\s]*)(.*)$'
),'$2'
)console
.log(trimStart(' abc '
))console
.log(trimStart('123 '
)) /<code>
字符串後面空格去除與替換
<code>const
trimEnd =str
=> str.replace(new
RegExp
('^(.*?)([\\s]*)$'
),'$1'
)console
.log(trimEnd(' abc '
))console
.log(trimEnd('123 '
)) /<code>
獲取當前子元素是其父元素下子元素的排位
<code>const
getIndex =el
=> {if
(!el) {return
-1
}let
index =0
do
{ index++ }while
(el = el.previousElementSibling);return
index } /<code>
獲取當前元素相對於document的偏移量
<code>const
getOffset =el
=> {const
{ top, left } = el.getBoundingClientRect()const
{ scrollTop, scrollLeft } =document
.bodyreturn
{top
: top + scrollTop,left
: left + scrollLeft } } /<code>
獲取元素類型
<code>const
dataType =obj
=>Object
.prototype.toString.call(obj).replace(/^\[object (.+)\]$/
,'$1'
).toLowerCase(); /<code>
判斷是否是移動端
<code> const isMobile =()
=>'ontouchstart'
in
window
/<code>
fade動畫
<code>const
fade = (el,type
='in'
) { el.style.opacity = (type
==='in'
?0
:1
)let
last = +new
Date
()const
tick =()
=> {const
opacityValue = (type
==='in'
? (new
Date
() - last) /400
: -(new
Date
() - last) /400
) el.style.opacity = +el.style.opacity + opacityValue last = +new
Date
()if
(type
==='in'
? (+el.style.opacity1
) : (+el.style.opacity >0
)) { requestAnimationFrame(tick) } } tick() } /<code>
將指定格式的字符串解析為日期字符串
<code>const
dataPattern =(
str, format =
'-'
) => {if
(!str) {return
new
Date
() }const
dateReg =new
RegExp
(`^(\\d{2})
${format}
(\\d{2})${format}
(\\d{4})$`)const
[, month, day, year] = dateReg.exec(str)return
new
Date
(`
${month}
,${day}
${year}
`) }console
.log(dataPattern('12-25-1995'
)) /<code>
禁止網頁複製粘貼
<code> const html =document
.querySelector('html'
) html.oncopy =()
=>false
html.onpaste =()
=>false
/<code>
input框限制只能輸入中文
<code>const
input =document
.querySelector('input[type="text"]'
)const
clearText =target
=> {const
{ value } = target target.value = value.replace(/[^\u4e00-\u9fa5]/g
,''
) } input.onfocus =(
{target}
) => { clearText(target) } input.onkeyup =(
{target}
) => { clearText(target) } input.onblur =(
{target}
) => { clearText(target) } input.oninput =(
{target}
) => { clearText(target) } /<code>
去除字符串中的html代碼
<code>const
removeHTML =(
str =
''
) => str.replace(/]*>/ig
,''
)console
.log(removeHTML('
哈哈哈哈'
)) /<code>
寫在後面
以上15個技巧都是我在日常開發中經常用到的一些代碼片段，善用這些技巧，可以大大減少我們的開發時間。如果此時正在看文章的你也有類似的技巧心得，不妨在下方留言來分享給大家。
