前端开发必备：常用工具函数合集
在日常前端开发中，我们经常需要用到各种工具函数。这些函数能够提高开发效率，减少重复代码。今天分享一些实用的工具函数，可以直接用在项目中。
基础工具函数
首先，我们创建一个工具对象，把这些函数集中管理：
const utils = {
// 验证邮箱格式
validateEmail(inputStr) {
return /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(inputStr)
},
// 验证手机号码（中国大陆）
validateMobile(inputStr) {
return /^1[3-9]\d{9}$/.test(inputStr)
},
// 验证固定电话
validateTelephone(inputStr) {
return /^(0\d{2,3}-)?\d{7,8}$/.test(inputStr)
},
// 验证URL地址
validateURL(inputStr) {
return /^https?:\/\/.+\..+/.test(inputStr)
}
}设备检测函数
检测用户使用的设备和浏览器很有用，特别是在做响应式设计时：
// 获取用户代理信息
const userAgent = navigator.userAgent.toLowerCase()
const deviceUtils = {
// 检查是否为微信浏览器
isWeChat() {
return /micromessenger/.test(userAgent)
},
// 检查是否为QQ浏览器
isQQBrowser() {
return /qqbrowser/.test(userAgent)
},
// 检查是否为移动设备
isMobile() {
return /android|webos|iphone|ipod|blackberry/.test(userAgent)
},
// 检查是否为PC设备
isPC() {
return !this.isMobile()
},
// 检查是否为iOS设备
isIOS() {
return /iphone|ipad|ipod/.test(userAgent)
},
// 检查是否为Android设备
isAndroid() {
return /android/.test(userAgent)
}
}dom操作函数
这些函数帮助处理网页元素和用户交互：
const domUtils = {
// 移除html标签
stripHTML(html) {
const div = document.createElement('div')
div.innerHTML = html
return div.textContent || div.innerText || ''
},
// 动态加载JavaScript文件
loadScript(url) {
return new Promise((resolve, reject) => {
const script = document.createElement('script')
script.src = url
script.onload = resolve
script.onerror = reject
document.head.appendChild(script)
})
},
// 获取滚动位置
getScrollPosition(element = window) {
if (element === window) {
return {
x: window.pageXOffset,
y: window.pageYOffset
}
}
return {
x: element.scrollLeft,
y: element.scrollTop
}
},
// 平滑滚动到顶部
scrollToTop() {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
if (scrollTop > 0) {
window.requestAnimationFrame(this.scrollToTop)
window.scrollTo(0, scrollTop - scrollTop / 8)
}
},
// 复制文本到剪贴板（现代方法）
async copyToClipboard(text) {
try {
await navigator.clipboard.writeText(text)
return true
} catch (err) {
// 降级方案
const textArea = document.createElement('textarea')
textArea.value = text
document.body.appendChild(textArea)
textArea.select()
const result = document.execCommand('copy')
document.body.removeChild(textArea)
return result
}
}
}数据处理函数
处理数组、数字等数据的实用函数：
const dataUtils = {
// 数组去重
unique(arr) {
return [...new Set(arr)]
},
// 检查元素是否在数组中
inArray(arr, item) {
return arr.includes(item)
},
// 数组随机排序（洗牌算法）
shuffle(array) {
const result = [...array]
for (let i = result.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[result[i], result[j]] = [result[j], result[i]]
}
return result
},
// 检测密码强度
checkPasswordStrength(password) {
let strength = 0
if (password.length < 6) return 0
if (/[0-9]/.test(password)) strength++
if (/[a-z]/.test(password)) strength++
if (/[A-Z]/.test(password)) strength++
if (/[^a-zA-Z0-9]/.test(password)) strength++
return strength
},
// 数字转中文（简易版）
numberToChinese(num) {
const digits = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']
const units = ['', '十', '百', '千', '万']
if (num < 10) return digits[num]
if (num < 20) return num === 10 ? '十' : '十' + digits[num % 10]
let result = ''
let str = num.toString()
for (let i = 0; i < str.length; i++) {
const digit = parseInt(str[i])
const unit = units[str.length - i - 1]
if (digit !== 0) {
result += digits[digit] + unit
}
}
return result
}
}使用方法
在项目中创建一个 utils.js 文件，导出所有工具函数：
// utils.js
export { utils, deviceUtils, domUtils, dataUtils }在需要的页面中引入：
import { utils, deviceUtils } from './utils.js'
// 使用示例
console.log(utils.validateEmail('test@example.com')) // true
console.log(deviceUtils.isWeChat()) // false
console.log(dataUtils.checkPasswordStrength('Abc123!')) // 4测试示例
可以在HTML中测试这些函数：
<div class="test-card">
<h3>邮箱验证测试</h3>
<input type="text" id="emailTest" placeholder="输入邮箱地址">
<button onclick="testEmail()">验证邮箱</button>
<div id="emailResult"></div>
</div>
<script>
function testEmail() {
const email = document.getElementById('emailTest').value
const isValid = utils.validateEmail(email)
const result = document.getElementById('emailResult')
if (isValid) {
result.textContent = '✅ 邮箱格式正确'
result.className = 'success'
} else {
result.textContent = '❌ 邮箱格式错误'
result.className = 'error'
}
}
</script>使用建议
按需引入：不需要全部引入，只引入用到的函数
错误处理：在实际使用中添加适当的错误处理
类型检查：可以加入参数类型验证
性能优化：对于频繁使用的函数，考虑性能优化
注意事项
正则表达式可能需要根据具体需求调整
设备检测基于用户代理，可能不够准确
剪贴板api需要HTTPS环境
数字转换函数处理范围有限，复杂需求需要更完善的实现
这些工具函数覆盖了前端开发的常见需求，可以直接使用，也可以根据项目需求进行修改。合理使用工具函数能够显著提高开发效率，减少重复工作。
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
JavaScript 函数式编程
我理解的 JavaScript 函数式编程，都认为属于函数式编程的范畴，只要他们是以函数作为主要载体的。
Js函数式编程，给你的代码增加一点点函数式编程的特性
给你的代码增加一点点函数式编程的特性，最近我对函数式编程非常感兴趣。这个概念让我着迷：应用数学来增强抽象性和强制纯粹性，以避免副作用，并实现代码的良好可复用性。同时，函数式编程非常复杂。
让我们来创建一个JavaScript Wait函数
Async/await以及它底层promises的应用正在猛烈地冲击着JS的世界。在大多数客户端和JS服务端平台的支持下，回调编程已经成为过去的事情。当然，基于回调的编程很丑陋的。
JavaScript函数创建的细节
如果你曾经了解或编写过JavaScript，你可能已经注意到定义函数的方法有两种。即便是对编程语言有更多经验的人也很难理解这些差异。在这篇博客的第一部分，我们将深入探讨函数声明和函数表达式之间的差异。
编写小而美函数的艺术
随着软件应用的复杂度不断上升，为了确保应用稳定且易拓展，代码质量就变的越来越重要。不幸的是，包括我在内的几乎每个开发者在职业生涯中都会面对质量很差的代码。这些代码通常有以下特征:
javascript回调函数的理解和使用方法(callback)
在js开发中，程序代码是从上而下一条线执行的，但有时候我们需要等待一个操作结束后，再进行下一步操作，这个时候就需要用到回调函数。 在js中，函数也是对象，确切地说：函数是用Function()构造函数创建的Function对象。
js调用函数的几种方法_ES5/ES6的函数调用方式
这篇文章主要介绍ES5中函数的4种调用，在ES5中函数内容的this指向和调用方法有关。以及ES6中函数的调用，使用箭头函数，其中箭头函数的this是和定义时有关和调用无关。
JavaScript中函数的三种定义方法
函数的三种定义方法分别是：函数定义语句、函数直接量表达式和Function()构造函数的方法,下面依次介绍这几种方法具体怎么实现,在实际编程中，Function()构造函数很少用到，前两中定义方法使用比较普遍。
js在excel的编写_excel支持使用JavaScript自定义函数编写
微软 称excel就实现面向开发者的功能，也就是说我们不仅可以全新定义的公式，还可以重新定义excel的内置函数，现在Excel自定义函数增加了使用 JavaScript 编写的支持，下面就简单介绍下如何使用js来编写excel自定义函数。
js中的立即执行函数的写法，立即执行函数作用是什么？
这篇文章主要讲解：js立即执行函数是什么？js使用立即执行函数有什么作用呢？js立即执行函数的写法有哪些？
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!