本文收集了23個日常開發中非常常用的功能,其中一些可能很複雜,另一些可能很簡單,但我相信它們都會或多或少對每個人都有幫助。
01、生成随機顔色
當網站需要生成随機顔色時,我們可以通過以下代碼來執行此操作。
02、數組重新排序
對數組元素重新排序是一個非常重要的技巧,但它在原生數組中不可用。
03、複制到剪貼闆
複制到剪貼闆是一項非常有用且使用者友好的功能。
04、檢測深色主題
深色主題越來越流行,很多使用者會在裝置上啟用暗模式。我們将應用程式切換到深色主題以改善使用者體驗。
05、滾動到頂部
将元素滾動到頂部的最簡單方法是使用 scrollIntoView。設定塊開始滾動到頂部;将行為設定為平滑以啟用平滑滾動。
06、滾動到底部
就像滾動到頂部一樣,滾動到底部隻是将塊設定為結束。
07、檢測元素是否在螢幕上
檢查元素是否在視窗中的最佳方法是使用 IntersectionObserver。
08、檢測裝置
使用 navigator.userAgent 檢測網站在哪個平台裝置上運作。
09、隐藏元素
我們可以将元素的 style.visibility 設定為 hidden 來隐藏元素的可見性,但是,元素的空間還是會被占用。将元素的 style.display 設定為 none 将從渲染流中删除該元素。
10、從 URL 擷取參數
JavaScript中有一個URL對象,可以很友善的擷取URL中的參數。
11、深拷貝對象
深度複制對象非常簡單。首先,将對象轉換為字元串,然後将其轉換為對象。
除了使用 JSON 的 API 之外,還有一個更新的結構化克隆 API,用于深度複制對象,并非所有浏覽器都支援該 API。
12、等待功能
JavaScript 提供了 setTimeout 函數,但是,它沒有傳回 Promise 對象,是以我們不能在這個函數上使用 async,但是,我們可以封裝等待函數。
13、有條件地在對象中添加屬性
14、檢查對象中是否存在屬性
15、使用動态鍵破壞對象
16、循環通路對象以通路鍵和值
17、防止在使用可選鍊(?.)通路對象中不存在的任何鍵時抛出錯誤
警告⚠️:當你不确定他們的屬性是否存在或不在資料中時使用可選連結。如果您确定密鑰必須傳入資料,并且如果沒有出現,那麼,最好是抛出錯誤而不是阻止它們。
18、檢查數組中的 falsy值
19、删除數組中的重複值
20、校驗值是數組類型
21、字元串到數字和數字到字元串的轉換使用'+'操作符
22、當值為 null 且 undefined 時,使用空值合并 (??) 運算符有條件地配置設定其他值
将與 OR (||) 運算符混淆??
如果值不真實(0,'',null,undefined,false,NaN),當您想要有條件地配置設定其他值時使用 OR 運算符。
23、使用 !! 進行布爾轉換操作符
寫在最後
以上就是我今天與你分享的全部内容,如果你覺得有用的話,請記得點贊我,并将它分享給你身邊的朋友,也許能夠幫助到他。
最後,謝謝你的閱讀,祝程式設計愉快!