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

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, " "));
}

2. 检测是否是移动设备：

function isMobileDevice() {
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

3. 检测是否是邮箱地址：

function isEmail(email) {
    var regex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
    return regex.test(email);
}

4. 检测是否是手机号码：

function isPhoneNumber(phone) {
    var regex = /^\d{11}$/;
    return regex.test(phone);
}

5. 获取当前时间戳：

function getCurrentTimestamp() {
    return Math.floor(Date.now() / 1000);
}

6. 深拷贝对象：

function deepCopy(obj) {
    return JSON.parse(JSON.stringify(obj));
}

7. 随机生成指定范围内的整：

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

8. 去除字符串首尾空格：

function trimString(str) {
    return str.replace(/^\s+|\s+$/g, '');
}

9. 判断是否是数字：

function isNumber(num) {
    return !isNaN(parseFloat(num)) && isFinite(num);
}

10. 判断是否是数组：

function isArray(arr) {
    return Array.isArray(arr);
}

11. 判断是否是对象：

function isObject(obj) {
    return obj !== null && typeof obj === 'object';
}

12. 判断是否是函数：

function isFunction(func) {
    return typeof func === 'function';
}

13. 判断是否是空对象：

function isEmptyObject(obj) {
    return Object.keys(obj).length === 0 && obj.constructor === Object;
}

14. 判断是否包含某个类名：

function hasClass(element, className) {
    return (' ' + element.className + ' ').indexOf(' ' + className + ' ') > -1;
}

15. 添加类名：

function addClass(element, className) {
    if (!hasClass(element, className)) {
        element.className += ' ' + className;
    }
}

16. 移除类名：

function removeClass(element, className) {
    element.className = element.className.replace(new RegExp('(?:^|\\s)' + className + '(?!\\S)'), '');
}

17. 切换类名：

function toggleClass(element, className) {
    if (hasClass(element, className)) {
        removeClass(element, className);
    } else {
        addClass(element, className);
    }
}

18. 获取元素的样式：

function getStyle(element, style) {
    return window.getComputedStyle(element, null).getPropertyValue(style);
}

19. 设置元素的样式：

function setStyle(element, style, value) {
    element.style[style] = value;
}

20. 检测是否支持LocalStorage：

function isLocalStorageSupported() {
    try {
        return 'localStorage' in window && window['localStorage'] !== null;
    } catch (e) {
        return false;
    }
}

21. 检测是否支持SessionStorage：

function isSessionStorageSupported() {
    try {
        return 'sessionStorage' in window && window['sessionStorage'] !== null;
    } catch (e) {
        return false;
    }
}

22. 添加事件监听：

function addEvent(element, event, handler) {
    if (element.addEventListener) {
        element.addEventListener(event, handler, false);
    } else if (element.attachEvent) {
        element.attachEvent('on' + event, handler);
    }
}

23. 移除事件监听：

function removeEvent(element, event, handler) {
    if (element.removeEventListener) {
        element.removeEventListener(event, handler, false);
    } else if (element.detachEvent) {
        element.detachEvent('on' + event, handler);
    }
}

24. 阻止事件冒泡：

function stopPropagation(event) {
    event = event || window.event;
    if (event.stopPropagation) {
        event.stopPropagation();
    } else {
        event.cancelBubble = true;
    }
}

25. 阻止默认事件：

function preventDefault(event) {
    event = event || window.event;
    if (event.preventDefault) {
        event.preventDefault();
    } else {
        event.returnValue = false;
    }
}

26. 获取元素相对于文档的位置：

function getElementPosition(element) {
    var rect = element.getBoundingClientRect();
    return {
        top: rect.top + window.scrollY,
        left: rect.left + window.scrollX
    };
}

27. 检测是否在视口内：

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)
    );
}

28. 滚动到指定元素：

function scrollToElement(element) {
    element.scrollIntoView({ behavior: 'smooth' });
}

29. 获取滚动位置：

function getScrollPosition() {
    return {
        x: window.pageXOffset || document.documentElement.scrollLeft,
        y: window.pageYOffset || document.documentElement.scrollTop
    };
}

30. 滚动到顶部：

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