你需要烂熟于心的15个常用JS函数
最新回答
真相是假
2023-03-31 09:41:54
以下是15个常用JS函数的详细说明，涵盖浏览器检测、对象操作、本地存储、DOM操作等高频场景：
1. 浏览器类型检测function getExplorer() { const ua = navigator.userAgent; const isExplorer = exp => ua.indexOf(exp) > -1; if (isExplorer('MSIE')) return 'IE'; if (isExplorer('Firefox')) return 'Firefox'; if (isExplorer('Chrome')) return 'Chrome'; if (isExplorer('Opera')) return 'Opera'; if (isExplorer('Safari')) return 'Safari';}用途：识别用户当前使用的浏览器类型。
2. 对象深度比较function objEqual(obj1, obj2) { const keys1 = Object.keys(obj1); const keys2 = Object.keys(obj2); if (keys1.length !== keys2.length) return false; return !keys1.some(key => obj1[key] != obj2[key]);}限制：仅支持数字/字符串值比较，复杂对象需递归处理。
3. 本地存储封装// 存储（支持sessionStorage/localforage）const setStore = ({name, content, type}) => { const fullName = `${process.env.VUE_APP_NAME}-${name}`; const obj = { dataType: typeof content, content, datetime: Date.now() }; try { if (type) sessionStorage.setItem(fullName, JSON.stringify(obj)); else store.set(fullName, JSON.stringify(obj)); } catch (e) { console.error(e); }};// 获取（自动类型转换）const getStore = ({name, type}) => { const fullName = `${process.env.VUE_APP_NAME}-${name}`; let obj = store.get(fullName) || sessionStorage.getItem(fullName); if (!obj) return null; obj = JSON.parse(obj); return obj.dataType === 'number' ? Number(obj.content) : obj.dataType === 'boolean' ? eval(obj.content) : obj.content;};4. 随机颜色生成const generateRandomHexColor = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0')}`;改进：添加padStart确保6位颜色值。
5. 数组洗牌算法function shuffle(arr) { const array = [...arr]; for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } return array;}优势：Fisher-Yates算法实现真正随机重排。
6. 剪贴板操作const copyToClipboard = async text => { try { await navigator.clipboard.writeText(text); return true; } catch (err) { console.error('复制失败:', err); return false; }};注意：需在安全上下文（HTTPS）中使用。
7. 平滑滚动控制const scrollTo = (element, position = 'top') => { element.scrollIntoView({ behavior: 'smooth', block: position === 'top' ? 'start' : 'end' });};扩展：支持'top'/'bottom'参数。
8. 元素可见性检测const observeVisible = (elements, callback) => { const observer = new IntersectionObserver(entries => { entries.forEach(entry => callback(entry.target, entry.isIntersecting)); }, { threshold: 0.5 }); [elements].flat().forEach(el => observer.observe(el)); return () => observer.disconnect();};优势：支持批量观察和自动清理。
9. 设备类型检测const detectDeviceType = () => /Mobi|Android|iPhone/i.test(navigator.userAgent) ? 'Mobile' : 'Desktop';优化：简化正则表达式。
10. 元素隐藏控制const hideElement = (el, removeFlow = false) => { el.style.transition = 'opacity 0.3s'; removeFlow ? (el.style.display = 'none') : (el.style.opacity = '0', setTimeout(() => el.style.visibility = 'hidden', 300));};改进：添加过渡动画效果。
11. URL参数解析const getUrlParam = (key, url = location.href) => new URL(url).searchParams.get(key);增强：支持自定义URL解析。
12. 深拷贝实现const deepClone = obj => { if (obj === null || typeof obj !== 'object') return obj; if (obj instanceof RegExp) return new RegExp(obj); if (obj instanceof Date) return new Date(obj); const cloneObj = new obj.constructor(); for (const key in obj) { if (obj.hasOwnProperty(key)) { cloneObj[key] = deepClone(obj[key]); } } return cloneObj;};优势：支持更多数据类型。
13. 异步等待封装const delay = ms => new Promise(resolve => setTimeout(resolve, ms));// 使用示例await delay(1000);14. 暗色模式检测const isDarkMode = () => window.matchMedia?.('(prefers-color-scheme: dark)').matches;扩展：可添加监听器：
const watchColorScheme = callback => { const mql = window.matchMedia('(prefers-color-scheme: dark)'); mql.addEventListener('change', e => callback(e.matches));};15. 性能优化工具// 函数防抖const debounce = (fn, delay) => { let timer; return (...args) => { clearTimeout(timer); timer = setTimeout(() => fn.apply(this, args), delay); };};// 函数节流const throttle = (fn, limit) => { let inThrottle; return (...args) => { if (!inThrottle) { fn.apply(this, args); inThrottle = true; setTimeout(() => inThrottle = false, limit); } };};这些函数覆盖了现代Web开发的核心需求，建议根据实际项目需求选择使用，并注意浏览器兼容性（如IntersectionObserver、structuredClone等API的降级处理）。
热门标签
