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

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

01、randomIntInRange

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

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

通過利用 Math.random 函數返回 0（含）和 1（不含）之間的隨機數，并應用適當的縮放和舍入，randomIntInRange 生成指定范圍內的隨機整數。

02、formatBytes

將文件大小從字節轉換為人類可讀的格式（例如，千字節、兆字節）是 Web 應用程序中的一項常見任務。 formatBytes 函數將給定數量的字節轉換為人類可讀的字符串表示形式。

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 函數通過將輸入字節除以 1024 的冪來處理不同大小的字節。然后它根據計算出的大小從 sizes 數組中選擇適當的單位。 使用 toFixed(2) 將結果值格式化為兩位小數，并在其后附加單位。

03、formatDate

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

function formatDate(date, format) {
  const options = {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  };


  return date.toLocaleDateString(format, options);
}

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

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

04、capitalize

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

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

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

05、scrollToTop 

滾動到網頁頂部是一種常見的交互方式，尤其是在存在長內容的場景中。 scrollToTop 函數將頁面平滑地滾動到頂部位置。

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

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

06、once

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

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

要使用 once 函數，請將所需函數作為回調傳遞。 然后可以調用返回的函數，它將確保回調僅在第一次調用時執行。

07、truncateString

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

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


  return str.slice(0, maxLength) + '...';
}

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

08、isNative

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

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

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

09、debouncePromise

有時您可能需要消除異步操作，例如進行 API 調用或處理用戶輸入。 debouncePromise 函數提供了一種去抖動Promise 的方法，確保只執行最后一次調用。

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 函數采用基于Promise 的函數 (fn) 和延遲作為參數。 它返回一個將原始函數包裝在Promise 中的去抖動函數。 該函數使用 setTimeout 對調用進行去抖動，確保在指定延遲后僅執行最后一次調用。 它根據包裝函數的結果解決或拒絕承諾。

10、memoize

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

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 函數使用 Map 對象創建緩存。 它返回一個包裝函數，檢查當前參數的結果是否存在于緩存中。 如果是，它會檢索并返回緩存的結果。 否則，它將使用參數調用原始函數，將結果存儲在緩存中并返回。 使用相同參數的后續調用將檢索緩存的結果，而不是重新計算它。

11、insertRule

在處理動態和大量使用 AJAX 的網站時，將樣式應用于多個元素可能效率低下且麻煩。 insertRule 函數提供了一種更有效的方法，它允許您為選擇器定義樣式，類似于您在樣式表中的做法。

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 函數，請提供所需的選擇器和樣式作為參數。 該函數將在文檔中找到的第一個樣式表中插入一個新規則，確保指定的樣式應用于與選擇器匹配的所有元素。

結論

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

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