快捷導(dǎo)航

15個(gè)前端JavaScript開發(fā)超級(jí)實(shí)用的工具函數(shù)分享(建議收藏)

更新時(shí)間：2026年04月10日 09:03:12 作者：前端Hardy

這篇文章主要和大家分享了15個(gè)前端JavaScript開發(fā)超級(jí)實(shí)用的工具函數(shù),沒有復(fù)雜算法,也沒有花里胡哨的封裝,全是業(yè)務(wù)里真正常用的,復(fù)制到項(xiàng)目里就能跑,非常適合放進(jìn)自己的 utils 工具庫(kù)

1. 時(shí)間格式化（最常用）
2. 防抖（輸入搜索專用）
3. 節(jié)流（滾動(dòng)/點(diǎn)擊防重復(fù)）
4. 深拷貝（處理對(duì)象/數(shù)組）
5. 獲取 URL 參數(shù)
6. 手機(jī)號(hào)脫敏
7. 姓名脫敏
8. 數(shù)字千分位格式化
9. 存儲(chǔ)操作（localStorage 封裝）
10. 判斷數(shù)據(jù)類型
11. 數(shù)組去重
12. 數(shù)組扁平化
13. 生成隨機(jī)字符串（ID）
14. 防抖立即執(zhí)行版（提交按鈕專用）
15. 滾動(dòng)到頂部（平滑）
最后

大家好，今天給大家整理了一套前端日常開發(fā)高頻用到的工具函數(shù)。

沒有復(fù)雜算法，也沒有花里胡哨的封裝，全是業(yè)務(wù)里真正常用的：時(shí)間格式化、手機(jī)號(hào)脫敏、防抖節(jié)流、深拷貝、URL參數(shù)解析……全部即插即用，復(fù)制到項(xiàng)目里就能跑，非常適合放進(jìn)自己的 utils 工具庫(kù)。

1. 時(shí)間格式化（最常用）

把時(shí)間戳 / Date 對(duì)象轉(zhuǎn)成 YYYY-MM-DD HH:mm:ss

function formatDate(date, fmt = 'YYYY-MM-DD HH:mm:ss') {
  if (!date) return ''
  date = date instanceof Date ? date : new Date(date)

  const o = {
    'M+': date.getMonth() + 1,
    'D+': date.getDate(),
    'H+': date.getHours(),
    'm+': date.getMinutes(),
    's+': date.getSeconds()
  }

  if (/(Y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, date.getFullYear().toString().slice(4 - RegExp.$1.length))
  }

  for (const k in o) {
    if (new RegExp(`(${k})`).test(fmt)) {
      fmt = fmt.replace(
        RegExp.$1,
        RegExp.$1.length === 1 ? o[k] : o[k].toString().padStart(2, '0')
      )
    }
  }
  return fmt
}

// 使用
formatDate(new Date()) // 2026-04-09 15:30:20

2. 防抖（輸入搜索專用）

function debounce(fn, delay = 300) {
  let timer = null
  return function (...args) {
    clearTimeout(timer)
    timer = setTimeout(() => fn.apply(this, args), delay)
  }
}

3. 節(jié)流（滾動(dòng)/點(diǎn)擊防重復(fù)）

function throttle(fn, interval = 500) {
  let last = 0
  return function (...args) {
    const now = Date.now()
    if (now - last >= interval) {
      last = now
      fn.apply(this, args)
    }
  }
}

4. 深拷貝（處理對(duì)象/數(shù)組）

function deepClone(obj, hash = new WeakMap()) {
  if (obj === null || typeof obj !== 'object') return obj
  if (hash.has(obj)) return hash.get(obj)

  const clone = Array.isArray(obj) ? [] : {}
  hash.set(obj, clone)

  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      clone[key] = deepClone(obj[key], hash)
    }
  }
  return clone
}

5. 獲取 URL 參數(shù)

function getQueryParams(url = location.href) {
  const params = {}
  new URL(url).searchParams.forEach((v, k) => (params[k] = v))
  return params
}

// 使用
getQueryParams('https://xxx.com?id=1&name=test') // { id: '1', name: 'test' }

6. 手機(jī)號(hào)脫敏

function maskPhone(phone) {
  if (!phone || phone.length !== 11) return phone
  return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
}

// 13812345678 → 138****5678

7. 姓名脫敏

function maskName(name) {
  if (!name) return ''
  if (name.length === 1) return name
  return name[0] + '*'.repeat(name.length - 1)
}

// 張三 → 張*
// 張三豐 → 張**

8. 數(shù)字千分位格式化

function formatMoney(num) {
  if (isNaN(num)) return '0'
  return Number(num).toLocaleString()
}

// 1234567 → 1,234,567

9. 存儲(chǔ)操作（localStorage 封裝）

const storage = {
  set(key, val) {
    localStorage.setItem(key, JSON.stringify(val))
  },
  get(key) {
    const val = localStorage.getItem(key)
    if (!val) return null
    try {
      return JSON.parse(val)
    } catch {
      return val
    }
  },
  remove(key) {
    localStorage.removeItem(key)
  },
  clear() {
    localStorage.clear()
  }
}

10. 判斷數(shù)據(jù)類型

function getType(val) {
  return Object.prototype.toString.call(val).slice(8, -1).toLowerCase()
}

// getType([]) → 'array'
// getType({}) → 'object'
// getType(null) → 'null'

11. 數(shù)組去重

function uniqueArr(arr) {
  return [...new Set(arr)]
}

12. 數(shù)組扁平化

function flatten(arr) {
  return arr.flat(Infinity)
}

13. 生成隨機(jī)字符串（ID）

function randomStr(len = 8) {
  const str = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
  let res = ''
  for (let i = 0; i < len; i++) {
    res += str[Math.floor(Math.random() * str.length)]
  }
  return res
}

14. 防抖立即執(zhí)行版（提交按鈕專用）

function debounceImmediate(fn, delay = 500) {
  let timer = null
  return function (...args) {
    const first = !timer
    clearTimeout(timer)
    timer = setTimeout(() => (timer = null), delay)
    if (first) fn.apply(this, args)
  }
}

15. 滾動(dòng)到頂部（平滑）

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

最后

這 15 個(gè)工具函數(shù)基本覆蓋了80% 前端業(yè)務(wù)場(chǎng)景，建議直接新建一個(gè) utils.js 全部存起來，以后開發(fā)至少快一倍。

到此這篇關(guān)于15個(gè)前端JavaScript開發(fā)超級(jí)實(shí)用的工具函數(shù)分享(建議收藏)的文章就介紹到這了,更多相關(guān)前端工具函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: