全世界有超过 1000 万 Javascript 开发人员,而且这个数字每天都在增加。尽管 JavaScript 以其动态特性而闻名,但它还具有许多其他出色的特性。在这篇博客中,我们将看到 10 个有用的 JavaScript 单行代码,你应该知道它们来提高你的工作效率。
1、生成一个范围内的随机数在很多情况下,我们需要在一个范围内生成一个随机数。Math.random() 函数可以为我们生成一个随机数,然后我们可以将其转换为我们想要的范围。
constmax=20;constmin=10;//Math.floor()返回小于或等于一个给定数字的最大整数。//Math.random()返回一个浮点型伪随机数字,在0(包括0)和1(不包括)之间。constrandom=Math.floor(Math.random()(max-min+1))+min;console.log(random);//output:17//output:10
2、反转字符串
有几种不同的方法可以反转字符串。这是最简单的一个,使用 split() 、reverse() 和 join() 方法。

•split() 方法使用指定的分隔符字符串将一个String对象分割成子字符串数组。 •reverse() 方法将数组中元素的位置颠倒,并返回该数组•join() 方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符。
reverse=(str)=>str.split('').reverse().join('');conststr='helloworld';console.log(reverse(str));//output:dlrowolleh
3、生成一个随机的十六进制码
适用于元素随机颜色生成的场景
•padEnd() 方法会用一个字符串填充当前字符串(如果需要的话则重复填充),返回填充后达到指定长度的字符串。从当前字符串的末尾(右侧)开始填充。
'#'+Math.floor(Math.random()0xffffff).toString(16).padEnd(6,'0');console.log(color);//output:#ed19ed
4、数组随机排序
在使用随机算法时,数组的随机排序是一项经常用到的场景,在 JavaScript 中,我们没有模块像python 中的 random.shuffle() 方法一样实现数组元素的随机排序,但仍然有一种方法只需一行代码就可以将数组的所有元素随机排序。
constshuffleArray=(arr)=>arr.sort(()=>0.5-Math.random());constarr=Array.from({length:10},(_,i)=>i+1);console.log('array:',arr);console.log('shuffledarray:',shuffleArray(arr));//output://array:[1,2,3,4,5,6,7,8,9,10]//shuffledarray:[5,7,8,9,1,2,3,4,10,6]
5、滚动到顶部/滚动到底部
初学者经常会发现自己很难正确地将元素滚动到视图中。滚动元素最简单的方法是使用 scrollIntoView() 方法。
//Addbehavior:"smooth"forasmoothscrollinganimation.constscrollToTop=(element)=>element.scrollIntoView({behavior:'smooth',block:'start'});constscrollToBottom=(element)=>element.scrollIntoView({behavior:'smooth',block:'end'});
6、检查是否有人在使用暗色主题
如果您希望您显示的内容遵循使用您网站的人的配色方案,JavaScript 包含一种检测某人是否使用暗色主题的方法,以便您可以相应地调整颜色。
constisDarkMode1=window.matchMedia&&window.matchMedia('(prefers-color-scheme:dark)').matches;//如果您想将其用作函数constisDarkMode2=()=>window.matchMedia&&window.matchMedia('(prefers-color-scheme:dark)').matches;console.log(isDarkMode1);console.log(isDarkMode2());//output://true//true
7、复制到剪贴板
将文本复制到剪贴板非常有用,也是一个难以解决的问题。您可以在网上找到各种解决方案,但下面的解决方案可能是最简洁和最聪明的解决方案之一。
constcopyToClipboard=(text)=>navigator.clipboard?.writeText&&navigator.clipboard.writeText(text);
8、获取两个日期之间的天数
确定如用户的年龄时,你必须计算从某个时间点到现在已经过去的天数。
constageDays=(old,recent)=>Math.ceil(Math.abs(old-recent)/(1000606024))+'Day(s)';constfirstDate=newDate('2021-06-10');constsecondDate=newDate('2022-03-03');console.log(ageDays(firstDate,secondDate));//output:266Day(s)
9、获取随机布尔值
Javascript 中的 Math.random 函数可用于生成范围之间的随机数。要生成随机布尔值,我们需要随机获取 0 到 1 之间的数字,然后检查它是大于还是小于 0.5。
constrandomBoolean=()=>Math.random()>=0.5;console.log(randomBoolean());//output:false
10、 检查当前用户是否在苹果设备上
我们可以使用 navigator.platform 来检查浏览器运行的平台。
constisAppleDevice=/Mac|iPod|iPhone|iPad/.test(navigator.platform);console.log(navigator.platform);console.log(isAppleDevice);//output://Win32//false
注意:此属性的推荐替代方案是 navigator.userAgentData.platform。但是,navigator.userAgentData.platform 还没有被一些主流浏览器支持,并且定义它的规范还没有被任何标准组采用(具体来说,它不是 W3C 或 WHATWG 发布的任何规范的一部分)。