環(huán)球短訊！11個非常有用的 JavaScript 函數(shù)代碼片段
發(fā)布時間：2023-06-13 19:18:31 文章來源：web前端開發(fā)
JavaScript是前端領(lǐng)域里功能強大的編程語言，它也是現(xiàn)代Web開發(fā)的主要

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

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


【資料圖】

01、randomIntInRange

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

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

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

02、formatBytes

將文件大小從字節(jié)轉(zhuǎn)換為人類可讀的格式（例如，千字節(jié)、兆字節(jié)）是 Web 應用程序中的一項常見任務。 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ù)計算出的大小從 sizes 數(shù)組中選擇適當?shù)膯挝弧?使用 toFixed(2) 將結(jié)果值格式化為兩位小數(shù)，并在其后附加單位。

03、formatDate

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

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

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

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

04、capitalize

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

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

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

05、scrollToTop

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

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

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

06、once

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

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

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

07、truncateString

有時，您可能需要將字符串截斷到特定長度并在末尾添加省略號 (...) 以指示截斷。 truncateString 函數(shù)將給定的字符串截斷為指定的最大長度，并在必要時附加省略號。

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

truncateString 函數(shù)檢查字符串的長度是否小于或等于指定的 maxLength。 如果是這樣，它將按原樣返回原始字符串。 否則，它使用 slice 提取字符串的一部分，從開頭到 maxLength 并附加省略號以指示截斷。

08、isNative

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

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

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

09、debouncePromise

有時您可能需要消除異步操作，例如進行 API 調(diào)用或處理用戶輸入。 debouncePromise 函數(shù)提供了一種去抖動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ù)。 它返回一個將原始函數(shù)包裝在Promise中的去抖動函數(shù)。 該函數(shù)使用 setTimeout 對調(diào)用進行去抖動，確保在指定延遲后僅執(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 對象創(chuàng)建緩存。 它返回一個包裝函數(shù)，檢查當前參數(shù)的結(jié)果是否存在于緩存中。 如果是，它會檢索并返回緩存的結(jié)果。 否則，它將使用參數(shù)調(diào)用原始函數(shù)，將結(jié)果存儲在緩存中并返回。 使用相同參數(shù)的后續(xù)調(diào)用將檢索緩存的結(jié)果，而不是重新計算它。

11、insertRule

在處理動態(tài)和大量使用 AJAX 的網(wǎng)站時，將樣式應用于多個元素可能效率低下且麻煩。 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ù)，請?zhí)峁┧璧倪x擇器和樣式作為參數(shù)。 該函數(shù)將在文檔中找到的第一個樣式表中插入一個新規(guī)則，確保指定的樣式應用于與選擇器匹配的所有元素。

結(jié)論

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

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

標簽：

資訊播報

樂活HOT

娛樂LOVE

精彩推送