常用封装函数

目录

1、创建数组、数组去重并过滤数组中的所有假值

2、判断返回值是否为数组\对象 <|> 设置获取sessionStorage

3、一维数字数组求和

4、生成m~n之间长度为L的随机数组   <|>   已知sum生成长度b随机数据

5、加载当前北京时间

6、原生js获取URL属性值（通过摄入属性key查询value）

7、密码过期预警

8、时间格式（YYYY-MM-DD HH:mm:ss）

9、删除数组指定元素的方法

10、主流浏览器判断

11、两个数之比 (求取最大公约数,用当前数除最大公约数,获得两数的占比)

12、随机经纬度点

13、通过浏览器全路径生成属性json对象

14、json生成浏览器地址栏属性

 15、随机颜色

 16、最全的手机号码验证

17、数组对象根据字段值相同的分类去重

18、文件和图片格式判定

19、使用javascript和正则表达式封装一个方法, 判断a中是否存在b或者b中是否存在a;

20、地址URL中用获取域名和全域名的方法

21、vue3项目中引入assets文件夹种的图片方式有哪几种

---

1、创建数组、数组去重并过滤数组中的所有假值

1) createArray: o => Array.from({length:o},()=>undefined)

1) unique: o => Array.from(new Set(o)).filter(x=>x)
2) unique: o => [...new Set(o)].filter(x=>x)

2、判断返回值是否为数组\对象 <|> 设置获取sessionStorage

1) isArray: o => Object.prototype.toString.call(o) == '[object Array]'
2) isObject: o => Object.prototype.toString.call(obj) === '[Object Object]'

1) setItem = (a, b) => sessionStorage.setItem(a, JSON.stringify(b)); // 设置sessionStorage
2) getItem = o => JSON.parse(sessionStorage.getItem(o)); // 获取sessionStorage

3、一维数字数组求和

Sum(array) {
    // array: Number型数组
    if(array.length <= 0) return 0;
    var sum = array.map(Number).reduce((prev, cur, index, array) => prev + cur);
    return sum;
}

4、生成m~n之间长度为L的随机数组   <|>   已知sum生成长度b随机数据

var arrays = function(m,n,L,arr=[]) {
    // m: 最小值
    // m: 最大值
    // L: 数组长度
    var random = function(lower, upper) { return Math.floor(Math.random() * (upper - lower+1)) + lower }
    if(L) {
        for(var i = 0; i < L; i++) { arr.push(random(m, n)) };
        return arr;
    } else {
        return random(m, n);
    }
}
randomArray = (a, b = 4) => {
    // 输入总值a,生成长度b的随机数组 // a=10, b=[1,2,3,4] -> 随机
    var values = [];
    var newArr = (arr) => arr.sort(() => (Math.random() - 0.5));
    for(var i = 0; i < b; i++) {
        if(i == b - 1) {
            values[i] = a;
            return newArr(values);
        }
        var value = Math.floor(Math.random() * (a / (b - i)));
        values[i] = value;
        a = a - value;
    }
};

5、加载当前北京时间

var clock = function() {
    var d = new Date();
    var spt = document.getElementById("time");
    var week = function() {
        var weekday = new Array(7)
        weekday[0] = "星期日"
        weekday[1] = "星期一"
        weekday[2] = "星期二"
        weekday[3] = "星期三"
        weekday[4] = "星期四"
        weekday[5] = "星期五"
        weekday[6] = "星期六"
        return weekday[d.getDay()];
    }
    spt.innerHTML=d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"日 "+week()+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
}
setInterval(clock, 1000);

6、原生js获取URL属性值（通过摄入属性key查询value）

var getUrlParam = (key, defaultValue = '') => {
    var pageUrl = window.location.search.substring(1);
    var pairs = pageUrl.split('&');
    for (var i = 0; i < pairs.length; i++) {
        var keyAndValue = pairs[i].split('=');
        if (keyAndValue[0] === key) {
            return keyAndValue[1];
        }
    }
    return defaultValue;
}

7、密码过期预警

var timeDiff = (start, end, h = 24, m = 60, s = 3600, ms = 1000) {
    // start: 创建时间/更新时间
    // end  : 当前时间/结束时间
    start = start ? new Date(start) : new Date();
    end = end ? new Date(end) : new Date();
    var fl = o => Math.floor(o);
    var df = end - start;
    var DD = fl(df / (h * s * ms)); //计算出小时数
    if (DD < 31) return false;     //超过30天\第31天开始提示
    var v1 = df % (h * s * ms);   //计算天数后剩余的毫秒数
    var HH = fl(v1 / (s * ms));  //计算相差分钟数
    var v2 = v1 % (s * ms);    //计算小时数后剩余的毫秒数
    var mm = fl(v2 / (m * ms)); //计算相差秒数
    var v3 = v2 % (m * ms);    //计算分钟数后剩余的毫秒数
    var ss = Math.round(v3 / ms);
    console.log('密码已' + DD + '天' + HH + '小时' + mm + '分钟' + ss + '秒未修改，请及时修改');
    return `您的密码已${DD}天未修改了，为了您的账户安全，请定期修改您的密码。`;
}

8、时间格式（YYYY-MM-DD HH:mm:ss）

var getFormatDate = (m, n) => {
    // 当前时间的现实格式(YYYY-MM-DD)
    var u = ":";
    var v = "-";
    var w = "";
    var YY = m.getFullYear();
    var MM = m.getMonth() + 1;
    var DD = m.getDate();
    var hh = m.getHours();
    var mm = m.getMinutes();
    var ss = m.getSeconds();
    if (MM >= 1 && MM <= 9) MM = "0" + MM;
    if (DD >= 0 && DD <= 9) DD = "0" + DD;
    if (hh >= 0 && hh <= 9) hh = " 0" + hh;
    else hh = " " + hh;
    if (mm >= 0 && mm <= 9) mm = "0" + mm;
    if (ss >= 0 && ss <= 9) ss = "0" + ss;
    if (n == "d") w = hh + u + mm + u + ss;
    if (n == "d0") w = " 00:00:00";
    if (n == "d1") w = " 23:59:59";
    if (n == "m0") DD = new Date(YY, MM, 1).getDate();
    if (n == "m1") DD = new Date(YY, MM, 0).getDate();
    var currentdate = YY + v + MM + v + DD + w;
    return currentdate;
}

9、删除数组指定元素的方法

var reArray = (arr, val) => {
    Array.prototype.remove = function(val) { 
        var index = this.indexOf(val); 
        if (index > -1) { 
            this.splice(index, 1); 
        } 
    };
    arr.remove(val);
    return arr;
}

10、主流浏览器判断

myBrowser = () => {
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
    var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
    var isIE = userAgent.indexOf("Trident") > -1 && !isOpera; //判断是否IE浏览器
    var isEdge = userAgent.indexOf("Edge") > -1; //判断是否IE的Edge浏览器
    var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器
    var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判断是否Safari浏览器
    var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1; //判断Chrome浏览器
    if(isIE) return "IE";
    if(isOpera) return "Opera";
    if(isEdge) return "Edge";
    if(isFF) return "FF";
    if(isSafari) return "Safari";
    if(isChrome) return "Chrome";
};

11、两个数之比 (求取最大公约数,用当前数除最大公约数,获得两数的占比)

getMax = (n, m) => {
    var min = n;
    m < n && (min = m);
    var max = 0;
    for(var i = 0, arr = []; i <= min; i++) {
        if(n % i == 0 && m % i == 0) {
            arr.push(i);
        }
    }
    for(var j = 0; j < arr.length; j++) {
        if(arr[j] > arr[j + 1]) {
            arr[j] = [arr[j + 1], (arr[j + 1] = arr[j])][0];
        }
    }
    max = arr[arr.length - 1];
    return [n / max, m / max];
};

12、随机经纬度点

coordArr = (a, b) => {
    let X = [];
    for(let i = 0; i < b; i++) {
        var Y = a.split(",").map(v => parseFloat(v) + this.random(-9999999999, 9999999999) / Math.pow(10, 12));
        X.push({
            x: Y[0],
            y: Y[1],
            value: this.random(10, 100)
        });
    }
    return X;
};

13、通过浏览器全路径生成属性json对象

getParams = (url) => {
    // 通过浏览器全路径生成属性对象
    try {
        var index = url.indexOf('?');
        url = url.match(/\?([^#]+)/)[1];
        var obj = {},
            arr = url.split('&');
        for(var i = 0; i < arr.length; i++) {
            var subArr = arr[i].split('=');
            var key = decodeURIComponent(subArr[0]);
            var value = decodeURIComponent(subArr[1]);
            obj[key] = value;
        }
        return obj;
    } catch(err) {
        return null;
    }
};

14、json生成浏览器地址栏属性

parseParams = (data) => {
    // json生成浏览器地址栏属性
    try {
        var tempArr = [];
        for(var i in data) {
            var key = encodeURIComponent(i);
            var value = encodeURIComponent(data[i]);
            tempArr.push(key + '=' + value);
        }
        var urlParamsStr = tempArr.join('&');
        return urlParamsStr;
    } catch(err) {
        return '';
    }
};

 15、随机颜色

randomColor = n => {
    // 随机颜色
    var len = Object.keys(
        Array(n)
        .toString()
        .split(",")
    );
    if(!n) return("#" + ("00000" + ((Math.random() * 0x1000000) << 0).toString(16)).substr(-6));
    else return len.map(() => "#" + ("00000" + ((Math.random() * 0x1000000) << 0).toString(16)).substr(-6));
};

 16、最全的手机号码验证

isPhone = (EXP, tel) => {
    let EXP = /^1(3[0-9]|4[0-1,4-9]|5[0-3,5-9]|6[2567]|7[0-8]|8[0-9]|9[0-3,5-9])\d{8}$/;
    if(EXP.test(tel)){
        return true;
    }
    return false;
};

17、数组对象根据字段值相同的分类去重

/**
 * 数组对象根据字段值相同的分类去重
 * arr 需要去重的对象数组
 * key 根绝对象中的有相同的key值去重
 */
const ArrayUnique = (arr, key) => {
    const s = new Set();
    arr.forEach(item => { s.add(item[key]) }); // ===> 根据Set 的size 属性 用来获取不重复的数据有多少个
    const newData = Array.from({ length: s.size }, () => []); // ====>  这一步很重要，要确定二维数组的长度是多少
    arr.forEach(item => {
        const index = [...s].indexOf(item[key]); // ====>  循环原数组，将key相同的对象提取到二维数组中
        newData[index].push(item);
    });
    const newArray = newData.map((item) => {
        let params = { title: item[0][key], children: [] };
        item.forEach((ele, index, array) => params.children.push(ele.value)); // ====> 此处的返回值可根据自己需求修改ele
        return params;
    })
    return newArray;
}

let arr = [{ "key": "土建", "value": "地基、基础施工", "id": null }, { "key": "土建", "value": "建筑物施工", "id": null }, { "key": "土建", "value": "地基、基础、建筑物维修施工", "id": null }, { "key": "土建", "value": "电缆沟道土建施工、修缮", "id": null }, { "key": "市政公用", "value": "顶管施工", "id": null }, { "key": "钢结构", "value": "钢结构施工", "id": null }, { "key": "装修装饰", "value": "建筑物装修装饰", "id": null }, { "key": "电气", "value": "330KV及以下变电站电气设备安装", "id": null }, { "key": "电气", "value": "110KV及以下架空线路施工及检修", "id": null }, { "key": "电气", "value": "110KV及以下电缆线路施工及检修", "id": null }, { "key": "电气", "value": "110KV及以下电缆试验", "id": null }, { "key": "电气", "value": "35KV及以下变电站电气设备安装", "id": null }, { "key": "电气", "value": "35KV及以下变电站电气设备检修", "id": null }, { "key": "电气", "value": "35KV及以下变电站电气设备试验", "id": null }, { "key": "电气", "value": "35KV及以下架空线路施工及检修", "id": null }, { "key": "电气", "value": "35KV及以下电缆线路施工及检修", "id": null }, { "key": "电气", "value": "35KV及以下电缆试验", "id": null }, { "key": "电气", "value": "10KV及以下开闭所、开关站、分支箱等电气设备安装", "id": null }, { "key": "电气", "value": "330KV及以下变电站电气设备检修", "id": null }, { "key": "电气", "value": "10KV及以下开闭所、开关站、分支箱等电气设备检修", "id": null }, { "key": "电气", "value": "10KV及以下开闭所、开关站、分支箱等电气设备试验", "id": null }, { "key": "电气", "value": "10KV及以下架空线路施工及检修", "id": null }, { "key": "电气", "value": "10KV及以下电缆线路施工及检修", "id": null }, { "key": "电气", "value": "10KV及以下电缆试验", "id": null }, { "key": "电气", "value": "农网改造", "id": null }, { "key": "电气", "value": "居配工程", "id": null }, { "key": "电气", "value": "配电网驻点运维、抢修", "id": null }, { "key": "电气", "value": "户表、合表户、计量装置、负控等附属装置施工、检修", "id": null }, { "key": "电气", "value": "二次、直流、自动化设备施工、检修、测试", "id": null }, { "key": "电气", "value": "330KV及以下变电站电气设备试验", "id": null }, { "key": "电气", "value": "充电站电气设备安装、检修、测试", "id": null }, { "key": "电气", "value": "绝缘子刷防污闪涂料", "id": null }, { "key": "电气", "value": "330KV及以下架空线路施工及检修", "id": null }, { "key": "电气", "value": "330KV及以下电缆线路施工及检修", "id": null }, { "key": "电气", "value": "330KV及以下电缆试验", "id": null }, { "key": "电气", "value": "110KV及以下变电站电气设备安装", "id": null }, { "key": "电气", "value": "110KV及以下变电站电气设备检修", "id": null }, { "key": "电气", "value": "110KV及以下变电站电气设备试验", "id": null }, { "key": "消防", "value": "消防设施施工、修缮", "id": null }, { "key": "消防", "value": "防火墙等防火设施施工、修缮", "id": null }, { "key": "信息通信", "value": "信息通信设备安装、检修、调试", "id": null }, { "key": "信息通信", "value": "信息通信线路施工、检修", "id": null }, { "key": "信息通信", "value": "安防、监控系统施工、检修、调试", "id": null }, { "key": "信息通信", "value": "楼宇自动化及综合布线施工、检修、调试", "id": null }, { "key": "防腐保温", "value": "构架防腐、设施保温施工、维修", "id": null }, { "key": "其他", "value": "变电站、线路附属设施、标牌、标线等施工、维修", "id": null }, { "key": "其他", "value": "设备起重吊装", "id": null }, { "key": "其他", "value": "绿化与环境治理", "id": null }, { "key": "其他", "value": "锅炉、机电、水电暖安装、维修", "id": null }, { "key": "其他", "value": "景观工程", "id": null }, { "key": "线路设计", "value": "线路设计", "id": null }, { "key": "土建设计", "value": "土建设计", "id": null }, { "key": "变电设计", "value": "变电设计", "id": null }];
console.log('数组数组：', ArrayUnique(arr, 'key'));

18、文件和图片格式判定

// 返回图片类型及图片本身
export function FILETYPE(val) {
    let e = val.toLocaleLowerCase();
    if (e.includes('pdf?')) return ({ type: 'pdf', value: e });
    else if (e.includes('doc?') || e.includes('docx?')) return ({ type: 'word', value: e });
    else if (e.includes('xls?') || e.includes('xlsx?')) return ({ type: 'excel', value: e });
    else if (e.includes('ppt?') || e.includes('pptx?')) return ({ type: 'ppt', value: e });
    else if (e.includes('jpg?') || e.includes('png?') || e.includes('jpeg?') || e.includes('gif?') || e.includes('png?')) return ({ type: 'img', value: e });
    else return ({ type: 'img', value: e });
}

19、使用javascript和正则表达式封装一个方法, 判断a中是否存在b或者b中是否存在a;

/**
 * @param {*} a 例如'abcdefg'或者'cde'
 * @param {*} b 例如'cde'或者'abcdefg'
 * @returns 使用javascript和正则表达式封装一个方法, 判断a中是否存在b或者b中是否存在a;
 */
checkStringInclusion(a, b) {
    // 创建正则表达式，用于匹配字符串b在字符串a中的位置
    const regexA = new RegExp(`${b}`);
    // 创建正则表达式，用于匹配字符串a在字符串b中的位置
    const regexB = new RegExp(`${a}`);
    
    // 检查a中是否存在b
    const foundInA = regexA.test(a);
    // 检查b中是否存在a
    const foundInB = regexB.test(b);

    // 返回结果，如果a中存在b或者b中存在a，则返回true，否则返回false
    return foundInA || foundInB;
}

20、地址URL中用获取域名和全域名的方法

// 引用中提取域名
function getDomainName(url: string) {
    try {
        const urlObject = new URL(url); // 创建URL对象
        return urlObject.hostname; // 提取主机名，即域名部分  返回域名
    } catch (error) {
        throw new Error('Invalid URL format'); // 如果URL格式不正确，则抛出错误
    }
}

// 正则表达式匹配协议后的所有内容，直到遇到第一个斜杠(/)或者查询参数(?)  
function getDomainFromUrl(url: any) {  
    var domainMatch = url.match(/^(?:[a-z]+:)?\/\/([^/?#]+)/i);
    // domainMatch 存在，// 返回去除协议部分的域名
    // 不存在 // 如果没有匹配到域名，返回空字符串或抛出错误  // 或者 throw new Error('Invalid URL');
    return domainMatch ? domainMatch[0].replace(/^(?:[a-z]+:)?\/\//, '') : '';
};

21、vue3项目中引入assets文件夹种的图片方式有哪几种

// images.ts
const getAssetsFile = (url: string) => {
	return new URL(`../assets/images/${url}.png`, import.meta.url).href;
};
export default { getAssetsFile };

// index.vue
import getAssetsFile from '../../../utils/images'; // 引入images
<img :src="getAssetsFile.getAssetsFile(getDomainName(item.href))" :alt="getDomainName(item.href)" /> // template引用