前端常见方法合集

于 2024-03-15 16:01:01 发布
阅读量651 收藏 6
点赞数 18
文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53171104/article/details/136740448
版权


前端开发过程中，难以避免遇到重复类似的逻辑需要处理，遵循模块化，组件化的思路会提取出一部分高频次、高耦合的组件 用引入的方法让代码可读性更高更优雅。
同理在处理逻辑时也会遇到很多相似的场景，包括不限于格式化、请求等下面整理了一些常用方法的合集供大家参考。

// 深拷贝
const clone = (obj) => {
    //处理三种简单类型/null/undefine
    if (null == obj || "object" != typeof obj) return obj;
    // 处理Date
    if (obj instanceof Date) {
        var copy = new Date();
        copy.setTime(obj.getTime());
        return copy;
    }
    // 处理Array
    if (obj instanceof Array) {
        var copy = [];
        for (var i = 0; i < obj.length; ++i) {
            copy[i] = clone(obj[i]);
        }
        return copy;
    }
    // 处理Object
    if (obj instanceof Object) {
        var copy = {};
        for (var attr in obj) {
            if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
        }
        return copy;
    }
    throw new Error("Unable to copy obj! Its type isn't supported.");
};

当然上述还有其他方法比如 return JSON.parse(JSON.stringify(obj)) 或者遍历的方法这里就不一一列举了

//截取请求中url携带的参数
const getQueryString = (name, str) => {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    str = str && str.substr(str.indexOf("?") + 1) || window.location.search.substr(1);
    var r = str.match(reg);
    if (r != null) return unescape(r[2]);
    return null;
};

//截取参数并返回JSON
const parseUrl = () => {
    var arr = location.search.split('?')[1].split('&');
    var params = {};
    for (var i = 0, l = arr.length; i < l; i++) {
        var param = arr[i].split('=');
        params[param[0]] = param[1];
    }
    return params;
};

//获取鼠标位置
const getMousePos = event => {
    var e = event || window.event;
    return {
        'x': e.clientX,
        'y': e.clientY
    };
};

//日期时间格式化方法
const format = (type, value) => {
    var a = '';
    if (value == '' || value == null || value == undefined) {
        return a;
    } else {

        if (typeof value == 'string' && value.indexOf('-') == -1) {
            value = value.replace(/^(\d{4})(\d{2})(\d{2})$/, "$1-$2-$3");
        }
        switch (type) {
            case 'YYYY-MM-DD':
                var now = new Date(value);
                var year = now.getFullYear();
                var month = now.getMonth() + 1;
                var month = month > 9 ? month : "0" + month;
                var day = now.getDate() > 9 ? now.getDate() : "0" + now.getDate();
                a = year + "-" + month + "-" + day;
                break;
            case 'YYYYMMDD':
                var now = new Date(value);
                var year = now.getFullYear();
                var month = now.getMonth() + 1;
                var month = month > 9 ? month : "0" + month;
                var day = now.getDate() > 9 ? now.getDate() : "0" + now.getDate();
                a = year.toString() + month.toString() + day.toString();
                break;
            case 'YYYY-MM':
                var now = new Date(value);
                var year = now.getFullYear();
                var month = now.getMonth() + 1;
                var month = month > 9 ? month : "0" + month;
                a = year + "-" + month;
                break;
            case 'YYYYMM':
                var now = new Date(value);
                var year = now.getFullYear();
                var month = now.getMonth() + 1;
                var month = month > 9 ? month : "0" + month;
                a = year + month;
                break;
            case 'YYYY-MM-DD-2':
                var now = new Date(value.substring(0, 10));
                var year = now.getFullYear();
                var month = now.getMonth() + 1;
                var month = month > 9 ? month : "0" + month;
                var day = now.getDate() > 9 ? now.getDate() : "0" + now.getDate();
                a = year + "-" + month + "-" + day;
                break;
            case 'YYYY.MM.DD':
                var now = new Date(value);
                var year = now.getFullYear();
                var month = now.getMonth() + 1;
                var month = month > 9 ? month : "0" + month;
                var day = now.getDate() > 9 ? now.getDate() : "0" + now.getDate();
                a = year + "." + month + "." + day;
                break;
            case 'MM月DD日hh:mm':
                var now = new Date(value);
                var month = now.getMonth() + 1;
                var month = month > 9 ? month : "0" + month;
                var day = now.getDate() > 9 ? now.getDate() : "0" + now.getDate();
                var hours = now.getHours() > 9 ? now.getHours() : "0" + now.getHours();
                var minutes = now.getMinutes() > 9 ? now.getMinutes() : "0" + now.getMinutes();
                a = month + "月" + day + '日 ' + hours + ':' + minutes;
                break;
            case 'YYYY.MM.DD hh:mm':
                var now = new Date(value);
                var year = now.getFullYear();
                var month = now.getMonth() + 1;
                var month = month > 9 ? month : "0" + month;
                var day = now.getDate() > 9 ? now.getDate() : "0" + now.getDate();
                var hours = now.getHours() > 9 ? now.getHours() : "0" + now.getHours();
                var minutes = now.getMinutes() > 9 ? now.getMinutes() : "0" + now.getMinutes();
                a = year + "." + month + "." + day + '&nbsp&nbsp&nbsp' + hours + ':' + minutes;
                break;
            case 'YYYY-MM-DD hh:mm:ss':
                var now = new Date(value);
                var year = now.getFullYear();
                var month = now.getMonth() + 1;
                var month = month > 9 ? month : "0" + month;
                var day = now.getDate() > 9 ? now.getDate() : "0" + now.getDate();
                var hours = now.getHours() > 9 ? now.getHours() : "0" + now.getHours();
                var minutes = now.getMinutes() > 9 ? now.getMinutes() : "0" + now.getMinutes();
                var seconds = now.getSeconds() > 9 ? now.getSeconds() : "0" + now.getSeconds();
                a = year + "-" + month + "-" + day + ' ' + hours + ':' + minutes + ':' + seconds;
                break;
            case 'hh:mm':
                var now = new Date(value);
                var hours = now.getHours() > 9 ? now.getHours() : "0" + now.getHours();
                var minutes = now.getMinutes() > 9 ? now.getMinutes() : "0" + now.getMinutes();
                a = hours + ':' + minutes;
                break;
            case '00.00%':
                a = (value * 100).toFixed(2).toString() + '%';
                break;
            case '00%':
                a = (value * 100).toFixed(0).toString() + '%';
                break;
            case '00.00':
                a = (value * 100).toFixed(2).toString();
                break;
            case 'html':
                value = value.replace(/(\n)/g, "");
                value = value.replace(/(\t)/g, "");
                value = value.replace(/(\r)/g, "");
                value = value.replace(/<\/?[^>]*>/g, "");
                value = value.replace(/\s*/g, "");
                a = value;
                break;
        }
    }
    return a;
};


//数组去重方法  该方法挂载在Array原型上
Array.prototype.unique = function () {
    var res = [];
    var json = {};
    for (var i = 0; i < this.length; i++) {
        if (!json[this[i]]) {
            res.push(this[i]);
            json[this[i]] = 1;
        }
    }
    return res;
};

//千分位处理方法
const numWithDot = (str, length) => {
    if (str < 0) {
        var str_first = '-';
        str = -str;
    } else {
        var str_first = '';
    }
    var str = '' + str;
    var newStr = "";
    var count = 0;

    if (str.indexOf(".") == -1) {
        for (var i = str.length - 1; i >= 0; i--) {
            if (count % 3 == 0 && count != 0) {
                newStr = str.charAt(i) + "," + newStr;
            } else {
                newStr = str.charAt(i) + newStr;
            }
            count++;
        }
        var dot = ''
        if (length != 0) {
            var oL = '';
            for (var i = 0; i < length; i++) {
                oL += '0';
            }
            dot = '.' + oL
        }
        //str = newStr + ".00"; //自动补小数点后两位
        str = newStr + dot;
    } else {
        for (var i = str.indexOf(".") - 1; i >= 0; i--) {
            if (count % 3 == 0 && count != 0) {
                newStr = str.charAt(i) + "," + newStr;
            } else {
                newStr = str.charAt(i) + newStr; //逐个字符相接起来
            }
            count++;
        }

        var oL = '';
        for (var i = 0; i < length; i++) {
            oL += '0';
        }

        str = newStr + (str + oL).substr((str + oL).indexOf("."), length + 1);
    }
    return str_first + str;
};

//获取当月最后一天日期  
const getLastDay = (year, month) => {
    var new_year = year; //取当前的年份  
    var new_month = month++; //取下一个月的第一天，方便计算（最后一天不固定）  
    if (month > 12) //如果当前大于12月，则年份转到下一年  
    {
        new_month -= 12; //月份减  
        new_year++; //年份增  
    }
    var new_date = new Date(new_year, new_month, 1); //取当年当月中的第一天  
    return (new Date(new_date.getTime() - 1000 * 60 * 60 * 24)).getDate(); 
};

	const downloadPost = (url, param, filename = "") => {
    let isFail = null
    fetch(url, {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            //"Authorization": token
        },
        body: JSON.stringify(param),
    })
        .then((res) => {
            if (decodeURI(res.headers.get("Content-Type")).includes('application/json;')) {
                isFail = true
                return res.json();
            } else {
                isFail = false
                try {
                    filename = decodeURI(res.headers.get("Content-Disposition").split("=")[1])
                } catch (e) {
                    console.error("解析fileName错误");
                }
                return res.blob();
            }
        })
        .then((data) => {
            if (isFail) {
               //报错
            } else {
            	//创建a标签和临时地址  返回的data为文件
                let blobUrl = window.URL.createObjectURL(data);
                const a = document.createElement("a");
                a.style.display = "none";
                a.download = filename;
                a.href = blobUrl;
                a.click();
            }
        });
}

// 对已有的HTML代码中的a标签跳转额外弹窗
const aToBlank = (str) =>{
   let aReg = /<a[^>]+href=[\\'"]([^'"]*)['"][\S|\s]*?>/g
   let arr = str.match(aReg)
   if(arr&&arr.length!=0){
       arr.map(item=>{
           let temp = item.slice(0,item.length-1) + ' target="_blank">'
         str = str.replace(item,temp)
       })
   }
   return str
}

// 对已有的HTML代码中的img标签设置100%宽度
const imgWidth = (str) =>{
   let aReg = /<img[^>]+src=[\\'"]([^'"]*)['"][\S|\s]*?>/g
   let arr = str.match(aReg)
   if(arr&&arr.length!=0){
       arr.map(item=>{
           let temp = item.slice(0,item.length-1) + 'style="max-width:100%">'
         str = str.replace(item,temp)
       })
   }
   return str
}

更多方法持续更新中…

抽象派的毕加索
关注
前端开发过程中常用方法
weixin_44953633的博客
07-01 363
记录前端常用的方法（主要包括数组对象字符串）
高级前端常见面试题合集
gogo2027的博客
09-12 5483
高级前端常见面试题合集
前端常用工具
weixin_42443763的博客
11-27 175
/** * 邮箱 * @param {*} s */ export const isEmail = (s) => { return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s) } /** * 手机号码 * @param {*} s */ export const isMobile = (s) => { return /^1[0-9]{10}$/.test(s) }
前端常用的方法
Hello, welcome to the little sheep blog
08-29 463
字符串中的常用方法 /*字符串*/ let str1 = 'abcd'; let arr1 = [1,2,3,4]; /**1.字符串截取**/ let str3 = str1.replace("abc","ABC"); console.log(str1);　//abcd console.log(str3); //ABCd /*字符串转数组*/ let arr2 = str1.split...
网页前端常见的攻击方式和预防攻击的方法
01-19
网站前端开发碰到的安全容易被人们...富客户端的应用越来越广，前端的安全问题也随之增多,今天就简单介绍下一些常见的攻击方式和预防攻击办法。   常见攻击 XSS (Cross Site Script) ，跨站脚本攻击。它指的是恶意攻
前端开发常见问题精选（三）
03-29
一、如何禁止微信h5页面默认下拉，并且同时页面局部可滚动？ 众所周知，微信浏览器默认是可以上拉和下拉的，就像下面这样： (此图片来源于网络，如有侵权，请联系删除!...该方法才是真正要提到的，既可
前端常见兼容性问题以及解决方法
Senora的博客
08-04 1522
一、CSS兼容 1.不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同 2、IE6双边距问题;在IE6中设置了float ，同时又设置margin,就会出现边距问题 3、当标签的高度设置小于10px，在 IE6、IE7 中会超出自己设置的高度 二、js兼容 1. 事件绑定 2. event事件对象问题 3. event.srcElement(事件源对象)问题 ...
前端常用方法
像梦巧清的博客
07-25 617
 /**   目录：     1、阻止冒泡     2、检查浏览器是否支持svg     3、检测是否是微信浏览器     4、js获取验证码倒计时效果(倒计时变化只能是input)     5、js时间戳格式化，毫秒格式化     6、判断数字是否大于十     7、设置cookies     8、获取cookie     9、获取当前路径     10、获取页面高度     11、获取页面可视...
前端常用的一些方法总结
wj859548的博客
12-31 380
url传参前端分割成对象形式url传参前端分割成对象形式获取css的样式值获取屏幕的宽度和高度获取滚动的头部距离和左边距离时间格式化和获取当前时间判断浏览器环境 手机端判断浏览器类型深浅拷贝obj 数据类型检查函数柯里化匀速动画函数缓动动画检查是不是一个Promisejs类型转换移除数组的某一项。如果找到就返回删除的哪一项 改变原数组检查对象中是不是有这个key为一个纯函数创建一个缓存的版本。驼峰和大小写转化将类数组的对象转换成一个真正的数组将属性混入到目标对象中，返回被增强的目标对象。判断两个值是否相等。
前端 几个常用的方法
weixin_41127362的博客
02-23 673
/*判断是不是微信内核*/function isWeiXin(){    var ua = window.navigator.userAgent.toLowerCase();    if(ua.match(/MicroMessenger/i) == 'micromessenger'){        return true;    }else{        return false;    }}...
前端常用方法（持续更新）
weixin_42998230的博客
06-24 448
js常见方法
前端常用方法汇总
dream_snow2012的专栏
07-27 389
1. 循环数据 for( let index in list) { console.log("item quantity",list[index]); }
前端常用方法汇总(自用)
qq_42462993的博客
08-09 847
前端常用方法汇总(自用)
前端项目常用方法总结
曹天笑_笑笑笑的博客
10-16 255
var u = navigator.userAgent; var lastTop = 0 // 正则验证类 var checkFormat = { /** * android终端 * @return {Boolean} */ isAndroid: function() { return u.indexOf('Android') &gt...
前端开发常见错误与解决策略
"这篇文档是针对前端开发初学者的一份指南，主要涵盖了常见的JavaScript错误、前端渲染问题、Ajax请求和Webpack配置中的错误，以及ES6、Vue和React框架的报错解析，还有HTML/CSS的一些注意事项。" 1. **JavaScript ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值