JavaScript 是前端領(lǐng)域里功能強(qiáng)大的編程語言，它也是現(xiàn)代 Web 開發(fā)的主要語言之一。 作為一名開發(fā)人員，擁有一組方便的 JavaScript 函數(shù)片段可以提高您的工作效率，并使您能夠編寫更清晰、更高效的代碼。

在今天這篇文章中，我們將探討一些非常有用的 JavaScript 函數(shù)片段，希望對(duì)您有用。

【資料圖】

01、randomIntInRange

生成特定范圍內(nèi)的隨機(jī)整數(shù)，是 JavaScript 應(yīng)用程序中的常見需求。 randomIntInRange 函數(shù)允許您在給定的最小和最大范圍內(nèi)生成隨機(jī)整數(shù)。

function randomIntInRange(min, max) {  return Math.floor(Math.random() * (max - min + 1)) + min;}

通過利用 Math.random 函數(shù)返回 0（含）和 1（不含）之間的隨機(jī)數(shù)，并應(yīng)用適當(dāng)?shù)目s放和舍入，randomIntInRange 生成指定范圍內(nèi)的隨機(jī)整數(shù)。

02、formatBytes

將文件大小從字節(jié)轉(zhuǎn)換為人類可讀的格式（例如，千字節(jié)、兆字節(jié)）是 Web 應(yīng)用程序中的一項(xiàng)常見任務(wù)。 formatBytes 函數(shù)將給定數(shù)量的字節(jié)轉(zhuǎn)換為人類可讀的字符串表示形式。

function formatBytes(bytes) {  if (bytes === 0) {    return "0 Bytes";  }  const k = 1024;  const sizes = ["Bytes", "KB", "MB", "GB", "TB"];  const i = Math.floor(Math.log(bytes) / Math.log(k));  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];}

formatBytes 函數(shù)通過將輸入字節(jié)除以 1024 的冪來處理不同大小的字節(jié)。然后它根據(jù)計(jì)算出的大小從 sizes 數(shù)組中選擇適當(dāng)?shù)膯挝弧?使用 toFixed(2) 將結(jié)果值格式化為兩位小數(shù)，并在其后附加單位。

03、formatDate

使用日期和時(shí)間是 Web 開發(fā)中的常見要求。 formatDate 函數(shù)提供了一種將 JavaScript Date 對(duì)象格式化為所需字符串表示形式的便捷方法。

function formatDate(date, format) {  const options = {    year: "numeric",    month: "long",    day: "numeric"  };  return date.toLocaleDateString(format, options);}

formatDate 函數(shù)將 Date 對(duì)象和格式字符串作為輸入。 在此示例中，我們使用 toLocaleDateString 方法根據(jù)指定選項(xiàng)格式化日期。

通過為“年、月和日”指定選項(xiàng)，我們可以自定義結(jié)果字符串的格式。 您可以修改選項(xiàng)以滿足您的特定格式要求。

04、capitalize

將字符串的首字母大寫是一個(gè)簡單的格式化任務(wù)，經(jīng)常出現(xiàn)在 JavaScript 應(yīng)用程序中。 capitalize 函數(shù)將給定字符串的第一個(gè)字母大寫，同時(shí)保留字符串的其余部分。

function capitalize(str) {  return str.charAt(0).toUpperCase() + str.slice(1);}

capitalize 函數(shù)使用 charAt(0) 提取字符串的第一個(gè)字符，使用 toUpperCase() 將其轉(zhuǎn)換為大寫，然后使用 slice(1) 將其與字符串的其余部分連接起來。 這導(dǎo)致原始字符串的大寫版本。

05、scrollToTop

滾動(dòng)到網(wǎng)頁頂部是一種常見的交互方式，尤其是在存在長內(nèi)容的場景中。 scrollToTop 函數(shù)將頁面平滑地滾動(dòng)到頂部位置。

function scrollToTop() {  window.scrollTo({    top: 0,    behavior: "smooth"  });}

scrollToTop 函數(shù)利用窗口對(duì)象的 scrollTo 方法滾動(dòng)到頂部位置。 通過將頂部值設(shè)置為 0 并將行為指定為“平滑”，頁面可以平滑地滾動(dòng)到頂部。

06、once

在某些情況下，您希望某個(gè)功能只執(zhí)行一次，類似于您使用 onload 事件的方式。 once 函數(shù)確保給定函數(shù)只被調(diào)用一次，防止重復(fù)初始化或執(zhí)行。

function once(callback) {  let executed = false;  return function() {    if (!executed) {      executed = true;      callback();    }  };}

要使用 once 函數(shù)，請(qǐng)將所需函數(shù)作為回調(diào)傳遞。 然后可以調(diào)用返回的函數(shù)，它將確保回調(diào)僅在第一次調(diào)用時(shí)執(zhí)行。

07、truncateString

有時(shí)，您可能需要將字符串截?cái)嗟教囟ㄩL度并在末尾添加省略號(hào) (...) 以指示截?cái)唷?truncateString 函數(shù)將給定的字符串截?cái)酁橹付ǖ淖畲箝L度，并在必要時(shí)附加省略號(hào)。

function truncateString(str, maxLength) {  if (str.length <= maxLength) {    return str;  }  return str.slice(0, maxLength) + "...";}

truncateString 函數(shù)檢查字符串的長度是否小于或等于指定的 maxLength。 如果是這樣，它將按原樣返回原始字符串。 否則，它使用 slice 提取字符串的一部分，從開頭到 maxLength 并附加省略號(hào)以指示截?cái)唷?/p>08、isNative

在某些情況下，了解給定功能是否是本機(jī)功能至關(guān)重要，尤其是在決定是否覆蓋它時(shí)。 isNative 函數(shù)允許您確定一個(gè)函數(shù)是否是原生的或者它是否已經(jīng)在 JavaScript 中實(shí)現(xiàn)。

function isNative(fn) {  return /\[native code\]/.test(fn.toString());}

isNative 函數(shù)利用正則表達(dá)式來檢查函數(shù)的字符串表示形式。 如果函數(shù)的源代碼包含短語“[native code]”，則表示該函數(shù)是瀏覽器原生的，而不是在 JavaScript 中實(shí)現(xiàn)的

09、debouncePromise

有時(shí)您可能需要消除異步操作，例如進(jìn)行 API 調(diào)用或處理用戶輸入。 debouncePromise 函數(shù)提供了一種去抖動(dòng)Promise的方法，確保只執(zhí)行最后一次調(diào)用。

function debouncePromise(fn, delay) {  let timeoutId;  return function (...args) {    return new Promise((resolve, reject) => {      clearTimeout(timeoutId);      timeoutId = setTimeout(async () => {        try {          const result = await fn(...args);          resolve(result);        } catch (error) {          reject(error);        }      }, delay);    });  };}

debouncePromise 函數(shù)采用基于Promise的函數(shù) (fn) 和延遲作為參數(shù)。 它返回一個(gè)將原始函數(shù)包裝在Promise中的去抖動(dòng)函數(shù)。 該函數(shù)使用 setTimeout 對(duì)調(diào)用進(jìn)行去抖動(dòng)，確保在指定延遲后僅執(zhí)行最后一次調(diào)用。 它根據(jù)包裝函數(shù)的結(jié)果解決或拒絕承諾。

10、memoize

memoize化是一種用于緩存昂貴函數(shù)調(diào)用的結(jié)果并為后續(xù)調(diào)用檢索它們的技術(shù)。 memoize 函數(shù)提供了一種通用方法來記憶任何具有不同參數(shù)的函數(shù)。

function memoize(fn) {  const cache = new Map();  return function (...args) {    const key = JSON.stringify(args);    if (cache.has(key)) {      return cache.get(key);    }    const result = fn(...args);    cache.set(key, result);    return result;  };}

memoize 函數(shù)使用 Map 對(duì)象創(chuàng)建緩存。 它返回一個(gè)包裝函數(shù)，檢查當(dāng)前參數(shù)的結(jié)果是否存在于緩存中。 如果是，它會(huì)檢索并返回緩存的結(jié)果。 否則，它將使用參數(shù)調(diào)用原始函數(shù)，將結(jié)果存儲(chǔ)在緩存中并返回。 使用相同參數(shù)的后續(xù)調(diào)用將檢索緩存的結(jié)果，而不是重新計(jì)算它。

11、insertRule

在處理動(dòng)態(tài)和大量使用 AJAX 的網(wǎng)站時(shí)，將樣式應(yīng)用于多個(gè)元素可能效率低下且麻煩。 insertRule 函數(shù)提供了一種更有效的方法，它允許您為選擇器定義樣式，類似于您在樣式表中的做法。

function insertRule(selector, style) {  const styleSheet = document.styleSheets[0];  if (styleSheet.insertRule) {    styleSheet.insertRule(`${selector} { ${style} }`, 0);  } else if (styleSheet.addRule) {    styleSheet.addRule(selector, style, 0);  }}

要使用 insertRule 函數(shù)，請(qǐng)?zhí)峁┧璧倪x擇器和樣式作為參數(shù)。 該函數(shù)將在文檔中找到的第一個(gè)樣式表中插入一個(gè)新規(guī)則，確保指定的樣式應(yīng)用于與選擇器匹配的所有元素。

結(jié)論

請(qǐng)記住定制這些片段以適合您的項(xiàng)目需求和編碼風(fēng)格。 對(duì)它們進(jìn)行試驗(yàn)、組合，并在它們的基礎(chǔ)上進(jìn)行構(gòu)建，以創(chuàng)建更強(qiáng)大的自定義功能。

最后，感謝您的閱讀，希望對(duì)您有所幫助！

標(biāo)簽：