前端工程师早Yi不是当年那个只会切切图、写写jQuery的“切图仔”了。现在的我们，左手React/Vue，右手Webpack/Vite，还得时刻盯着Node.js和Serverless的动态。说实话，这种技术边界的模糊化，既带来了机遇，也带来了深深的焦虑。每天面对着层出不穷的新框架、新库，有时候真想大喊一声：“放过我吧！”

但不管技术怎么变，有些底层的逻辑是永远绕不过去的。在日常的业务开发中，我们往往把80%的时间花在了重复的CRUD和繁琐的数据处理上，真正用来打磨核心业务逻辑的时间少之又少。你有没有过这种经历：为了把一个时间戳格式化成“YYYY-MM-DD”，翻了半天MDN文档；为了处理一个深拷贝，引入了庞大的Lodash，结果打包体积瞬间飙升？

别急，今天这篇文章就是来救命的。我结合了自己和团队这几年的踩坑经验，整理了一套高频、实用、轻量的JavaScript工具函数。这些代码没有复杂的依赖，也没有花里胡哨的封装，每一个dou是经过实战检验的“特种兵”。哪怕你现在的IDE是Sublime Text，还是WebStorm，甚至是VS Code，把这些函数放进你的`utils.js`里绝对Neng让你的开发效率像坐了火箭一样蹭蹭往上涨。

一、 时间与数据的优雅处理

时间处理我们只需要一个简单的格式化函数就够了。

1. 万Neng日期格式化

别再手动去拼接年月日了容易出错还显得不专业。这个函数支持自定义格式，默认输出标准的`YYYY-MM-DD HH:mm:ss`，基本覆盖了90%的业务需求。

/**
 * 格式化时间
 * @param {Date|string|number} date - 时间对象或时间戳
 * @param {string} fmt - 目标格式，默认 'YYYY-MM-DD HH:mm:ss'
 */
function formatDate {
  if  return ''
  // 处理传入的时间戳或字符串，统一转为Date对象
  date = date instanceof Date ? date : new Date
  const o = {
    'M+': date.getMonth + 1, // 月份
    'D+': date.getDate,      // 日
    'H+': date.getHours,     // 小时
    'm+': date.getMinutes,   // 分
    's+': date.getSeconds    // 秒
  }
  // 处理年份
  if /.test) {
    fmt = fmt.replace.toString.slice)
  }
  // 循环匹配其他占位符
  for  {
    if `).test) {
      // 补零操作：Ru果是一位数，前面补0
      fmt = fmt.replace(
        RegExp.$1,
        RegExp.$1.length === 1 ? o : o.toString.padStart
      )
    }
  }
  return fmt
}
// 示例：
// formatDate) 
// 输出: "2023-10-27 15:30:00"

2. 数字千分位格式化

Zuo金融类或者电商类项目的同学肯定遇到过动不动就要显示金额，比如“1,234,567.00”。手写正则虽然Neng实现，但利用原生的`toLocaleString`才是Zui优雅的姿势，既省事又不容易出错。

/**
 * 数字金额千分位格式化
 * @param {number} num - 数字
 */
function formatMoney {
  if ) return ''
  return Number.toLocaleString
}
// 示例：
// formatMoney 
// 输出: "1,234,567.89"

3. 精准的数据类型判断

大家dou知道`typeof null`是`object`，`typeof `也是`object`，这简直是JavaScript的历史遗留坑。用`Object.prototype.toString.call`是判断类型Zui准确的方法，没有之一。

/**
 * 获取详细的数据类型
 * @param {*} val - 任意变量
 */
function getType {
  return Object.prototype.toString.call.slice.toLowerCase
}
// 示例：
// getType      -> 'array'
// getType      -> 'object'
// getType     -> 'null'
// getType-> 'undefined'
// getType    -> 'regexp'

二、 性Neng优化的“左右护法”：防抖与节流

性Neng优化是前端进阶的必修课。在处理高频触发的事件时Ru果不Zuo限制，浏览器分分钟卡死给你kan。防抖和节流就是解决这个问题的两把利剑。

4. 防抖

想象一下用户在搜索框输入“手机”，你难道要每敲一个字母就发一次请求吗？防抖的核心思想就是：等你动作停下来了我再执行。这对于搜索联想、表单验证等场景简直是神器。

/**
 * 防抖函数
 * @param {Function} fn - 需要执行的函数
 * @param {number} delay - 延迟时间，默认300ms
 */
function debounce {
  let timer = null
  return function  {
    // 每次触发dou清除上一次的定时器
    clearTimeout
    timer = setTimeout => {
      fn.apply
    }, delay)
  }
}

5. 节流

Ru果说防抖是“等你不动了再动手”，那节流就是“不管你动多快，我只按我的节奏来”。比如页面滚动事件，你一秒钟滚动了100次其实只需要geng新10次UI就够了。节流Neng极大降低函数的执行频率。

/**
 * 节流函数
 * @param {Function} fn - 需要执行的函数
 * @param {number} interval - 时间间隔，默认300ms
 */
function throttle {
  let last = 0
  return function  {
    const now = Date.now
    if  {
      last = now
      fn.apply
    }
  }
}

6. 防抖立即执行版

有时候我们既希望第一次点击立即生效，又希望防止用户疯狂连点。比如“提交订单”按钮，点一下要马上发请求，但随后的一秒内不Neng再点。这个变种版防抖就是为了解决这个痛点而生的。

/**
 * 立即执行的防抖
 * @param {Function} fn - 需要执行的函数
 * @param {number} delay - 延迟时间，默认1000ms
 */
function debounceImmediate {
  let timer = null
  return function  {
    // 第一次进来肯定没有timer，直接执行
    const first = !timer
    clearTimeout
    timer = setTimeout => , delay)
    if  fn.apply
  }
}

三、 数据结构的深层操作

JavaScript中引用类型的坑，那是三天三夜dou说不完。特别是对象和数组的赋值，一不小心就会产生“副作用”，改了新数据，老数据也跟着变。这时候，深拷贝和去重就显得尤为重要。

7. 深拷贝

虽然`JSON.parse)`Neng解决大部分问题，但遇到`

/**
 * 深拷贝
 * @param {*} obj - 需要拷贝的对象
 * @param {WeakMap} hash - 用于检测循环引用
 */
function deepClone) {
  // 基础类型直接返回
  if  return obj
  // 检查循环引用
  if ) return hash.get
  const clone = Array.isArray ?  : {}
  hash.set
  for  {
    if ) {
      clone = deepClone
    }
  }
  return clone
}

8. 数组去重

ES6出现之前，我们要写一堆双重循环或者利用对象键值对来去重。现在`Set`数据结构让这件事变得像喝水一样简单。一行代码，干净利落。

/**
 * 数组去重
 * @param {Array} arr - 数组
 */
function uniqueArr {
  return 
}

9. 数组扁平化

后端有时候返回的数据结构hen奇葩，嵌套了好几层数组。`flat`方法是ES2019的新特性，参数`Infinity`表示不管你嵌套多少层，统统给我拍平。

/**
 * 数组扁平化
 * @param {Array} arr - 数组
 */
function flatten {
  return arr.flat
}

四、 业务场景中的“小帮手”

除了那些高大上的算法，日常开发中geng多的是琐碎的业务逻辑。比如从URL拿参数、给手机号打码、存个数据到本地。这些小事虽然简单，但写起来也挺烦人的。

10. 获取 URL 参数

还在用正则表达式去解析URL吗？别那么辛苦了现代浏览器内置的`URL`和`URLSearchParams`API专门就是为了干这个的，既强大又好读。

/**
 * 获取URL参数对象
 * @param {string} url - 链接地址，默认取当前页面的
 */
function getQueryParams {
  const params = {}
  // 利用URLSearchParams自动解析
  new URL.searchParams.forEach => )
  return params
}
// 示例：
// getQueryParams 
// 输出: { id: '123', name: 'test' }

11. 手机号脱敏

隐私保护现在越来越严格，用户列表里的手机号中间几位肯定是要变成星号的。这个正则表达式，专治各种不服。

/**
 * 手机号脱敏
 * @param {string} phone - 手机号
 */
function maskPhone {
  if  return phone
  return phone.replace\d{4}/, '$1****$2')
}
// 示例：
// maskPhone -> '138****5678'

12. 姓名脱敏

同理，姓名也要保护。不管你是两个字还是三个字，只留第一个字，剩下的全变成星号，简单粗暴又有效。

/**
 * 姓名脱敏
 * @param {string} name - 姓名
 */
function maskName {
  if  return ''
  if  return name
  return name + '*'.repeat
}
// 示例：
// maskName   -> '张*'
// maskName -> '张**'

13. 存储操作

原生的`localStorage`只Neng存字符串，每次存取dou要手动`JSON.stringify`和`JSON.parse`，还要处理异常，烦不胜烦。封装一个对象，把脏活累活dou包圆了。

/**
 * 本地存储封装
 */
const storage = {
  set {
    localStorage.setItem)
  },
  get {
    const val = localStorage.getItem
    if  return null
    try {
      return JSON.parse
    } catch {
      // Ru果解析失败，直接返回原值
      return val
    }
  },
  remove {
    localStorage.removeItem
  },
  clear {
    localStorage.clear
  }
}

14. 生成随机字符串

有时候我们需要生成一个临时的ID或者token，不需要太复杂，只要不重复就行。这个函数去掉了容易混淆的字符，生成的字符串可读性geng好。

/**
 * 生成随机字符串
 * @param {number} len - 长度，默认8
 */
function randomStr {
  const str = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
  let res = ''
  for  {
    res += str
  }
  return res
}

15. 滚动到顶部

“回到顶部”按钮是长页面的标配。以前我们还得算`scrollTop`Zuo动画，现在CSS和JS原生APIdou支持平滑滚动了一行代码搞定，体验丝般顺滑。

/**
 * 平滑滚动到顶部
 */
function scrollToTop {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
}

Zui后：把效率提上去，把生活还给自己

这15个工具函数，虽然kan起来不起眼，但它们覆盖了前端业务开发中绝大多数的琐碎场景。真的，建议你直接在项目里新建一个`utils.js`或者`helpers.js`，把它们全部存进去。下次再遇到类似的需求，直接`import`或者`Ctrl+C/V`，那种爽快感谁用谁知道。

技术发展的初衷是为了解放生产力，而不是为了增加我们的负担。我们学习新框架、新工具，是为了geng快地解决问题，而不是为了“卷”而“卷”。把这些基础打牢，把重复劳动自动化，我们才Neng腾出geng多的时间去思考架构、去优化体验，或者，哪怕只是早点下班陪陪家人，不也是一件hen美好的事情吗？

希望这篇文章Neng帮到你。Ru果你也有私藏的“杀手级”工具函数，别藏着掖着，评论区分享一下让我们一起把代码写得geng优雅、geng高效！

---