七個(gè)我最常用的 JavaScript 實(shí)用程序函數(shù)

2022-09-20 12:59:36

開(kāi)發(fā) 前端

在本文中，我想重點(diǎn)介紹我在許多項(xiàng)目中使用的 7 個(gè)實(shí)用函數(shù)并解釋它們的用途。

JavaScript 實(shí)用程序函數(shù)是有用的、可重用的片段，你可以在許多不同的項(xiàng)目中重用它們。它們的目的是為常見(jiàn)任務(wù)提供一致且有效的答案，并幫助提高代碼的一致性。

在本文中，我想重點(diǎn)介紹我在許多項(xiàng)目中使用的 7 個(gè)實(shí)用函數(shù)并解釋它們的用途。

1.將數(shù)字轉(zhuǎn)換為貨幣

在 JavaScript 中處理貨幣時(shí)，事情會(huì)變得復(fù)雜。特別是當(dāng)你需要處理顯示不同類型的貨幣時(shí)。

JavaScript 提供了 Intl.NumberFormat 對(duì)象，它允許你以對(duì)語(yǔ)言敏感的方式格式化數(shù)字。它提供的選項(xiàng)之一是將數(shù)字格式化為貨幣。

該函數(shù)接受 3 個(gè)參數(shù)：

num - 要格式化的數(shù)字。
currency——要格式化的貨幣——默認(rèn)設(shè)置為“歐元”，因?yàn)槲抑饕枰幚砘跉W元的價(jià)格。
locale — 默認(rèn)設(shè)置為“nl-NL”，因?yàn)槲医?jīng)常處理顯示為荷蘭的價(jià)格。

你可以使用下面 CodePen 中的值。例如，你會(huì)看到將語(yǔ)言環(huán)境更改為“en-US”會(huì)將十進(jìn)制表示法從逗號(hào)更改為點(diǎn)。

function convertToCurrency(num, currency = 'EUR', locale = 'nl-NL') {
   const formatter = new Intl.NumberFormat(locale, {
       style: 'currency',
       currency: currency
   });
   return formatter.format(num);
}

2. 將 HTML 字符串轉(zhuǎn)換為 DOM 對(duì)象

在很多情況下，你可能會(huì)收到 HTML 字符串而不是 HTML 元素。例如，當(dāng)接收來(lái)自 API 的 JSON 響應(yīng)中的 HTML 或通過(guò) Nunjucks 之類的模板解析器呈現(xiàn)模板時(shí)。

你可以通過(guò) innerHTML 屬性將此 HTML 字符串直接注入到 dom 中，但有時(shí)你希望將此字符串轉(zhuǎn)換為 HTML 對(duì)象以進(jìn)行額外的轉(zhuǎn)換、驗(yàn)證或更具體的 DOM 注入。

該函數(shù)接受 2 個(gè)參數(shù)：

content — 要轉(zhuǎn)換為對(duì)象的 HTML 字符串。
selector——你想要接收的選擇器——DOMParser 對(duì)象將創(chuàng)建一個(gè)完整的 HTMLObject，包括一個(gè) <html> 和 <body> 標(biāo)記。如果你只想要某個(gè)元素，你可以傳入選擇器，例如“section”，你將收到該元素。

function parseStringAsHtml(
   content,
   selector
) {
   const domParser = new DOMParser();
   const parsed = domParser.parseFromString(content, 'text/html');
   return parsed.querySelector(selector);
}

3.去抖

在 JavaScript 中，debounce 函數(shù)將確保你的函數(shù)只會(huì)在每次用戶輸入時(shí)觸發(fā)一次，或者在等待參數(shù)中指定的時(shí)間段內(nèi)至少觸發(fā)一次。

例如，假設(shè)我們想根據(jù)搜索查詢向用戶顯示建議，我們可以在用戶輸入時(shí)顯示建議并在輸入每個(gè)字母后刷新，但這可能會(huì)讓用戶感到煩惱。通常在輸入一個(gè)鍵后等待至少 300 毫秒以顯示建議以確保用戶完成輸入。

這個(gè)函數(shù)有 3 個(gè)參數(shù)：

fn - 要執(zhí)行的函數(shù)。
wait — 函數(shù)執(zhí)行前的等待時(shí)間。
immediate — 一個(gè)布爾值，指示第一次調(diào)用函數(shù)時(shí)是否應(yīng)立即調(diào)用。

function debounce(fn, wait, immediate) {
   let timeout;
   return function setDebounce(...args) {
       const later = () => {
           timeout = null;
           if (!immediate) {
               fn.apply(this, args);
           }
       };
       const callNow = immediate && !timeout;
       clearTimeout(timeout);
       timeout = setTimeout(later, wait || 200);
       if (callNow) {
           fn.apply(this, args);
       }
   };
}

4. 日期驗(yàn)證

有時(shí)，你從代碼、用戶輸入或 API 中的某處收到日期字符串，你將其轉(zhuǎn)換為日期對(duì)象并嘗試編輯或顯示日期并收到日期無(wú)效的錯(cuò)誤。

使用這個(gè)簡(jiǎn)單的實(shí)用方法，你可以驗(yàn)證新構(gòu)建的日期對(duì)象是否實(shí)際上是有效的日期對(duì)象。

function isDateValid(date) {
   return !Number.isNaN(date.getTime());
}

5. 將 FormData 轉(zhuǎn)換為 JSON

創(chuàng)建 FormData 對(duì)象時(shí)，有時(shí)將其轉(zhuǎn)換為類似 JSON 的對(duì)象很有用。例如，當(dāng)你向其發(fā)布數(shù)據(jù)的 API 只接受 JSON 請(qǐng)求時(shí)，它不接受任何內(nèi)容。

在大多數(shù)情況下，一個(gè) FormData 對(duì)象可以很容易地映射到一個(gè)對(duì)象，但是在處理多選復(fù)選框時(shí)，事情會(huì)變得混亂。由于每個(gè)復(fù)選框都具有相同的名稱，因此對(duì)象的鍵值對(duì)將相互覆蓋。

這個(gè)簡(jiǎn)單的實(shí)用方法為FormData 轉(zhuǎn)換為一個(gè)對(duì)象，并確保將多選值映射到一個(gè)數(shù)組，而不是每次都覆蓋該值。

function convertFormdataToJsonObject(formData) {
   const data = {};
   for (const [key, value] of formData.entries()) {
       if (Object.prototype.hasOwnProperty.call(data, key)) {
           const oldValue = data[key];
           if (!Array.isArray(data[key])) {
               data[key] = [];
               data[key].push(oldValue);
           }
           data[key].push(value);
           continue;
       }
       data[key] = value;
   }
   return data;
}

6. 衡量一個(gè)函數(shù)的性能

有時(shí)你想知道你的應(yīng)用程序的哪一部分正在減慢你的網(wǎng)站速度，調(diào)試函數(shù)的執(zhí)行時(shí)間很有用。

幸運(yùn)的是，瀏覽器提供了本地支持來(lái)幫助你計(jì)算這一點(diǎn)。但不是將這些控制臺(tái)方法添加到每個(gè)函數(shù)中，而是每次都想測(cè)試，你可以簡(jiǎn)單地調(diào)用這個(gè)有用的實(shí)用程序方法。

此函數(shù)需要 2 個(gè)或更多參數(shù)：

name — 標(biāo)簽的名稱顯示在控制臺(tái)中。
fn - 您要衡量其性能的函數(shù)。
任何附加參數(shù)——你正在調(diào)用的函數(shù)的參數(shù)。

function measurePerformance(name, fn, ...args) {
 if (typeof fn !== "function") {
   console.error(`Provide a valid function, ${typeof fn} provided`)
   return;
 }
 console.time(name)
 fn.bind(this, ...args);
 console.timeEnd(name)
}

7.從數(shù)組中刪除重復(fù)項(xiàng)

我經(jīng)常發(fā)現(xiàn)自己需要從數(shù)組中刪除可能的重復(fù)項(xiàng)。此方法只是在將數(shù)組轉(zhuǎn)換為 Set 并返回后返回一個(gè)新數(shù)組。

集合是一個(gè)簡(jiǎn)單的對(duì)象，它存儲(chǔ)只能出現(xiàn)一次的值，使其成為對(duì)數(shù)組進(jìn)行重復(fù)數(shù)據(jù)刪除的簡(jiǎn)單方法。

function removeDuplicates(array) {
   if (!Array.isArray(array)) {
       console.error(`array expected, ${typeof array} provided`)
       return
   }
   return [...new Set(array)]
}