分享7個殺手級JS小技巧

一、數組亂序

在使用需要某種程度的隨機化的算法時，你會經常發現洗牌數組是一個相當必要的技能。下面的片段以O(n log 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))

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

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

註意：根據caniuse，該方法對93.08%的全球用戶有效。所以必須檢查用戶的瀏覽器是否支持該API。為瞭支持所有用戶，你可以使用一個輸入並復制其內容。

每種語言都有自己的哈希列表的實現，在JavaScript中，它被稱為Set。你可以使用Set數據結構輕松地從一個數組中獲得唯一元素。

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

隨著黑暗模式的普及，如果用戶在他們的設備中啟用瞭黑暗模式，那麼將你的應用程序切換到黑暗模式是非常理想的。幸運的是，可以利用媒體查詢來使這項任務變得簡單。

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

根據caniuse的數據，matchMedia的支持率為97.19%。

初學者經常發現自己在正確滾動元素的過程中遇到困難。最簡單的滾動元素的方法是使用scrollIntoView方法。添加行為。"smooth "來實現平滑的滾動動畫。

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

就像scrollToTop方法一樣，scrollToBottom方法也可以用scrollIntoView方法輕松實現，隻需將塊值切換為結束即可

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

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

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

到此這篇關於7個殺手級JS小技巧的文章就介紹到這瞭,更多相關JS小技巧內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！