天天看點

23個常見的 JavaScript 函數

23個常見的 JavaScript 函數

本文收集了23個日常開發中非常常用的功能,其中一些可能很複雜,另一些可能很簡單,但我相信它們都會或多或少對每個人都有幫助。

01、生成随機顔色

當網站需要生成随機顔色時,我們可以通過以下代碼來執行此操作。

23個常見的 JavaScript 函數

02、數組重新排序

對數組元素重新排序是一個非常重要的技巧,但它在原生數組中不可用。

23個常見的 JavaScript 函數

03、複制到剪貼闆

複制到剪貼闆是一項非常有用且使用者友好的功能。

23個常見的 JavaScript 函數

04、檢測深色主題

深色主題越來越流行,很多使用者會在裝置上啟用暗模式。我們将應用程式切換到深色主題以改善使用者體驗。

23個常見的 JavaScript 函數

05、滾動到頂部

将元素滾動到頂部的最簡單方法是使用 scrollIntoView。設定塊開始滾動到頂部;将行為設定為平滑以啟用平滑滾動。

23個常見的 JavaScript 函數

06、滾動到底部

就像滾動到頂部一樣,滾動到底部隻是将塊設定為結束。

23個常見的 JavaScript 函數

07、檢測元素是否在螢幕上

檢查元素是否在視窗中的最佳方法是使用 IntersectionObserver。

23個常見的 JavaScript 函數

08、檢測裝置

使用 navigator.userAgent 檢測網站在哪個平台裝置上運作。

23個常見的 JavaScript 函數

09、隐藏元素

我們可以将元素的 style.visibility 設定為 hidden 來隐藏元素的可見性,但是,元素的空間還是會被占用。将元素的 style.display 設定為 none 将從渲染流中删除該元素。

23個常見的 JavaScript 函數

10、從 URL 擷取參數

JavaScript中有一個URL對象,可以很友善的擷取URL中的參數。

23個常見的 JavaScript 函數

11、深拷貝對象

深度複制對象非常簡單。首先,将對象轉換為字元串,然後将其轉換為對象。

23個常見的 JavaScript 函數

除了使用 JSON 的 API 之外,還有一個更新的結構化克隆 API,用于深度複制對象,并非所有浏覽器都支援該 API。

12、等待功能

JavaScript 提供了 setTimeout 函數,但是,它沒有傳回 Promise 對象,是以我們不能在這個函數上使用 async,但是,我們可以封裝等待函數。

23個常見的 JavaScript 函數

13、有條件地在對象中添加屬性

23個常見的 JavaScript 函數

14、檢查對象中是否存在屬性

23個常見的 JavaScript 函數

15、使用動态鍵破壞對象

23個常見的 JavaScript 函數

16、循環通路對象以通路鍵和值

23個常見的 JavaScript 函數

17、防止在使用可選鍊(?.)通路對象中不存在的任何鍵時抛出錯誤

23個常見的 JavaScript 函數

警告⚠️:當你不确定他們的屬性是否存在或不在資料中時使用可選連結。如果您确定密鑰必須傳入資料,并且如果沒有出現,那麼,最好是抛出錯誤而不是阻止它們。

18、檢查數組中的 falsy值

23個常見的 JavaScript 函數

19、删除數組中的重複值

23個常見的 JavaScript 函數

20、校驗值是數組類型

23個常見的 JavaScript 函數

21、字元串到數字和數字到字元串的轉換使用'+'操作符

23個常見的 JavaScript 函數

22、當值為 null 且 undefined 時,使用空值合并 (??) 運算符有條件地配置設定其他值

23個常見的 JavaScript 函數

将與 OR (||) 運算符混淆??

如果值不真實(0,'',null,undefined,false,NaN),當您想要有條件地配置設定其他值時使用 OR 運算符。

23個常見的 JavaScript 函數

23、使用 !! 進行布爾轉換操作符

23個常見的 JavaScript 函數

寫在最後

以上就是我今天與你分享的全部内容,如果你覺得有用的話,請記得點贊我,并将它分享給你身邊的朋友,也許能夠幫助到他。

最後,謝謝你的閱讀,祝程式設計愉快!

23個常見的 JavaScript 函數