个人开发助手

JavaScript - 防抖函数

用于限制函数的执行频率，常用于搜索框输入、滚动事件等场景

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

复制代码

JavaScript - 节流函数

用于限制函数在指定时间内的执行次数，常用于滚动、resize 等高频事件

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

复制代码

JavaScript - 深拷贝

实现对象的深拷贝，避免引用问题

function deepClone(obj) {
    if (obj === null || typeof obj !== 'object') return obj;
    if (obj instanceof Date) return new Date(obj);
    if (obj instanceof Array) return obj.map(item => deepClone(item));
    if (obj instanceof Object) {
        const clonedObj = {};
        for (const key in obj) {
            if (obj.hasOwnProperty(key)) {
                clonedObj[key] = deepClone(obj[key]);
            }
        }
        return clonedObj;
    }
}

复制代码

JavaScript - Promise 封装

将回调函数封装为 Promise，便于使用 async/await

function promisify(fn) {
    return function(...args) {
        return new Promise((resolve, reject) => {
            fn.call(this, ...args, (err, result) => {
                if (err) reject(err);
                else resolve(result);
            });
        });
    };
}

复制代码

CSS - Flexbox 居中

使用 Flexbox 实现水平和垂直居中

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

复制代码

CSS - 文本溢出省略

单行和多行文本溢出显示省略号

/* 单行文本溢出 */
.single-line {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 多行文本溢出 */
.multi-line {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

复制代码

JavaScript - 数组去重

多种方式实现数组去重

// 方法1: 使用 Set
const unique1 = [...new Set(array)];

// 方法2: 使用 filter
const unique2 = array.filter((item, index) => array.indexOf(item) === index);

// 方法3: 使用 reduce
const unique3 = array.reduce((acc, current) => {
    return acc.includes(current) ? acc : [...acc, current];
}, []);

复制代码

JavaScript - 格式化日期

将日期格式化为指定格式的字符串

function formatDate(date, format = 'YYYY-MM-DD HH:mm:ss') {
    const d = new Date(date);
    const year = d.getFullYear();
    const month = String(d.getMonth() + 1).padStart(2, '0');
    const day = String(d.getDate()).padStart(2, '0');
    const hours = String(d.getHours()).padStart(2, '0');
    const minutes = String(d.getMinutes()).padStart(2, '0');
    const seconds = String(d.getSeconds()).padStart(2, '0');

    return format
        .replace('YYYY', year)
        .replace('MM', month)
        .replace('DD', day)
        .replace('HH', hours)
        .replace('mm', minutes)
        .replace('ss', seconds);
}

复制代码

JavaScript - 本地存储封装

封装 localStorage 操作，支持对象存储

const storage = {
    set(key, value) {
        localStorage.setItem(key, JSON.stringify(value));
    },
    get(key) {
        const item = localStorage.getItem(key);
        return item ? JSON.parse(item) : null;
    },
    remove(key) {
        localStorage.removeItem(key);
    },
    clear() {
        localStorage.clear();
    }
};

复制代码

JavaScript - 生成随机字符串

生成指定长度的随机字符串

function randomString(length = 8) {
    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    let result = '';
    for (let i = 0; i < length; i++) {
        result += chars.charAt(Math.floor(Math.random() * chars.length));
    }
    return result;
}

复制代码