实用的JS技巧？

1."返回"按钮(history.back()可以创建一个浏览器"返回"按钮)

<button onclick="history.back()">返回</button>

2.数字分隔符(提高可读性)

const langerNumber = 1_000_000_000;
console.log(langerNumber);//1000000000

3.事件监听器只运行一次(once)

el.addEventListener('click',()=>console.log('I run only once'),{once:true})

4.console.log(变量包装)

const myNumber = 123;
console.log({myNumber});//{myNumber:123}

5.从数组中获取最小值/最大值(Math.min()或Math.max())

const numbers = [4,5,6,2,7];
console.log(Math.max(...numbers));//7
console.log(Math.min(...numbers));//2

6.检查Caps Lock是否打开

const passwordInput = document.getElementById('password');
    passwordInput.addEventListener('keyup',function(event){
if(event.getModifierState('CapsLock'))
})

7.复制到剪贴板

function copy(text){
navigator.clipboard?.writeText && navigator.clipboard.writeText(text)
}

8.获取鼠标位置

document.addEventListener('mousemove',(e)=>{
console.log(`x:${e.clienX},y:${e.clienY}`)
})

9.缩短数组

const numbers = [1,2,3,4,5]
numbers.length = 3;
console.log(numbers);//[1,2,3]

10.简写条件判断语句

//普通写法
if(count){
doSoming();
}
//简写
count && doSoming();

11.数组去重

const numbers = [2,3,4,4,2];
console.log([...new Set(numbers)]);//[2,3,4]

12.将字符串转为数字

const str = '404';
console.log(+str);//404

13.将数字转为字符串

const num = 403;
console.log(num+'');//'403'

14.从数组中过滤所有虚值

const myArray = [1,undefined,NaN,2,null,'str',true,3,false]
console.log(myArray.filter(Boolean));//[1,2,'str',true,3]

15.includes

const myTech = 'java';
const techs = ['html','css','java'];
console.log(techs.includes(myTech));

16.对数组求和(reduce)

const myArray = [10,20,30,40]
const reducer = (total,curren)=> total+curren
console.log(myArray.reduce(reducer));//100

17.对数组乱序

const shuffleArray = (arr) => arr.sort(() => Math.random() - 0.5)
const arr = [1,2,3,4,5,6,7,8,9,10];
console.log(shuffleArray);

18.对数组去重

const getUnique = (arr) => [...new Set(arr)]
const arr [1,1,2,3,3,4,4,5,5]
console.log(getUnique(arr))

19.检测黑暗模式

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

20.滚动到顶部

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

21.滚动到底部

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

22.生成随机颜色

cosnt generateRandomHexColor = () => \`#${Math.floor(Math.random() \*0xffffff).toString(16)}\`;