JavaScript常用工具函数

本文分享了多个JavaScript实用代码片段,包括生成随机验证码、复制文本到剪贴板、日期时间格式化、对象深浅拷贝、字符串去重、数组去重、验证是否为微信或PC端浏览器、获取星期几、AJAX封装、根据属性找数组交集、按属性排序、检查空数组和空对象、过滤空对象属性、验证邮箱和身份证、实现JSONP以及数组扁平化等常见操作。这些代码片段在前端开发中非常实用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.随机N位验证码

let randomNum = num => Math.random().toString(36).substr(4, num);

2.复制指定文本内容

let copyCliboard = text => {
    navigator.clipboard.writeText(text)
}

3.时间日期格式化

let formateDateOrTime(time, mold) => {
    let nowDate = new Date(time);

    //mold为真则返回YY-MM-DD HH:MM:SS,否则返回YY-MM-DD

    return mold ? nowDate.toLocaleDateString().replace(/\//g, '-') + nowDate.toLocaleTimeSting().substr(0, 8) : nowDate.toLocaleDateString().replace(/\//g, '-');
}

 4.对象深浅拷贝

/**
*    浅拷贝
**/
let goal = Object.assign(goal, origin);



/**
*    深拷贝
**/
let deepCopy = obj => {
    let result = Array.isArray(obj) ? [] : {};
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            if (typeof obj[kye] === 'object' ) {
                result[key] = deepCopy(obj[key]);
            } else {
                result[key] = obj[key];
            }
        }
    }
    return result;
}

5.字符串去重

/**
*    使用es6的new Set
**/
let uniqStr = str => Array.from(new Set(str.split(''))).join('');


/**
*    迭代
**/
let uniqStr = str => {
    let result = [];
    for (let i of str) {
        if (!result.includes(i)) {
            result.push(i);
        }
    }
    return result.join('');
}

6.数组对象根据某属性去重

let setUniqKey = (arr, key) => {
    let result = [];
    arr.map(item => {
        let judge = result.some(resItem => resItem[key] == item[key]);
        if (!judge) {
            result.push(item);
        }
    })
    return result;
}

7.验证是否是微信

let isWechat = () => {
    let u = navigator.userAgent.toLowerCase();
    if (u.match(/MicroMessenger/i) == 'micromessenger') {
        return true;
    } else {
        return false;
    }
}

8.是否是PC

let isPC = () => {
    let u = navigator.userAgent;
    let agents = ['Android', 'iphone', 'SymbianOS', 'Windows phone', 'ipad', 'ipod'];
    return !agents.includes(u);
}

9.获取某天是星期几

let isWeekDay = time => {
    let week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    let day = new Date(time).getDay();
    return week[day];
}

10.ajax封装

1.api参数整合

let joinP = obj => {
    let result = [];
    for (let key in obj) {
        let str = `${key}=${obj[key]}`;
        result.push(str);
    }
    return result.join('&');
}


2.ajax封装
/**
*option = {url: '', data: {}, method:'', type: 'application/x-www-form-urlencoded'}
**/
let ajaxPositing = option => {
    let xhr = Window.XMLHttpRequest() ? new XMLHttpRequest() : new ActiveXObject('Mircosoft.XMLHTTP');
    if (option.method == 'get') {
        xhr.open(option.url + '?' + joinP(option.data));
        xhr.send();
    } else {
        xhr.open(url);
        xhr.setRequestHeader('Content-Type', option.type);
        xhr.send(joinP(option.data));
    }
    return new Promise((resolve, reject) => {
        xhr.onreadystatechange = () => {
            if (xhr.readyState == 4 && xhr.status == 200) {
                resolve(JSON.parse(xhr.response));
            } else {
                reject('请求失败');
            }
        }
    })
}

11.根据某属性找出两个数组的交集

let sizerByKey = (arr1, arr2, key) => {
    return arr1.filter(item1 => {
        return arr2.some(item2 => {
            return item1[key] == item2[key];
        })
    })
}

12.数组根据某属性排序

let sortFn = key => {
    return (obj_1, obj_2) => {
        let value_1 = obj_1[key],
            value_2 = obj_2[key];
        if (value_1 < value_2) {
            return -1;
        } else if (value_1 > value_2) {
            return 1;
        } else {
            return 0;
        }
    }
}


/***使用

arr.sort(sortFn(key));

13.判断是否是空数组

let isEmptyArray = arr => Array.isArray(arr) && arr.length == 0 ? true : false;

14.判断是否是空对象

1.
 let isEmptyObject = obj => JSON.stringify(obj) == '{}';

2.
let isEmptyObejct = obj => {
    for (let key in obj) {
        return false;
    }
    return true;
}

3.
let isEmptyObejct => obj => {
    let keySet = Obejct.keys(obj);
    return keySet.length == 0 ? true : false;
}

15.对象去除空属性

let filterEmptyObj = obj => {
    for (let key in obj) {
        obj[key] === '' ? delete obj[key] : obj[key];
    }
    return obj;
}

16.验证邮箱

let validateEmail = str => {
        return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(str);
}

17.验证身份证

let isCard = str => /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/.test(str);

18.跨域JSONP

let jsonP = option => {
    let generateUrl = () => {
        let dataStr = '';
        for (let key in option.p) {
            if (Object.prototype.hasOwnProperty.call(option.p, key)) {
                dataStr += `${key}=${option.p[key]}`;
            }
        }
        dataStr += `callback=${option.callbackName}`;
        return `${option.url}?dataStr`;
    }
    return new Promise((resolve, reject) => {
        let scriptEl = document.createElement('script');
        scriptEl.url = generateUrl();
        document.body.appendChild(scriptEl);
        window[option.callbackName] = data => {
            resolve(data);
            document.removeChild(scriptEl);
        }
    })
}

19.数组扁平化

1.es10的flat
let blockFlat = block => {
    return block.flat(Infinity);
}


2.递归封装
let blockFlat = block => {
    let result = [];
    for (let key in block) {
        if (Array.isArray(block[key])) {
            result = result.concat(blockFlat(block[key]));
        } else {
            result.push(block[key]);
        }
    }
    return result;
}

20. 数组对象分类

function groupBy(originArray, property) {
    return originArray.reduce((result, current) => {
        let key = current[property];
        if (!result[key]) {
            result[key] = [current];
        } else {
            result[key].push(current);
        }
        return result;
    }, {});
} 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值