一、數(shù)組亂序

在使用需要某種程度的隨機(jī)化的算法時(shí)，你會經(jīng)常發(fā)現(xiàn)洗牌數(shù)組是一個(gè)相當(dāng)必要的技能。下面的片段以O(shè)(n log n)的復(fù)雜度對一個(gè)數(shù)組進(jìn)行就地洗牌。

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

二、復(fù)制到剪貼板

在Web應(yīng)用程序中，復(fù)制到剪貼板因其對用戶的便利性而迅速流行起來。

const copyToClipboard = (text) =>
? navigator.clipboard?.writeText && navigator.clipboard.writeText（text）
// 測試
copyToClipboard("Hello World!")

注意：根據(jù)caniuse，該方法對93.08%的全球用戶有效。所以必須檢查用戶的瀏覽器是否支持該API。為了支持所有用戶，你可以使用一個(gè)輸入并復(fù)制其內(nèi)容。

三、數(shù)組去重

每種語言都有自己的哈希列表的實(shí)現(xiàn)，在JavaScript中，它被稱為Set。你可以使用Set數(shù)據(jù)結(jié)構(gòu)輕松地從一個(gè)數(shù)組中獲得唯一元素。

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

四、檢測黑暗模式

隨著黑暗模式的普及，如果用戶在他們的設(shè)備中啟用了黑暗模式，那么將你的應(yīng)用程序切換到黑暗模式是非常理想的。幸運(yùn)的是，可以利用媒體查詢來使這項(xiàng)任務(wù)變得簡單。

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

根據(jù)caniuse的數(shù)據(jù)，matchMedia的支持率為97.19%。

五、滾動(dòng)到頂部

初學(xué)者經(jīng)常發(fā)現(xiàn)自己在正確滾動(dòng)元素的過程中遇到困難。最簡單的滾動(dòng)元素的方法是使用scrollIntoView方法。添加行為。"smooth "來實(shí)現(xiàn)平滑的滾動(dòng)動(dòng)畫。

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

六、滾動(dòng)到底部

就像scrollToTop方法一樣，scrollToBottom方法也可以用scrollIntoView方法輕松實(shí)現(xiàn)，只需將塊值切換為結(jié)束即可

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

七、生成隨機(jī)顏色

你的應(yīng)用程序是否依賴隨機(jī)顏色的生成？不用再看了，下面的代碼段可以滿足你的要求

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

到此這篇關(guān)于7個(gè)殺手級JS小技巧的文章就介紹到這了,更多相關(guān)JS小技巧內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論