分享7個殺手級JS小技巧

2022-02-17 13:00:31

一、陣列亂序

在使用需要某種程度的隨機化的演演算法時，你會經常發現洗牌陣列是一個相當必要的技能。下面的片段以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小技巧內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！