7個殺手級的JS一行程式碼

gaoryrt發表於2022-02-17
JS行程

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)}`;

關注我，瞭解科技領域的每週新資訊
需要一個評級最高的前端開發自由職業者來解決你的開發問題？請在Upwork上聯絡我
想看看我在做什麼？請檢視我的個人網站和GitHub
想聯絡我嗎？請在LinkedIn上與我聯絡
我是一個自由職業者，將在2022年中期開始作為一個數字遊牧者。想了解我的旅程嗎？在Instagram上關注我

相關文章