前端开发常用的30个js工具函数

86 阅读2分钟
  1. 获取URL参数值:
function getUrlParam(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)");
    var results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
  1. 检测是否是移动设备:
function isMobileDevice() {
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
  1. 检测是否是邮箱地址:
function isEmail(email) {
    var regex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
    return regex.test(email);
}
  1. 检测是否是手机号码:
function isPhoneNumber(phone) {
    var regex = /^\d{11}$/;
    return regex.test(phone);
}
  1. 获取当前时间戳:
function getCurrentTimestamp() {
    return Math.floor(Date.now() / 1000);
}
  1. 深拷贝对象:
function deepCopy(obj) {
    return JSON.parse(JSON.stringify(obj));
}
  1. 随机生成指定范围内的整:
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
  1. 去除字符串首尾空格:
function trimString(str) {
    return str.replace(/^\s+|\s+$/g, '');
}
  1. 判断是否是数字:
function isNumber(num) {
    return !isNaN(parseFloat(num)) && isFinite(num);
}
  1. 判断是否是数组:
function isArray(arr) {
    return Array.isArray(arr);
}
  1. 判断是否是对象:
function isObject(obj) {
    return obj !== null && typeof obj === 'object';
}
  1. 判断是否是函数:
function isFunction(func) {
    return typeof func === 'function';
}
  1. 判断是否是空对象:
function isEmptyObject(obj) {
    return Object.keys(obj).length === 0 && obj.constructor === Object;
}
  1. 判断是否包含某个类名:
function hasClass(element, className) {
    return (' ' + element.className + ' ').indexOf(' ' + className + ' ') > -1;
}
  1. 添加类名:
function addClass(element, className) {
    if (!hasClass(element, className)) {
        element.className += ' ' + className;
    }
}
  1. 移除类名:
function removeClass(element, className) {
    element.className = element.className.replace(new RegExp('(?:^|\\s)' + className + '(?!\\S)'), '');
}
  1. 切换类名:
function toggleClass(element, className) {
    if (hasClass(element, className)) {
        removeClass(element, className);
    } else {
        addClass(element, className);
    }
}
  1. 获取元素的样式:
function getStyle(element, style) {
    return window.getComputedStyle(element, null).getPropertyValue(style);
}
  1. 设置元素的样式:
function setStyle(element, style, value) {
    element.style[style] = value;
}
  1. 检测是否支持LocalStorage:
function isLocalStorageSupported() {
    try {
        return 'localStorage' in window && window['localStorage'] !== null;
    } catch (e) {
        return false;
    }
}
  1. 检测是否支持SessionStorage:
function isSessionStorageSupported() {
    try {
        return 'sessionStorage' in window && window['sessionStorage'] !== null;
    } catch (e) {
        return false;
    }
}
  1. 添加事件监听:
function addEvent(element, event, handler) {
    if (element.addEventListener) {
        element.addEventListener(event, handler, false);
    } else if (element.attachEvent) {
        element.attachEvent('on' + event, handler);
    }
}
  1. 移除事件监听:
function removeEvent(element, event, handler) {
    if (element.removeEventListener) {
        element.removeEventListener(event, handler, false);
    } else if (element.detachEvent) {
        element.detachEvent('on' + event, handler);
    }
}
  1. 阻止事件冒泡:
function stopPropagation(event) {
    event = event || window.event;
    if (event.stopPropagation) {
        event.stopPropagation();
    } else {
        event.cancelBubble = true;
    }
}
  1. 阻止默认事件:
function preventDefault(event) {
    event = event || window.event;
    if (event.preventDefault) {
        event.preventDefault();
    } else {
        event.returnValue = false;
    }
}
  1. 获取元素相对于文档的位置:
function getElementPosition(element) {
    var rect = element.getBoundingClientRect();
    return {
        top: rect.top + window.scrollY,
        left: rect.left + window.scrollX
    };
}
  1. 检测是否在视口内:
function isInViewport(element) {
    var rect = element.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}
  1. 滚动到指定元素:
function scrollToElement(element) {
    element.scrollIntoView({ behavior: 'smooth' });
}
  1. 获取滚动位置:
function getScrollPosition() {
    return {
        x: window.pageXOffset || document.documentElement.scrollLeft,
        y: window.pageYOffset || document.documentElement.scrollTop
    };
}
  1. 滚动到顶部:
function scrollToTop() {
    window.scrollTo({ top: 0, behavior: 'smooth' });
}