bat好玩的代码_为了多点时间陪⼥朋友，我向BAT⼤佬跪求了
这15条JS技巧
(给程序员零距离加星标，零距离了解项⽬开发.)
为了减少加班，从⽽挤出更多的时间来陪⼥朋友，我就厚着脸⽪向⼀些BAT⼤佬求来了这15条JS技巧，现在分享给⼤家，千万别错过。正⽂
返回⽇期数列⾥与⽬标数列最近的⽇期下标
const getNearestDateIndex = (targetDate, dates) => {
if (!targetDate || !dates) {
throw new Error('Argument(s) is illegal !')
}
if (!dates.length) {
return -1
}
const distances = dates.map(date => Math.abs(date - targetDate))    return distances.indexOf(Math.min(...distances))
}
// e.g.
const targetDate = new Date(2019, 7, 20)
const dates = [
new Date(2018, 0, 1),
new Date(2019, 0, 1),
new Date(2020, 0, 1),
]
getNearestDateIndex(targetDate, dates) // 2
返回⽇期数列⾥最⼩的⽇期
const getMinDate = dates => {
if (!dates) {
throw new Error('Argument(s) is illegal !')
}
if (!dates.length) {
return dates
}
return new Date(Math.min.apply(null, dates)).toISOString()
}
// e.g.
const dates = [
new Date(2018, 3, 10),
new Date(2019, 3, 10),
new Date(2020, 3, 10),
]
getMinDate(dates) // 2018-04-09T16:00:00.000Z
打乱数组
const arrayShuffle = array => {
if (!Array.isArray(array)) {
throw new Error('Argument must be an array')
}
let end = array.length
if (!end) {
return array
}
while (end) {
let start = Math.floor(Math.random() * end--)
;[array[start], array[end]] = [array[end], array[start]]
}
return array
}
// e.g.
arrayShuffle([1, 2, 3])
判断是否⽀持webp图⽚格式
const canUseWebp = () => (ateElement('canvas').toDataURL('image/webp', 0.5).indexOf('data:image/webp') === 0)
// e.g.
javascript的特性
canUseWebp() // 新版的chrome⾥为true，⽕狐⾥为false
判断是否是url
const isUrl = str => /^(((ht|f)tps?):\/\/)?[\w-]+(\.[\w-]+)+([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?$/.test(str)
// e.g.
isUrl('www.baidu') // true
isUrl('www') // false
判断是否是emoji
const isEmoji = str => /(\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f\ude80-\udeff])|[\u2600-\u2B55]/g.test(str)
// e.g.
isEmoji('?') // true
isEmoji('earth') // false
连字符转驼峰
const toCamelCase = (str = '', separator = '-') => {
if (typeof str !== 'string') {
throw new Error('Argument must be a string')
}
if (str === '') {
return str
}
const newExp = new RegExp('\\-\(\\w\)', 'g')
place(newExp, (matched, $1) => {
return $1.toUpperCase()
})
}
// e.g.
toCamelCase('hello-world') // helloWorld
驼峰转连字符
const fromCamelCase = (str = '', separator = '-') => {
if (typeof str !== 'string') {
throw new Error('Argument must be a string')
}
if (str === '') {
return str
}
place(/([A-Z])/g, `${separator}$1`).toLowerCase() }
// e.g.
fromCamelCase('helloWorld') // hello-world
等级判断
const getLevel = (value = 0, ratio = 50, levels = '⼀⼆三四五') => {    if (typeof value !== 'number') {
throw new Error('Argument must be a number')
}
const levelHash = '⼀⼆三四五'.split('')
const max = levelHash[levelHash.length - 1]
return levelHash[Math.floor(value / ratio)] || max
}
// e.g.
getLevel1(0) // ⼀
getLevel1(40) // ⼀
getLevel(77) // ⼆
事件模拟触发
const event = new Event('click')
const body = document.querySelector('body')
body.addEventListener('click', ev => {
console.log('biu')
}, false)
body.addEventListener('touchmove', ev => {
body.dispatchEvent(event)
}, false)
// 这时候在移动端下滑动⼿指的时候就会触发click事件
判断dom是否相等
const isEqualNode = (dom1, dom2) => dom1.isEqualNode(dom2) /*
这是第⼀个div
这是第⼆个div
这是第⼀个div
*/
const [⼀, ⼆, 三,] = ElementsByTagName('div')
// e.g.
isEqualNode(⼀, ⼆) // false
isEqualNode(⼀, 三) // true
isEqualNode(⼆, 三) // false
多属性双向绑定
/*
*/
const keys = Object
.values(box.attributes)
.map(({name, value}) => ({name, value}))
const cacheData = {}
const properties = duce((acc, cur) => {
const obj = {}
cacheData[cur.name] = box.attributes[cur.name]
obj[cur.name] = {
get() {
return cacheData[cur.name]
},
set(data) {
output.value = `${cur.name}: ${data}`
cacheData[cur.name] = data
}
}
return {
...acc,
...obj
}
}, {})
Object.defineProperties(box, properties)
/
/ 当我们修改input相应的属性时，output⽂字就会变成修改的内容

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。