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

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

01、randomIntInRange

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

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

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

02、formatBytes

將文件大小從字節(jié)轉(zhuǎn)換為人類可讀的格式（例如，千字節(jié)、兆字節(jié)）是 Web 應(yī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ù)計算出的大小從 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

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

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

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

05、scrollToTop 

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

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

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

06、once

在某些情況下，您希望某個功能只執(zhí)行一次，類似于您使用 onload 事件的方式。 once 函數(shù)確保給定函數(shù)只被調(diào)用一次，防止重復(fù)初始化或執(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)站時，將樣式應(yī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ī)則，確保指定的樣式應(yīng)用于與選擇器匹配的所有元素。

結(jié)論

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

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