1、延迟函数delay
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 )
2、分割指定长度的元素数组
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 ] ) )
console. log ( listChunk ( [ 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 ] , 3 ) )
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 ) )
3、获取数组交集
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 ] ) )
4、函数柯里化
const curring = fn => {
const { length } = fn
const 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 ) )
5、字符串前面空格去除与替换
const trimStart = str => str. replace ( new RegExp ( '^([\\s]*)(.*)$' ) , '$2' )
console. log ( trimStart ( ' abc ' ) )
console. log ( trimStart ( '123 ' ) )
6、字符串后面空格去除与替换
const trimEnd = str => str. replace ( new RegExp ( '^(.*?)([\\s]*)$' ) , '$1' )
console. log ( trimEnd ( ' abc ' ) )
console. log ( trimEnd ( '123 ' ) )
7、获取当前子元素是其父元素下子元素的排位
const getIndex = el => {
if ( ! el) {
return - 1
}
let index = 0
do {
index++
} while ( el = el. previousElementSibling) ;
return index
}
8、获取当前元素相对于document的偏移量
const getOffset = el => {
const {
top,
left
} = el. getBoundingClientRect ( )
const {
scrollTop,
scrollLeft
} = document. body
return {
top: top + scrollTop,
left: left + scrollLeft
}
}
9、获取元素类型
const dataType = obj => Object. prototype. toString. call ( obj) . replace ( /^\[object (.+)\]$/ , '$1' ) . toLowerCase ( ) ;
10、判断是否是移动端
const isMobile = ( ) => 'ontouchstart' in window
11、fade动画
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. opacity < 1 )
: ( + el. style. opacity > 0 ) ) {
requestAnimationFrame ( tick)
}
}
tick ( )
}
12、将指定格式的字符串解析为日期字符串
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' ) )
13、禁止网页复制粘贴
const html = document. querySelector ( 'html' )
html. oncopy = ( ) => false
html. onpaste = ( ) => false
14、input框限制只能输入中文
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)
}
15、去除字符串中的html代码
const removehtml = ( str = '' ) => str. replace ( /<[\/\!]*[^<>]*>/ig , '' )
console. log ( removehtml ( '<h1>哈哈哈哈<呵呵呵</h1>' ) )