「终极收藏」前端开发必备：超全JavaScript公共方法大全

在前端开发中，JavaScript 是一门不可或缺的编程语言。无论是构建交互式用户界面，还是进行数据处理，JavaScript 都发挥着重要作用。因此，掌握一些常用的公共方法将极大地提高开发效率和代码质量。本文将介绍一些常用的 JavaScript 公共方法，并提供相应的代码示例。

1. 深拷贝和浅拷贝

在 JavaScript 中，对象和数组是引用类型。当我们将一个对象赋值给另一个变量时，实际上是复制了引用而不是对象本身。为了避免这种情况，我们需要实现深拷贝。

// 浅拷贝
const shallowCopy = (obj) => {
    return { ...obj }; // 使用扩展运算符
};

// 深拷贝
const deepClone = (obj) => {
    return JSON.parse(JSON.stringify(obj));
};

// 示例
const original = { name: '张三', address: { city: '北京' } };
const cloned = deepClone(original);
cloned.address.city = '上海'; // 修改克隆对象的值
console.log(original.address.city); // 输出: 北京，原对象未受影响

2. 数组去重

在处理数据时，经常需要对数组进行去重操作。以下是一个使用 Set 去重的简单方法。

const uniqueArray = (arr) => {
    return [...new Set(arr)];
};

// 示例
const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = uniqueArray(arr);
console.log(uniqueArr); // 输出: [1, 2, 3, 4, 5]

3. 函数防抖和节流

在处理频繁触发的事件（如滚动和点击）时，防抖和节流是非常常用的技术。防抖是在事件停止触发之后再执行，而节流是在一定时间间隔内只执行一次。

// 防抖
const debounce = (func, delay) => {
    let timer;
    return function(...args) {
        clearTimeout(timer);
        timer = setTimeout(() => func.apply(this, args), delay);
    };
};

// 节流
const throttle = (func, limit) => {
    let lastFunc;
    let lastRan;
    return function(...args) {
        if (!lastRan) {
            func.apply(this, args);
            lastRan = Date.now();
        } else {
            clearTimeout(lastFunc);
            lastFunc = setTimeout(function() {
                if ((Date.now() - lastRan) >= limit) {
                    func.apply(this, args);
                    lastRan = Date.now();
                }
            }, limit - (Date.now() - lastRan));
        }
    };
};

// 示例
window.addEventListener('scroll', debounce(() => {
    console.log('防抖：处理滚动事件');
}, 200));

window.addEventListener('scroll', throttle(() => {
    console.log('节流：处理滚动事件');
}, 1000));

4. Ajax 请求封装

在前端中，Ajax 请求是与后端进行交互的重要手段。通过封装 Ajax，我们可以简化请求逻辑。

const ajax = (url, method = 'GET', data = null) => {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open(method, url);

        xhr.onload = () => {
            if (xhr.status >= 200 && xhr.status < 300) {
                resolve(JSON.parse(xhr.responseText));
            } else {
                reject(new Error(xhr.statusText));
            }
        };

        xhr.onerror = () => reject(new Error('网络错误'));

        if (method === 'POST' && data) {
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.send(JSON.stringify(data));
        } else {
            xhr.send();
        }
    });
};

// 示例
ajax('https://api.example.com/data')
    .then(response => console.log(response))
    .catch(error => console.error(error));

5. 日期格式化

在处理日期时，我们经常需要将日期格式化为特定的字符串格式。以下是一个简单的日期格式化函数。

const formatDate = (date, format) => {
    const options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' };
    return new Intl.DateTimeFormat('zh-CN', options).format(date);
};

// 示例
const now = new Date();
console.log(formatDate(now)); // 输出：当前日期和时间

总结

本文介绍了一些常用的 JavaScript 公共方法，包括深拷贝、数组去重、函数防抖和节流、Ajax 请求封装以及日期格式化。这些方法可以极大地提高前端开发的效率和代码的可维护性。希望这些示例能对你的开发工作有所帮助！