JavaScript 實用程序函數(shù)是有用的、可重用的片段,你可以在許多不同的項目中重用它們。它們的目的是為常見任務(wù)提供一致且有效的答案,并幫助提高代碼的一致性。
在本文中,我想重點介紹我在許多項目中使用的 7 個實用函數(shù)并解釋它們的用途。
1.將數(shù)字轉(zhuǎn)換為貨幣
在 JavaScript 中處理貨幣時,事情會變得復(fù)雜。特別是當你需要處理顯示不同類型的貨幣時。
JavaScript 提供了 Intl.NumberFormat 對象,它允許你以對語言敏感的方式格式化數(shù)字。它提供的選項之一是將數(shù)字格式化為貨幣。
該函數(shù)接受 3 個參數(shù):
num - 要格式化的數(shù)字。
currency——要格式化的貨幣——默認設(shè)置為“歐元”,因為我主要需要處理基于歐元的價格。
locale — 默認設(shè)置為“nl-NL”,因為我經(jīng)常處理顯示為荷蘭的價格。
你可以使用下面 CodePen 中的值。例如,你會看到將語言環(huán)境更改為“en-US”會將十進制表示法從逗號更改為點。
2.將 HTML 字符串轉(zhuǎn)換為 DOM 對象
在很多情況下,你可能會收到 HTML 字符串而不是 HTML 元素。例如,當接收來自 API 的 JSON 響應(yīng)中的 HTML 或通過 Nunjucks 之類的模板解析器呈現(xiàn)模板時。
你可以通過 innerHTML 屬性將此 HTML 字符串直接注入到 dom 中,但有時你希望將此字符串轉(zhuǎn)換為 HTML 對象以進行額外的轉(zhuǎn)換、驗證或更具體的 DOM 注入。
該函數(shù)接受 2 個參數(shù):
content — 要轉(zhuǎn)換為對象的 HTML 字符串。
selector——你想要接收的選擇器——DOMParser 對象將創(chuàng)建一個完整的 HTMLObject,包括一個 和 標記。如果你只想要某個元素,你可以傳入選擇器,例如“section”,你將收到該元素。
3.去抖
在 JavaScript 中,debounce 函數(shù)將確保你的函數(shù)只會在每次用戶輸入時觸發(fā)一次,或者在等待參數(shù)中指定的時間段內(nèi)至少觸發(fā)一次。
例如,假設(shè)我們想根據(jù)搜索查詢向用戶顯示建議,我們可以在用戶輸入時顯示建議并在輸入每個字母后刷新,但這可能會讓用戶感到煩惱。通常在輸入一個鍵后等待至少 300 毫秒以顯示建議以確保用戶完成輸入。
這個函數(shù)有 3 個參數(shù):
fn - 要執(zhí)行的函數(shù)。
wait — 函數(shù)執(zhí)行前的等待時間。
immediate — 一個布爾值,指示第一次調(diào)用函數(shù)時是否應(yīng)立即調(diào)用。
4.日期驗證
有時,你從代碼、用戶輸入或 API 中的某處收到日期字符串,你將其轉(zhuǎn)換為日期對象并嘗試編輯或顯示日期并收到日期無效的錯誤。
使用這個簡單的實用方法,你可以驗證新構(gòu)建的日期對象是否實際上是有效的日期對象。
5.將 FormData 轉(zhuǎn)換為 JSON
創(chuàng)建 FormData 對象時,有時將其轉(zhuǎn)換為類似 JSON 的對象很有用。例如,當你向其發(fā)布數(shù)據(jù)的 API 只接受 JSON 請求時,它不接受任何內(nèi)容。
在大多數(shù)情況下,一個 FormData 對象可以很容易地映射到一個對象,但是在處理多選復(fù)選框時,事情會變得混亂。由于每個復(fù)選框都具有相同的名稱,因此對象的鍵值對將相互覆蓋。
這個簡單的實用方法為FormData 轉(zhuǎn)換為一個對象,并確保將多選值映射到一個數(shù)組,而不是每次都覆蓋該值。
6.衡量一個函數(shù)的性能
有時你想知道你的應(yīng)用程序的哪一部分正在減慢你的網(wǎng)站速度,調(diào)試函數(shù)的執(zhí)行時間很有用。
幸運的是,瀏覽器提供了本地支持來幫助你計算這一點。但不是將這些控制臺方法添加到每個函數(shù)中,而是每次都想測試,你可以簡單地調(diào)用這個有用的實用程序方法。
此函數(shù)需要 2 個或更多參數(shù):
name — 標簽的名稱顯示在控制臺中。
fn - 您要衡量其性能的函數(shù)。
任何附加參數(shù)——你正在調(diào)用的函數(shù)的參數(shù)。
7.從數(shù)組中刪除重復(fù)項
我經(jīng)常發(fā)現(xiàn)自己需要從數(shù)組中刪除可能的重復(fù)項。此方法只是在將數(shù)組轉(zhuǎn)換為 Set 并返回后返回一個新數(shù)組。
集合是一個簡單的對象,它存儲只能出現(xiàn)一次的值,使其成為對數(shù)組進行重復(fù)數(shù)據(jù)刪除的簡單方法。