前端开发过程中常用的方法

关注

原创 2024-07-17 16:06:33 207 阅读 AI 写同款· GEO 优化 ›

前端开发常用哪些工具软件？ 前端开发必备工具，一篇文章一网打尽文章目录一、前端提高“生产力”工具 1.WebStorm 2. 远程开发 - VSCode 3. 接口测试 - Postman 4.API在线文档生成和测试 - SwaggerUI 5.抓包工具 - Wireshark 6.通用数据库管理 - DBeaver 7.MD编辑器 - Typora 8.虚拟机 - VirtualBox 9.Git存储库托管 - GitHub 10.项目管理 - Trello 二、提升前端技能的2... 阅读详情

封装并引入方法

import * as zqw from 'zqw_tools';

方法列表

zqw.throttle(fn, delay)

某方法需要节流执行，传入方法和时延值

引入版本

1.0.0

参数

zqw.throttle(fn, delay)

1、fn （function）: 需要节流执行的方法
2、delay（number）: 时延值，单位：ms

例子

function throttleFun() {};
let fun = zqw.throttle(throttleFun, 100);

========================================================================

zqw.findMaxMinVal(type, arr)

根据type查找传入arr数组中的最大或最小值

引入版本

1.0.0

参数

1、type （string）: "max"或"min"
2、arr（array）:

返回值

（number）：返回过滤出来的最大或最小值

例子

let arr = [1, 22, 3, 68, 98];
let num = zqw.findMaxMinVal('min', arr);

console.log(num)
// => 1

========================================================================

zqw.findAvg(arr)

根据传入arr数组，计算平均值

引入版本

1.0.0

参数

1、arr （array）: 需要计算平均值的数组

返回值

（number）：返回过滤出来的平均值

例子

let arr = [1, 22, 3, 68, 98];
let num = zqw.findAvg(arr);

console.log(num)
// => 38.4

========================================================================

zqw.upFloat2Decimal(floatNum)

根据传入数字向上取两位小数

引入版本

1.0.0

参数

1、floatNum （number）: 小数

返回值

（number）：返回过滤出来向上取两位小数的值

例子

let floatNum = 0.23222;
let num = zqw.upFloat2Decimal(floatNum);

console.log(num)
// => 0.24

========================================================================

zqw.keep2Decimal(floatNum)

根据传入数字四舍五入保留2位小数

引入版本

1.0.0

参数

1、floatNum （number）: 小数

返回值

（number）：四舍五入保留2位小数（若第二位小数为0，则保留一位小数）

例子

let floatNum = 0.23422;
let num = zqw.keep2Decimal(floatNum);

console.log(num)
// => 0.23

========================================================================

zqw.fourDecimal2Percent(floatNum)

根据传入数字，小数点直接截取四位并转化成百分数

引入版本

1.0.0

参数

1、floatNum （number）: 小数

返回值

（number）：小数点直接截取四位并转化成百分数

例子

let floatNum = 0.23422;
let num = zqw.fourDecimal2Percent(floatNum);

console.log(num)
// => 23.42%

========================================================================

zqw.accMul(num1, num2)

根据传入数字，解决浮点数乘法丢失精度问题

引入版本

1.0.0

参数

1、num1 （number）:
2、num2 （number）:

返回值

（number）：根据传入数字，解决浮点数乘法丢失精度问题

例子

let floatNum = 0.23422;
let num2 = 2;
let num = zqw.accMul(floatNum, num2);

console.log(num)
// => 0.46844

建议使用

decimal.js

========================================================================

zqw.accAdd(num1, num2)

根据传入数字，解决浮点数加法丢失精度问题

引入版本

1.0.0

参数

1、num1 （number）:
2、num2 （number）:

返回值

（number）：根据传入数字，解决浮点数加法丢失精度问题

例子

let floatNum = 0.1;
let num2 = 0.2;
let num = zqw.accAdd(floatNum, num2);

console.log(num)
// => 0.3

========================================================================

zqw.checkDecimal(num1)

根据传入数字，判断数字是否为小数

引入版本

1.0.0

参数

1、num1 （number）:

返回值

（boolean）：根据传入数字，判断数字是否为小数，返回布尔值

例子

let num1 = 0.2;
let boolean1 = zqw.checkDecimal(num1);

console.log(boolean1)
// => true

========================================================================

zqw.getMedian(arr)

根据传入数组，计算数组的中位数

引入版本

1.0.0

参数

1、arr （array）:

返回值

（number）：根据传入数组，计算出来的中位数

例子

let arr = [2, 5, 8, 3];
let num = zqw.getMedian(arr);

console.log(num)
// => 4

========================================================================

zqw.getColorRandom()

随机生成颜色

引入版本

1.0.0

参数

1、

返回值

（color）：随机生成颜色

例子

let color = zqw.getColorRandom();

console.log(color)
// => #6740FD

========================================================================

zqw.arrRemoveRepeat(arr)

根据传入数组，去除重复值

引入版本

1.0.0

参数

1、arr （array）:

返回值

（array）：根据传入数组，去除重复值，返回新数组

例子

let arr = [2, 5, 8, 3, 5];
let resArr = zqw.arrRemoveRepeat(arr);

console.log(resArr)
// => [2, 5, 8, 3]

========================================================================

zqw.arrKeyRemoveRepeat(arr, key)

根据传入数组和key，去除重复值

引入版本

1.0.0

参数

1、arr （array）:
2、key （string）:

返回值

（array）：根据传入数组和key，去除重复值，返回新数组

例子

let arr = [2, 5, 8, 3, 5];
let key = "id"
let resArr = zqw.arrKeyRemoveRepeat(arr, key);

console.log(resArr)
// => 4

========================================================================

zqw.getCookie(sName)

根据传入key，获取cookie中的值

引入版本

1.0.0

参数

1、key （string）:

返回值

（string）：根据传入key，获取cookie中的值，返回cookie值

例子

let sName = "id"
let val = zqw.getCookie(sName);

console.log(val)
// => cookie中key=id的值

=======================================================================

zqw.removeCookie(sName)

根据传入key，删除对应的cookie，并重新设置cookie

引入版本

1.0.0

参数

1、key （string）:

返回值

（）：

例子

let sName = "id"
zqw.removeCookie(sName);

// => cookie中key=id的值

========================================================================

zqw.judgeDataType(anything)

根据传入anything，传入需要判断数据类型

引入版本

1.0.0

参数

返回值

例子

let anything = "id" 
let any = zqw.judgeDataType(anything);

console.log(any)
// => String

========================================================================

zqw.getRepeatNum(arr)

根据传入arr，传入需要计算元素重复的个数

引入版本

1.0.0

参数

1、arr （array）:

返回值

（object）：

例子

let arr = [1,2,1,3]
let obj = zqw.getRepeatNum(arr);

console.log(obj)
// => {1: 2, 2: 1, 3: 1}

========================================================================

zqw.getStrsum(str, char)

根据传入str，传入需要计算元素重复个数的char

引入版本

1.0.0

参数

1、str （string）:
2、char （char）:

返回值

（number）：

例子

let str = "abaac"
let num = zqw.getStrsum(str, "a");

console.log(num)
// => 3

========================================================================

zqw.html2Escape(sHtml)

根据传入sHtml，转换特殊字符（<|>|...）

引入版本

1.0.0

参数

1、sHtml （html-string）: html字符串

返回值

（string）：

例子

let str = "<html>"
let escapeStr = zqw.html2Escape(str);

console.log(escapeStr)
// => &lt;html&gt;

========================================================================

zqw.escape2Html(sHtml)

根据传入转换特殊字符（<|>|...）的sHtml，转换成HTML格式的字符串

引入版本

1.0.0

参数

1、sHtml （html-escape）: 转换escape后的html字符串

返回值

（string）：

例子

let str = "&lt;html&gt;"
let escapeStr = zqw.escape2Html(str);

console.log(escapeStr)
// => <html>

========================================================================

zqw.uniqueFunc(obj, uniKey)

根据传入[obj]数组对象，传入uniKey根据去重的key值

引入版本

1.0.0

参数

1、obj （[object]）: 数组对象

返回值

（[object]）：去重后的数组对象

例子

let arr = [{a: 111, b: 222}, {a: 222, b: 333}, {a: 222, b: 333}, {a: 222, b: 333, c: 444}]
let obj = zqw.uniqueFunc(arr, "a");

console.log(obj)
// => [{a: 111, b: 222}, {a: 222, b: 333}]

========================================================================

其他请看下面源码集合...

========================================================================

源码集合

//节流
function throttle(fn, delay) {
    var t = null,
        begin = new Date().getTime();
    return function () {
        var _self = this,
            args = arguments,
            cur = new Date().getTime();
        clearTimeout(t);
        if (cur - begin >= delay) {
            fn.apply(_self, args);
            begin = cur;
        } else {
            t = setTimeout(function () {
                fn.apply(_self, args);
            }, delay);
        }
    };
}

// 查找最大最小值
function findMaxMinVal(type, arr) {
    // return type === "max" ? Math.max.apply(Math, arr) : Math.min.apply(Math, arr);
    arr.sort((a, b) => {
        return a - b;
    })
    return type === "max" ? arr[arr.length - 1] : arr[0];
}

// 数组求平均数
function findAvg(arr) {
    let sum = arr.reduce(function(prev, curr, idx, arr){
        return prev + curr;
    });
    return this.upFloat(sum / arr.length);
}

// 向上取两位小数
function upFloat(data) {
    let num = data * 1000
    let result = Math.ceil(num) / 1000
    if (String(result).substring(String(result).indexOf('.')).length > 3) {
        return Math.ceil(result * 100) / 100
    } else {
        return result
    }
}

// 向下取两位小数
function downFloat(data) {
    let num = data * 1000
    let result = Math.ceil(num) / 1000
    if (String(result).substring(String(result).indexOf('.')).length > 3) {
        return Math.floor(result * 100) / 100
    } else {
        return result
    }
}

//四舍五入保留2位小数（若第二位小数为0，则保留一位小数）
function keepTwoDecimal(num) {
    let result = parseFloat(num);
    if(isNaN(result)) {
        return false;
    }
    result = Math.round(num * 100) / 100;
    return result;
}

// 小数点直接截取四位并转化成百分数
function changeDecimalToPercentage(floatNum) {
    if(floatNum === 0) return "0%";

    let numStr = floatNum + "";
    let percentNum = checkDecimal(floatNum) ? accMul(numStr.substring(0, numStr.indexOf(".") + 5), 100) + "%" : floatNum ? accMul(floatNum, 100) + "%" : floatNum;
    return percentNum;
}

// 解决浮点数乘法丢失精度问题
function accMul(arg1,arg2) {
    let m = 0,
        s1 = arg1.toString(),
        s2 = arg2.toString();
    try { m += s1.split(".")[1].length } catch(e) {}
    try { m += s2.split(".")[1].length } catch(e) {}
    return Number(s1.replace(".","")) * Number(s2.replace(".","")) / Math.pow(10, m);
}

// 判断数字是否为小数
function checkDecimal(num){
    let number = num + "";
    if(number.indexOf(".") !== -1){
        return true;
    }
    return false;
}

// 求数组中位数
function getMedian(arr) {
    if (arr.length % 2 === 0){
        // 100[50]               100[50+1]
        return this.upFloat((arr[arr.length / 2] + arr[arr.length / 2 + 1]) / 2)
    } else {
        return this.upFloat(arr[(arr.length + 1) / 2])
    }
}

//生成随机颜色
function getColorRandom(){
    let c="#";
    let cArray=["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"];
    for(let i = 0; i < 6; i++){
        let  cIndex = Math.round(Math.random() * 15);
        c += cArray[cIndex];
    }
    return c;
}

// 根据传入的字符串数组和截取标识符进行切割字符串为数组
function handleStrToArr(arr, flag, num) {
    let arrStr = [];
    arr.forEach(item => {
        arrStr.push(item === "ALL" ? "ALL" : item.includes(flag) ? item.split(flag)[num] : item)
    })

    return arrStr;
}

// 数组去重
function arrayDuplicateRemoval(arr) {
    let map = new Map();
    for (let item of arr) {
        if (!map.has(item.value)) {
            map.set(item.value, item);
        }
    }
    return [...map.values()];
}

// 转换时间格式
function transformTimeDate(time) {
    return Object.prototype.toString.call(time) === "[object Object]" ? moment(time).format("YYYY-MM-DD HH:mm:ss") : time;
}

// 判断值是否为Null
function isNull(num){
    return !num && typeof(num) != "undefined" && num != 0;
}

// 截取字符串
function handleSubstring(str, num) {
    return str.substring(0, num);
}

// 从cookies中获取某个值
function getCookie(sName) {
    let aCookie = document.cookie.split("; ");
    for (let i=0; i < aCookie.length; i++)
    {
        let aCrumb = aCookie[i].split("=");
        if (sName == aCrumb[0])
            return unescape(aCrumb[1]);
    }
    return null;
}

//删除指定cookie的值
function removeCookie(cname){
    let name = cname + "=";
    let ca = document.cookie.split(';');
    let cookieStr = "";
    for(let i = 0; i < ca.length; i++) {
        let c = ca[i].trim();
        if (c.indexOf(name) == 0) {
            document.cookie = c + ';expires=' + new Date(0).toUTCString()
        } else {
            cookieStr += c;
            cookieStr += ";";
        }
        document.cookie = cookieStr;
    }

}

// 数组对象去重
function deWeightThree(arrObj) {
    let map = new Map();
    for (let item of arrObj) {
        if (!map.has(item.value)) {
            map.set(item.value, item);
        }
    }
    return [...map.values()];
}

// 判断数据类型
function judgeDataType(obj) {
    let objType = Object.prototype.toString.call(obj);
    if(objType === "[object String]") {
        return "String";
    } else if(objType === "[object Number]") {
        return "Number";
    } else if(objType === "[object Boolean]") {
        return "Boolean";
    } else if(objType === "[object Null]") {
        return "Null";
    } else if(objType === "[object Undefined]") {
        return "Undefined";
    } else if(objType === "[object Array]") {
        return "Array";
    } else if(objType === "[object Object]") {
        return "Object";
    } else if(objType === "[object Date]") {
        return "Date";
    } else if(objType === "[object RegExp]") {
        return "RegExp";
    }
}

// 判断是否为{}
function judgeEmptyObject(obj) {
    return JSON.stringify(obj) === "{}";
}
// 判断对象是否为{}，最正确的判断方式
function judgeEmptyObj(obj) {
    return Reflect.ownKeys(obj).length === 0;
}

// 获取数组中指定元素的重复个数
function getRepeatNum(arr) {
    return arr.reduce((prev, next) => {
        prev[next] = (prev[next] + 1) || 1;
        return prev;
    }, {})
}
function getArrRepeatNum(arr) {
    let newArr = [...new Set(arr)];
    let lastArr = [];
    newArr.forEach(item => {
        let num = 0
        arr.forEach(i => {
            if(item == i){
                num++
            }
        })
        lastArr.push({
            name: item,
            num
        })
    })
    return lastArr;
}

// 统计字符串中指定字符出现的个数
function getStrsum(str, a) {
    let b = str.indexOf(a); //a在字符串的索引
    let num = 0;
    while (b !== -1) {
        num++;
        b = str.indexOf(a, b + 1)
    }
    return num;
}

function html2Escape(sHtml) {
    return sHtml.replace(/[<>&"©]/gi,function(c){
        return {
            '<': '&lt;',
            '>': '&gt;',
            '&': '&amp;',
            '"': '&quot;',
            "©": "&copy;"
        }[c];
    });
}

function escape2Html(sHtml) {
    if (sHtml.length == 0) return "";
    sHtml = sHtml.replace(/&amp;/g, "&");
    sHtml = sHtml.replace(/&lt;/g, "<");
    sHtml = sHtml.replace(/&gt;/g, ">");
    sHtml = sHtml.replace(/&quot;/g, "\"");
    return sHtml;
}

// 数组对象去重
function uniqueFunc(arr, uniId){
    const res = new Map();
    return arr.filter((item) => !res.has(item[uniId]) && res.set(item[uniId], 1));
}

// 将科学计算数字转为完整数字
function toNonExponential(num) {
    let m = num.toExponential().match(/\d(?:.(\d*))?e([+-]\d+)/);
    return num.toFixed(Math.max(0, (m[1] || '').length - m[2]));
}

// 处理标签文字超出宽度显示省略号
function handleLegendText(text, len) {
    if(!text) {
        return "";
    }

    let str_length = 0;
    let str_len = text.length;
    let str_cut = "";
    for (let i = 0; i < str_len; i++) {
        let a = text.charAt(i);
        str_length++;
        if (escape(a).length > 4) {
            //中文字符的长度经编码之后大于4
            str_length++;
        }
        str_cut = str_cut.concat(a);
        if (str_length >= len) {
            str_cut = str_cut.concat("…");
            return str_cut;
        }
    }
    //如果给定字符串小于指定长度，则返回源字符串；
    if (str_length < len) {
        return text;
    }
}

function checkUrl(urlStr) {
    let Expression = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
    let objExp = new RegExp(Expression);
    if(objExp.test(urlStr) == true) {
        return true
    } else {
        return false
    }
}

// 将json数据导出为xls
function exportExcel(JSONData, FileName, title, filter, suffix="xls") {
    if (!JSONData) return;
    //转化json为object
    let arrData = typeof JSONData != "object" ? JSON.parse(JSONData) : JSONData;
    let excel = "<table>";
    //设置表头
    let row = "<tr>";
    if (title.length) { //使用标题项
        for (let i in title) {
            row += "<th align='center'>" + title[i]['ch'] + '_' + title[i]['en'] + "</th>";
        }
    } else {//不使用标题项
        for (let i in arrData[0]) {
            row += "<th align='center'>" + i + "</th>";
        }
    }
    excel += row + "</tr>";
    //设置数据
    for (let i = 0; i < arrData.length; i++) {
        let row = "<tr>";
        for (let index in arrData[i]) {
            //判断是否有过滤行
            if (filter) {
                if (filter.indexOf(index) == -1) {
                    let value = arrData[i][index] == null ? "" : arrData[i][index];
                    row += "<td>" + value + "</td>";
                }
            } else {
                let value = arrData[i][index] == null ? "" : arrData[i][index];
                row += "<td align='center'>" + value + "</td>";
            }
        }
        excel += row + "</tr>";
    }
    excel += "</table>";
    let excelFile =
        "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>";
    excelFile +=
        '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';
    excelFile +=
        '<meta http-equiv="content-type" content="application/vnd.ms-excel';
    excelFile += '; charset=UTF-8">';
    excelFile += "<head>";
    excelFile += "<!--[if gte mso 9]>";
    excelFile += "<xml>";
    excelFile += "<x:ExcelWorkbook>";
    excelFile += "<x:ExcelWorksheets>";
    excelFile += "<x:ExcelWorksheet>";
    excelFile += "<x:Name>";
    excelFile += "{worksheet}";
    excelFile += "</x:Name>";
    excelFile += "<x:WorksheetOptions>";
    excelFile += "<x:DisplayGridlines/>";
    excelFile += "</x:WorksheetOptions>";
    excelFile += "</x:ExcelWorksheet>";
    excelFile += "</x:ExcelWorksheets>";
    excelFile += "</x:ExcelWorkbook>";
    excelFile += "</xml>";
    excelFile += "<![endif]-->";
    excelFile += "</head>";
    excelFile += "<body>";
    excelFile += excel;
    excelFile += "</body>";
    excelFile += "</html>";
    let uri =
        "data:application/vnd.ms-excel;charset=utf-8," +
        encodeURIComponent(excelFile);
    let link = document.createElement("a");
    link.href = uri;
    link.style = "visibility:hidden";
    link.download = FileName + suffix;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

// 将json数据导出为csv
function jsonToCsv(jsonData) {
    const csvRows = [];
    const headers = Object.keys(jsonData[0]);
    csvRows.push(headers.join(','));

    for (const row of jsonData) {
        const values = headers.map(header => {
            const escapeQuotes = ('' + row[header]).replace(/"/g, '\\"');
            return `"${escapeQuotes}"`;
        });
        csvRows.push(values.join(','));
    }

    return csvRows.join('\n');
}

// 获取文本长度；默认字体为微软雅黑 Microsoft YaHei,字体大小为 14px
function getTextWidth(text, font="14px Microsoft YaHei") {
    const canvas = document.createElement("canvas");
    let context = canvas.getContext("2d");
    context.font = font
    let textmetrics = context.measureText(text)
    return textmetrics.width;
}

// 获取每月的最后一天 28,29,30,31
function getLastDay(year, month) {
    let new_year = year; //取当前的年份
    let new_month = month++;//取下一个月的第一天，方便计算（最后一天不固定）
    if(month>12) {
        new_month -= 12; //月份减
        new_year++; //年份增
    }
    let new_date = new Date(new_year, new_month, 1); //取当年当月中的第一天
    return ( new Date( new_date.getTime() - 1000 * 60 * 60 * 24 ) ).getDate();//获取当月最后一天日期
}


// 去除字符串首尾的所有空格
function removeBlankSpace(str) {
    return str.replace(/^\s+|\s+$/g, '');
}

// 数据对象按照指定字段再进行分组
function getArrayGroupByKey(originalArr, field) {
    let tempArr = [];
    let endData = [];
    for (let i = 0; i < originalArr.length; i++) {
        if (tempArr.indexOf(originalArr[i][field]) === -1) {
            endData.push({
                [field]: originalArr[i][field],
                data: [originalArr[i]]
            });
            tempArr.push(originalArr[i][field]);
        } else {
            for (let j = 0; j < endData.length; j++) {
                if (endData[j][field] == originalArr[i][field]) {
                    endData[j].data.push(originalArr[i]);
                    break;
                }
            }
        }
    }
    return endData;
}

// 判断是否为数字(包括小数)
function judgeIsNumber(num) {
    let reg = /^[+-]?\d+(\.\d+)?$/;
    return reg.test(num);
}

// 将全角字符串转换为半角字符串
function convertToHalfWidth(str) {
    let tmp = "";
    for(let i= 0; i < str.length; i++){
        if (str.charCodeAt(i) == 12288){
            tmp += String.fromCharCode(str.charCodeAt(i) - 12256);
            continue;
        }
        if(str.charCodeAt(i) > 65280 && str.charCodeAt(i) < 65375){
            tmp += String.fromCharCode(str.charCodeAt(i) - 65248);
        }
        else{
            tmp += String.fromCharCode(str.charCodeAt(i));
        }
    }
    return tmp
}

各位技术大佬如果觉得有一点帮助，恳请高抬贵手点个收藏。。。

收录于