JS小知识，分享工作中常用的八个封装函数，让你事半功倍("JavaScript实用技巧：8个高效封装函数分享，助你工作提速增效")

一、数组深拷贝

在工作中，我们经常性需要对数组进行深拷贝，以下是一个单纯且高效的封装函数，可以避免使用递归等纷乱方法。

function deepCloneArray(arr) {
    return JSON.parse(JSON.stringify(arr));
}
    

示例：

const originalArray = [1, 2, [3, 4]];
const clonedArray = deepCloneArray(originalArray);
console.log(clonedArray); // [1, 2, [3, 4]]
    

二、对象深拷贝

与数组深拷贝类似，我们也可以封装一个对象深拷贝的函数。

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

示例：

const originalObject = { a: 1, b: { c: 2 } };
const clonedObject = deepCloneObject(originalObject);
console.log(clonedObject); // { a: 1, b: { c: 2 } }
    

三、防抖函数

防抖函数可以避免在短时间内频繁触发事件，以下是一个常用的封装。

function debounce(func, wait) {
    let timeout;
    return function() {
        const context = this;
        const args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(context, args), wait);
    };
}
    

示例：

const handleResize = debounce(() => {
    console.log('Resize event handler called');
}, 250);
window.addEventListener('resize', handleResize);
    

四、节流函数

节流函数可以局限函数在特定时间内的执行次数，以下是一个常用的封装。

function throttle(func, limit) {
    let inThrottle;
    return function() {
        const args = arguments;
        const context = this;
        if (!inThrottle) {
            func.apply(context, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
}
    

示例：

const handleScroll = throttle(() => {
    console.log('Scroll event handler called');
}, 1000);
window.addEventListener('scroll', handleScroll);
    

五、检查是否为空对象

以下是一个单纯的函数，用于检查一个对象是否为空。

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

示例：

const obj = {};
console.log(isEmptyObject(obj)); // true
const objWithContent = { a: 1 };
console.log(isEmptyObject(objWithContent)); // false
    

六、获取URL参数

以下是一个函数，用于获取URL中的查询参数。

function getURLParameter(param) {
    const queryString = window.location.search.substring(1);
    const params = queryString.split('&').reduce((acc, pair) => {
        const [key, value] = pair.split('=');
        acc[key] = value;
        return acc;
    }, {});
    return params[param];
}
    

示例：

// 假设当前URL是: http://example.com/?name=John&age=30
console.log(getURLParameter('name')); // John
console.log(getURLParameter('age')); // 30
    

七、随机生成颜色

以下是一个函数，用于生成一个随机的颜色代码。

function getRandomColor() {
    const letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}
    

示例：

console.log(getRandomColor()); // 例如: #92A1BC
    

八、格式化时间戳

以下是一个函数，用于将时间戳格式化为可读的日期格式。

function formatTimestamp(timestamp) {
    const date = new Date(timestamp);
    return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}
    

示例：

console.log(formatTimestamp(1615125600000)); // 2021-3-7 0:0:0
    

以上就是我在工作中常用的八个封装函数，它们可以帮助你节约工作效能，缩减重复劳动。在实际应用中，你可以利用具体需求对这些函数进行修改和优化，以适应不同的场景。

本文由IT视界版权所有,禁止未经同意的情况下转发