学习强大的JavaScript一行代码,能够节省你的时间和代码量

简介: 这段内容介绍了25个实用的JavaScript一行代码技巧,涵盖复制内容到剪贴板、打乱数组、颜色值转换、计算平均值、检查数字奇偶性、数组去重、对象为空检测、字符串反转、日期计算、首字母大写、生成随机字符串、四舍五入、清除Cookie、检测暗黑模式等,帮助开发者提高效率并简化代码。

学习强大的JavaScript一行代码,能够节省你的时间和代码量。

将内容复制到剪贴板
为了提高网站的用户体验,我们经常需要将内容复制到剪贴板,以便用户可以将其粘贴到指定位置。
const copyToClipboard = (content) => navigator.clipboard.writeText(content)
copyToClipboard("Hello fatfish")

获取鼠标选中内容
你以前遇到过这种情况吗?我们需要获取用户选择的内容。
const getSelectedText = () => window.getSelection().toString()
getSelectedText()

打乱一个数组
打乱一个数组?这在彩票程序中非常常见,但它并不是真正的随机。
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) //#ff007f
5.将十六进制转换为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)
//代码效果参考:https://shenzhen.92demo.com/sitemap
6.获取多个数字的平均值
使用reduce函数,我们可以非常方便地得到一组数组的平均值。

const average = (...args) => args.reduce((a, b) => a + b, 0) / args.length
average(0, 1, 2, -1, 9, 10) // 3.5
7.检查一个数字是偶数还是奇数
怎么判断一个数字是奇数还是偶数?

const isEven = num => num % 2 === 0
isEven(2) // true
isEven(1) // false
8.在数组中去重元素
使用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' }) // false
10.反转字符串
const reverseStr = str => str.split('').reverse().join('')
reverseStr('fatfish') // hsiftaf
11.计算两个日期之间的间隔
const dayDiff = (d1, d2) => Math.ceil(Math.abs(d1.getTime() - d2.getTime()) / 86400000)
dayDiff(new Date("2023-06-23"), new Date("1997-05-31")) // 9519

找出日期所在的年份中的天数
const dayInYear = (d) => Math.floor((d - new Date(d.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24)
dayInYear(new Date('2023/06/23'))// 174
13.将字符串的首字母大写
const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
capitalize("hello fatfish") // Hello fatfish
14.生成指定长度的随机字符串
const generateRandomString = length => [...Array(length)].map(() => Math.random().toString(36)[2]).join('')
generateRandomString(12) // cysw0gfljoyx
generateRandomString(12) // uoqaugnm8r4s
15.在两个整数之间获取一个随机整数
const random = (min, max) => Math.floor(Math.random() (max - min + 1) + min)
random(1, 100) // 27
random(1, 100) // 84
random(1, 100) // 55
16.指定位数四舍五入
const round = (n, d) => Number(Math.round(n + "e" + d) + "e-" + d)
round(3.1415926, 3) //3.142
round(3.1415926, 1) //3.1
17.清除所有的cookies
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.滚动到页面顶部,https://wuzhong.92demo.com/sitemap
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(() => {}) // function
23.判断当前选项卡是否处于活动状态
const checkTabInView = () => !document.hidden
24.检查元素是否处于焦点状态
const isFocus = (ele) => ele === document.activeElement
随机IP
const generateRandomIP = () => {
return Array.from({length: 4}, () => Math.floor(Math.random() * 256)).join('.');
}
generateRandomIP() // 220.187.184.113
generateRandomIP() // 254.24.179.151
总结
JavaScript一行代码是节省时间和代码的强大方式。https://dehong.92demo.com/sitemap 它们可以用来在一行代码中执行复杂的任务,这对其他开发人员来说非常令人印象深刻。
在本文中,我们向您展示了25个厉害的JavaScript一行代码,这些代码将让您看起来像个专家。我们还提供了一些关于如何编写自己的JavaScript一行代码的技巧。

相关文章
|
7月前
|
JavaScript 前端开发 安全
【逆向】Python 调用 JS 代码实战:使用 pyexecjs 与 Node.js 无缝衔接
本文介绍了如何使用 Python 的轻量级库 `pyexecjs` 调用 JavaScript 代码,并结合 Node.js 实现完整的执行流程。内容涵盖环境搭建、基本使用、常见问题解决方案及爬虫逆向分析中的实战技巧,帮助开发者在 Python 中高效处理 JS 逻辑。
|
9月前
|
JavaScript 前端开发 算法
流量分发代码实战|学会用JS控制用户访问路径
流量分发工具(Traffic Distributor),又称跳转器或负载均衡器,可通过JavaScript按预设规则将用户随机引导至不同网站,适用于SEO优化、广告投放、A/B测试等场景。本文分享一段不到百行的JS代码,实现智能、隐蔽的流量控制,并附完整示例与算法解析。
245 1
|
12月前
|
存储 JavaScript 前端开发
在NodeJS中使用npm包进行JS代码的混淆加密
总的来说,使用“javascript-obfuscator”包可以帮助我们在Node.js中轻松地混淆JavaScript代码。通过合理的配置,我们可以使混淆后的代码更难以理解,从而提高代码的保密性。
1196 9
|
10月前
|
JavaScript
JS代码的一些常用优化写法
JS代码的一些常用优化写法
182 0
|
前端开发 JavaScript
【Javascript系列】Terser除了压缩代码之外,还有优化代码的功能
Terser 是一款广泛应用于前端开发的 JavaScript 解析器和压缩工具,常被视为 Uglify-es 的替代品。它不仅能高效压缩代码体积,还能优化代码逻辑,提升可靠性。例如,在调试中发现,Terser 压缩后的代码对删除功能确认框逻辑进行了优化。常用参数包括 `compress`(启用压缩)、`mangle`(变量名混淆)和 `output`(输出配置)。更多高级用法可参考官方文档。
952 11
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
787 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
11月前
|
JavaScript 数据可视化 前端开发
three.js简单实现一个3D三角函数学习理解
1.Three.js简介 Three.js是一个基于JavaScript编写的开源3D图形库,利用WebGL技术在网页上渲染3D图形。它提供了许多高级功能,如几何体、纹理、光照、阴影等,以便开发者能够快速地创建复杂且逼真的3D场景。同时,Three.js还具有很好的跨平台和跨浏览器兼容性,让用户无需安装任何插件就可以在现代浏览器上观看3D内容。
399 0
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
633 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
JavaScript 前端开发 算法
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~

热门文章

最新文章

下一篇
开通oss服务