目录
为了提高你的 JavaScript 知识与技能，你应该了解一些JavaScript的单行代码技巧。
1.复制内容到剪贴板
为了提高网站的用户体验，我们经常需要将内容复制到剪贴板，以便用户粘贴到指定的地方。
const copyToClipboard = (content) => navigator.clipboard.writeText(content)
copyToClipboard("Hello fatfish")2.获取鼠标选择
您以前遇到过这种情况吗？
我们需要获取用户选择的内容。
const getSelectedText = () => window.getSelection().toString()
getSelectedText()3.打乱数组
打乱数组？这在彩票项目中很常见，但它并不是真正随机的。
const shuffleArray = array => array.sort(() => Math.random() - 0.5)
shuffleArray([ 1, 2,3,4, -1, 0 ]) // [3, 1, 0, 2, 4, -1]4. 将rgba转换为十六进制
我们可以将 RGBA 和十六进制颜色值相互转换。
const rgbaToHex = (r, g, b) => "#" + [r, g, b].map(
num => parseInt(num).toString(16)
.padStart(2, '0')
).join('')
rgbaToHex(0, 0 ,0) // #000000
rgbaToHex(255, 0, 127) //#ff007f5.十六进制转换为rgba
const hexToRgba = hex => {
const [r, g, b] = hex.match(/\w\w/g).map(val => parseInt(val, 16))
return `rgba(${r}, ${g}, ${b}, 1)`;
}
hexToRgba('#000000') // rgba(0, 0, 0, 1)
hexToRgba('#ff007f') // rgba(255, 0, 127, 1)6.获取多个数的平均值
使用reduce我们可以非常方便的得到一组数组的平均值。
const average = (...args) => args.reduce((a, b) => a + b, 0)/args.length
average(0, 1, 2, -1, 9, 10) // 3.57.检查数字是偶数还是奇数
如何判断一个数是奇数还是偶数？
const isEven = num => num % 2 === 0
isEven(2) // true
isEven(1) // false8.删除数组中的重复元素
要删除数组中的重复元素，使用 Set 将变得非常容易。
const uniqueArray = (arr) => [...new Set(arr)]
uniqueArray([ 1, 1, 2, 3, 4, 5, -1, 0 ]) // [1, 2, 3, 4, 5, -1, 0]9.检查一个对象是否为空对象
判断一个对象是否为空容易吗？
const isEmpty = obj => Reflect.ownKeys(obj).length === 0
&& obj.constructor === Object
isEmpty({}) // true
isEmpty({ name: 'fatfish' }) // false10.反转字符串
const reverseStr = str => str.split('').reverse().join('')
reverseStr('fatfish') // hsiftaf11.计算两个日期之间的间隔
const dayDiff = (d1, d2) => Math.ceil(
Math.abs(d1.getTime() - d2.getTime()) / 86400000
)
dayDiff(new Date("2023-06-23"), new Date("1997-05-31")) // 951912.查找该日期是一年中的第几天
今天是2023年6月23日，那么今年是什么日子呢？
const dayInYear = (d) => Math.floor(
(d - new Date(d.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24
)
dayInYear(new Date('2023/06/23')) // 17413.将字符串的第一个字母大写
const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
capitalize("hello fatfish") // Hello fatfish14.生成指定长度的随机字符串
const generateRandomString = length => [...Array(length)].map(
() => Math.random().toString(36)[2]
).join('')
generateRandomString(12) // cysw0gfljoyx
generateRandomString(12) // uoqaugnm8r4s15.获取两个整数之间的随机整数
const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
random(1, 100) // 27
random(1, 100) // 84
random(1, 100) // 5516.指定数字四舍五入
const round = (n, d) => Number(Math.round(n + "e" + d) + "e-" + d)
round(3.1415926, 3) //3.142
round(3.1415926, 1) //3.117.清除所有cookie
const clearCookies = document.cookie.split(';').forEach(
cookie => document.cookie = cookie.replace(/^ +/, '').replace(
/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`
)
)18.检测是否为深色模式
const isDarkMode = window.matchMedia && window.matchMedia(
'(prefers-color-scheme: dark)'
).matches
console.log(isDarkMode)19.滚动到页面顶部
const goToTop = () => window.scrollTo(0, 0)
goToTop()20.判断是否为苹果设备
const isAppleDevice = () => /Mac|iPod|iPhone|iPad/.test(navigator.platform)
isAppleDevice()21.随机布尔值
const randomBoolean = () => Math.random() >= 0.5
randomBoolean()22.获取变量的类型
const typeOf = (obj) => Object.prototype.toString.call(obj)
.slice(8, -1).toLowerCase()
typeOf('') // string
typeOf(0) // number
typeOf() // undefined
typeOf(null) // null
typeOf({}) // object
typeOf([]) // array
typeOf(0) // number
typeOf(() => {}) // function23.判断当前选项卡是否处于活动状态
const checkTabInView = () => !document.hidden24. 检查某个元素是否获得焦点
const isFocus = (ele) => ele === document.activeElement25.随机IP
const generateRandomIP = () => {
return Array.from({length: 4}, () => Math.floor(Math.random() * 256)).join('.');
}
generateRandomIP() // 220.187.184.113
generateRandomIP() // 254.24.179.151总结
以上就是我今天想与你分享的25个关于JavaScript的单行代码技巧。如果你觉得有用的话，请记得点赞我关注我。
最后，感谢你的阅读。