7 個殺手級的 JS 一行代碼

來自:SegmentFault,作者:gaoryrt

鏈接:https://segmentfault.com/a/1190000041415254

JavaScript 是網絡開發中最關鍵的支柱。

這篇文章包含了由無菌手套手工挑選的代碼片段,並放置在一個綢緞枕頭上。
一個由 50 人組成的團隊檢查了這些代碼,並確保其在發佈前處於高度拋光狀態。我們來自瑞士的文章發佈專家點燃了一支蠟燭,當他將代碼輸入金錢所能買到的最好的鑲金鍵盤時,人羣中一片噓聲。
我們都有一個美妙的慶祝活動,整個聚會沿着街道行進到咖啡館,整個加爾各答鎮都向文章發佈到網上時揮手致意 "一路順風!"。

祝您閱讀愉快!

數組亂序

在使用需要某種程度的隨機化的算法時,你會經常發現洗牌數組是一個相當必要的技能。下面的片段以 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)}\`;
本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源https://mp.weixin.qq.com/s/sXbdOTTuTF97JLlsFo0RSA