#yyds干货盘点#6个常用的 JavaScript 函数

Posted 2022-08-16 尼羲

生成随机颜色

你的网站是否需要生成随机颜色？下面一行代码就可以实现。

const generateRandomHexColor = () => `#$Math.floor(Math.random() * 0xffffff).toString(16)`

console.log(generateRandomHexColor())

数组重排序

对数组的元素进行重新排序是一项非常重要的技巧，但是原生 Array 中并没有这项功能。

const shuffle = (arr) => arr.sort(() => Math.random() - 0.5)

const arr = [1, 2, 3, 4, 5]
console.log(shuffle(arr))

复制到剪切板

复制到剪切板是一项非常实用且能够提高用户便利性的功能。

const copyToClipboard = (text) => navigator.clipboard && navigator.clipboard.writeText && navigator.clipboard.writeText(text)

copyToClipboard("Hello World!")

检测暗色主题

暗色主题日益普及，很多用的都会在设备中启用案模式，我们将应用程序切换到暗色主题可以提高用户体验度。

const isDarkMode = () => window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;

console.log(isDarkMode())

滚动到顶部

将元素滚动到顶部最简单的方法是使用 scrollIntoView。设置 block 为 start 可以滚动到顶部；设置 behavior 为 smooth 可以开启平滑滚动。

const scrollToTop = (element) => 
  element.scrollIntoView( behavior: "smooth", block: "start" );

滚动到底部

与滚动到顶部一样，滚动到底部只需要设置 block 为 end 即可。

const scrollToBottom = (element) => 
  element.scrollIntoView( behavior: "smooth", block: "end" );