你需要知道的 12 個常用的 JavaScript 函式

語言: CN / TW / HK

攜手創作,共同成長!這是我參與「掘金日新計劃 · 8 月更文挑戰」的第 4 天,點選檢視活動詳情

本文收集了 12 個在日常開發中非常常用的函式,有些可能很複雜,有些可能很簡單,但我相信或多或少會對大家都會有所幫助。

生成隨機顏色

你的網站是否需要生成隨機顏色?下面一行程式碼就可以實現。 ``javascript const generateRandomHexColor = () =>#${Math.floor(Math.random() * 0xffffff).toString(16)}`

console.log(generateRandomHexColor()) ```

陣列重排序

對陣列的元素進行重新排序是一項非常重要的技巧,但是原生 Array 中並沒有這項功能。 ```javascript const shuffle = (arr) => arr.sort(() => Math.random() - 0.5)

const arr = [1, 2, 3, 4, 5] console.log(shuffle(arr)) ```

複製到剪下板

複製到剪下板是一項非常實用且能夠提高使用者便利性的功能。 ```javascript const copyToClipboard = (text) => navigator.clipboard && navigator.clipboard.writeText && navigator.clipboard.writeText(text)

copyToClipboard("Hello World!") ```

檢測暗色主題

暗色主題日益普及,很多用的都會在裝置中啟用案模式,我們將應用程式切換到暗色主題可以提高使用者體驗度。 ```javascript const isDarkMode = () => window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;

console.log(isDarkMode()) ```

滾動到頂部

將元素滾動到頂部最簡單的方法是使用 scrollIntoView。設定 block 為 start 可以滾動到頂部;設定 behavior 為 smooth 可以開啟平滑滾動。 javascript const scrollToTop = (element) => element.scrollIntoView({ behavior: "smooth", block: "start" });

滾動到底部

與滾動到頂部一樣,滾動到底部只需要設定 block 為 end 即可。 javascript const scrollToBottom = (element) => element.scrollIntoView({ behavior: "smooth", block: "end" });

檢測元素是否在螢幕中

檢查元素是否在視窗中最好的方法是使用 IntersectionObserver。 ``javascript const callback = (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { //entry.targetis the dom element console.log(${entry.target.id} is visible`); } }); };

const options = { threshold: 1.0, }; const observer = new IntersectionObserver(callback, options); const btn = document.getElementById("btn"); const bottomBtn = document.getElementById("bottom-btn"); observer.observe(btn); observer.observe(bottomBtn); ```

檢測裝置

使用 navigator.userAgent 來檢測網站執行在哪種平臺裝置上。 ```javascript const detectDeviceType = () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( navigator.userAgent ) ? "Mobile" : "Desktop";

console.log(detectDeviceType()); ```

隱藏元素

我們可以將元素的 style.visibility 設定為 hidden,隱藏元素的可見性,但元素的空間仍然會被佔用。如果設定元素的 style.display 為 none,會將元素從渲染流中刪除。 javascript const hideElement = (el, removeFromFlow = false) => { removeFromFlow ? (el.style.display = 'none') : (el.style.visibility = 'hidden') }

從 URL 中獲取引數

JavaScript 中有一個 URL 物件,通過它可以非常方便的獲取 URL 中的引數。 javascript const getParamByUrl = (key) => { const url = new URL(location.href) return url.searchParams.get(key) }

深拷貝物件

深拷貝物件非常簡單,先將物件轉換為字串,再轉換成物件即可。 javascript const deepCopy = obj => JSON.parse(JSON.stringify(obj)) 除了利用 JSON 的 API,還有更新的深拷貝物件的 structuredClone API,但並不是在所有的瀏覽器中都支援。 javascript structuredClone(obj)

等待函式

JavaScript 提供了 setTimeout 函式,但是它並不返回 Promise 物件,所以我們沒辦法使用 async 作用在這個函式上,但是我們可以封裝等待函式。 ```javascript const wait = (ms) => new Promise((resolve)=> setTimeout(resolve, ms))

const asyncFn = async () => { await wait(1000) console.log('等待非同步函式執行結束') }

asyncFn() ```


感謝你的閱讀,如果本文對你有所幫助,不妨點個贊吧。