英文 | https://tapajyoti-bose.medium.com/7-killer-one-liners-in-javascript-33db6798f5bf

翻譯 | 楊小愛

JavaScript 是 Web 開發(fā)最重要的技術(shù)之一。

今天我將與大家分享7個非常實用的單行代碼技術(shù)，希望對大家有所幫助。

01、數(shù)組重組

在使用需要一定程度隨機化的算法時，我們通常會發(fā)現(xiàn)洗牌數(shù)組是一項非常必要的技能。下面的代碼片段以 O(n log n) 的復(fù)雜度對數(shù)組進行混洗。

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

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

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

const copyToClipboard = (text) =>  navigator.clipboard?.writeText && navigator.clipboard.writeText(text);// TestingcopyToClipboard("Hello World!");

注意：根據(jù) caniuse，該方法適用于 93.08% 的全球用戶。所以，檢查用戶的瀏覽器是否支持 API 是必要的。要支持所有用戶，我們可以使用輸入并復(fù)制其內(nèi)容。

03、數(shù)組去重

每種語言都有自己的 Hash?List 實現(xiàn)，在 JavaScript 中稱為 Set。我們可以使用設(shè)置數(shù)據(jù)結(jié)構(gòu)輕松地從數(shù)組中獲取唯一元素。

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

04、檢測暗模式

隨著暗模式的日益流行，如果用戶在他們的設(shè)備中啟用了暗模式，那么將我們的應(yīng)用程序切換到暗模式是有必要的。

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

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

05、滾動到頂部

初學(xué)者經(jīng)常發(fā)現(xiàn)自己在正確地將元素滾動到視圖中時遇到了困難。滾動元素最簡單的方法是使用 scrollIntoView 方法。添加行為：“平滑”以獲得平滑的滾動動畫。

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

06、滾動到底部

就像 scrollToTop 方法一樣，scrollToBottom 方法可以使用 scrollIntoView 方法輕松實現(xiàn)，只需將塊值切換到 end。

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

07、生成隨機顏色

我們的應(yīng)用程序是否依賴隨機顏色生成？別再看了，下面的代碼片段讓你明白了！

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

總結(jié)

以上就是我與您分享的7個關(guān)于JavaScript的單行代碼技術(shù)內(nèi)容，如果您覺得非常有幫助，請記得點贊我，關(guān)注我，同時，還可以將這篇內(nèi)容分享給您的身邊做開發(fā)的朋友。

最后，感謝您的閱讀。

學(xué)習(xí)更多技能

請點擊下方公眾號