JS常用代码片段

数组随机排序

结合sort和Math.random方法可以很方便的实现数组随机排序

const shuffleArr = arr => arr.sort(()=> 0.5 - Math.random());
shuffleArr([1,2,3,4]); // 随机排序[ 1, 4, 3, 2 ]

生成随机色值

结合Math.random和padEnd方法生成随机色

0x表示16进制的数字，转成10进制为16777215

toString(16)转成16进制的数字表示

String.padEnd()方法会用一个字符串填充当前字符串（如果需要的话则重复填充），返回填充后达到指定长度的字符串。从当前字符串的末尾（右侧）开始填充

const getRandomColor = () => `#${Math.floor(Math.radom()*0xffffff).toString(16).padEnd(6,"0")}`

getRandomColor(); // #165220

移除数组中的重复元素

使用Set可以轻松移除数组中的重复元素

const removeDuplicates = arr => [...new Set(arr)];
removeDuplicates([1, 2, 3, 3, 4, 4, 5, 5, 6]); // [1, 2, 3, 4, 5, 6]

复制到剪贴板

const copyToClipboard = (text) => {
    navigator.clipboard?.writeText && navigator.clipboard.writeText(text);
}
copyToClipboard('hello world');

注意:根据caniuse，该方法适用于93.08%的全球用户。因此，必须检查用户的浏览器是否支持该API。为了支持所有用户，您可以使用input并复制其内容。

判断是否开启暗模式

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

判断元素是否在可视区可见

滚动到页面顶部

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

滚动到页面底部

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