一行代碼-殺手級的 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)}`;