Published 2021-01-14
21个用于日常开发的有用JavaScript片段
输入值数字化
const checkMyValueType = (event) => {
console.log(typeof event.target.value) // string
console.log(typeof event.target.valueAsNumber) // number
}
;<input type="number" onkeyup="checkMyValueType(event)" />
复制输入框值到粘贴板
function copyToClipboard(inputID) {
navigator.clipboard.writeText(document.querySelector(inputID).value)
}
检查窗口是否可见
const isBrowserTabInView = () => document.hidden
isBrowserTabInView() // returns true or false depending if tab is in view / focus
布尔值取反
let myBool = false
myBool = !myBool
console.log(myBool) // true
myBool = !myBool
console.log(myBool) // false
检查值是否是偶数
const isEven = (num) => num % 2 === 0
console.log(isEven(2)) // true
console.log(isEven(3)) // false
检查日期是否是工作日
const isWeekday = (d) => d.getDay() % 6 !== 0
console.log(isWeekday(new Date(2021, 0, 11))) // true (Monday)
console.log(isWeekday(new Date(2021, 0, 10))) // false (Sunday)
日期加减
const addDaysToDate = (date, n) => {
date.setDate(date.getDate() + n)
return date.toISOString().split('T')[0]
}
addDaysToDate('2021-0-10', 10) // "2021-01-20"
addDaysToDate('2021-0-10', -10) // '2020-12-31'
获取时分秒
const timeFromDate = (date) => date.toTimeString().slice(0, 8)
console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0)))
// "17:30:00"
console.log(timeFromDate(new Date(2021, 0, 10, 5, 56, 44)))
// "05:56:44"
计算两个日期之间的工作日数
const countWeekDaysBetween = (startDate, endDate) =>
Array.from({length: (endDate - startDate) / (1000 * 3600 * 24)}).reduce(
(count) => {
if (startDate.getDay() % 6 !== 0) {
count++
}
startDate = new Date(startDate.setDate(startDate.getDate() + 1))
return count
},
0
)
countWeekDaysBetween(new Date(2021, 0, 10), new Date(2021, 0, 20)) // 7
countWeekDaysBetween(new Date(2021, 1, 10), new Date(2021, 2, 18)) // 26
检查 localstorage 是否可用
const isLocalStorageEnabled = () => {
try {
const key = `__storage__test`
window.localStorage.setItem(key, null)
window.localStorage.removeItem(key)
return true
} catch (e) {
return false
}
}
isLocalStorageEnabled() // true, if localStorage is accessible
计算函数等花费时间
startTime = performance.now()
anyMethodOrCode()
const endTime = performance.now()
console.log(endTime - startTime + ' milliseconds.') // (Time in milliseconds)
捕获右键点击
window.oncontextmenu = () => {
console.log('right click')
}
只触发一次事件
const myButton = document.getElementById('myBtn')
const myClickFunction = () => {
console.log('this click will only get called once')
}
myButton.addEventListener('click', myClickHandler, {
once: true
})
滚动到顶部
const scrollToTopOfDocument = () => {
const c = document.documentElement.scrollTop || document.body.scrollTop
if (c > 0) {
window.requestAnimationFrame(scrollToTop)
window.scrollTo(0, c - c / 8)
}
}
scrollToTopOfDocument()
检查字符串是否大写
const isUpperCase = (str) => str === str.toUpperCase()
console.log(isUpperCase('string')) // false
console.log(isUpperCase('STRING')) // true
console.log(isUpperCase('5TR1NG')) // true
检查元素是否处于 focus 状态
const elementIsInFocus = (el) => el === document.activeElement
elementIsInFocus(anyElement) // returns true if in focus, false if not in focus
查找数组间不同元素
const differenceInArrays = (array1, array2) => {
const set = new Set(array2)
return array1.filter((x) => !set.has(x))
}
differenceInArrays(['apple', 'orange', 'banana'], ['apple', 'orange', 'mango']) // ["banana"]
differenceInArrays([10, 12, 5], [66, 10, 6]) // [12, 5]
移除事件监听
const removeEventOffElement = (el, evt, fn, opts = false) =>
el.removeEventListener(evt, fn, opts)
const testFunction = () => console.log('My function has been called')
document.body.addEventListener('click', testFunction)
// Call remove method
removeEventOffElement(document.body, 'click', fn)
随机生成 HEX 值
const generateRandomColour = () =>
'#' + Math.floor(Math.random() * 16777215).toString(16)
//EXAMPLE
document.getElementsByTagName('body')[0].style.color = generateRandomColour()
查找第一个定义的非空参数
const getFirstValidValue = (...values) => values.find(v => ![undefined, null].includes(v));
console.log(getFirstValidValue(null, undefined, 'Hey', null); // 'Hey'
元素外部监听事件
const onClickOutsideElement = (element, callback) => {
document.addEventListener('click', (e) => {
if (!element.contains(e.target)) callback()
})
}
onClickOutside('#some-element', () => console.log('Hey you missed'))
// Will log "Hey you missed" everytime a click that was not "some-element" was clicked
总结
有时开发人员会发现自己在一次又一次地创建相同的东西,希望上面的一些代码片段可以在在开发中重用。最新的 JavaScript 特性和浏览器 api 是很重要的。
Comments
No Comments!