分享前端开发常用代码片段

逩跑鍀小学生

已于 2022-06-10 10:29:36 修改

阅读量610

点赞数 1

文章标签：前端 javascript

于 2022-04-28 15:31:13 首次发布

本文链接：https://blog.csdn.net/codingleader/article/details/124474131

版权

分享开发中常用的一些代码片段，我们的目标是早下班、不加班，哈哈~~

1、手机号隐藏中间4位

//手机号脱敏
function mobile(data) {
    return data.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
}

2、证件号脱敏，包括但不限于身份证

//身份证脱敏 -- 1
function idCard(data) {
    return data.replace(/(\d{4})\d*([0-9xX]{4})/, "$1******$2");
}

//身份证脱敏 -- 2
function idCard(data) {
    if(data.toString().length == 18) {
        return data.slice(0,2) + '****************' + data.slice(16,18)
    } else if(data.toString().length == 15) {
        return data.slice(0,2) + '***********' + data.slice(13,15)
    }
}

//证件脱敏，data->数据，beforeLen->前置位数，afterLen->后置位数
function newIdCard(data, beforeLen, afterLen) {
    let dataLenth = data.length - beforeLen - afterLen
    let middleStr = ''
    for (let i = 0; i < dataLenth; i++) {
        middleStr += '*'
    }
    return data.slice(0, 2) + middleStr + data.substring(data.length - afterLen)
}

3、金额处理，经常会遇到数字相乘或相除得问题，但结果往往不是我们想要得，例如12.32 * 7 结果是86.24000000000001；

//金额
export function money(num){
    return num >= 10000 ? parseFloat(num) * 10000/100000000+'万' : num
}

4、返回不同类型得日期

//格式化时间
export function dateFormat(time,fmt){
    return fnDateFormat(time,fmt)
}

export default function(time,fmt){
    var fmt = fmt || 'yyyy-MM-dd HH:mm:ss';
    var time = time ? new Date(time) : new Date();
    var o = {   
        "M+" : time.getMonth()+1,                 //月份   
        "d+" : time.getDate(),                    //日   
        "H+" : time.getHours(),                   //小时   
        "m+" : time.getMinutes(),                 //分   
        "s+" : time.getSeconds(),                 //秒
        "S"  : time.getMilliseconds()             //毫秒   
    };
    if(/(y+)/.test(fmt))
        fmt=fmt.replace(RegExp.$1, (time.getFullYear()+"").substr(4 - RegExp.$1.length));
    for(var k in o)
          if(new RegExp("("+ k +")").test(fmt))
              fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
  return fmt;
}

5、通过身份证获取年龄、性别、生日

//通过身份证获取年龄 & 生日
const idCardBirthday = function(data){
    //获取出生年月日
    var year = data.substring(6,10);
    var month = data.substring(10,12);
    var day = data.substring(12,14);
    return `${year}-${month}-${day}`
}

//通过身份证获取性别
const idCardGender = function(data){
    //1 男 2 女    
    return parseInt(data.slice(-2, -1)) % 2 == 1 ? 1 : 2;    
}

const birthdayAge = function(str, type) {
    var type = type || 'year';


    //补零
    let zeroize = function(value) {
        if (value < 10) {
            value = '0' + value
        }
        return value
    }
    
    var birthDay = new Date(str)
    var yearBirth = birthDay.getFullYear();
    var monthBirth = birthDay.getMonth() + 1;
    var dayBirth = birthDay.getDate();

    var myDate = new Date();
    var monthNow = myDate.getMonth() + 1;
    var dayNow = myDate.getDate();
    var age = myDate.getFullYear() - yearBirth;
    if (monthNow < monthBirth || (monthNow == monthBirth && dayNow < dayBirth)) {
        age--;
    }

    return age
}

export default {
  idCardBirthday ,
  idCardGender,
  birthdayAge
}

6、手机号、身份证正则表达式

//手机号
const mobile = /^[1]+\d{10}$/;

//身份证
//const idCard = /(^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$) | (^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/;    //18位 & 15位
const idCard = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/

7、邮箱、纳税号正则表达式

//网址
const domain = /(http|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;

//邮箱
const email = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/

//纳税号
const corporationTax = /^[0-9A-Z]{15,20}$/

8、PDF文件下载

/**
 * 文件链接转文件流下载--主要针对pdf 解决谷歌浏览器a标签下载pdf直接打开的问题
 * @param url  ：文件链接
 * @param fileName  ：文件名;
 * @param type  ：文件类型;
 */
export function fileLinkToStreamDownload(url, fileName, type) {
  let reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~\/])+$/;
  if (!reg.test(url)) {
    throw new Error("传入参数不合法,不是标准的文件链接");
  } else {
    let xhr = new XMLHttpRequest();
    xhr.open('get', url, true);
    xhr.setRequestHeader('Content-Type', `application/${type}`);
    xhr.responseType = "blob";
    xhr.onload = function () {
      if (this.status == 200) {
        //接受二进制文件流
        var blob = this.response;
        downloadExportFile(blob, fileName, type)
      }
    }
    xhr.send();
  }
}


/**
 *下载导出文件
 * @param blob  ：返回数据的blob对象或链接
 * @param tagFileName  ：下载后文件名标记
 * @param fileType  ：文件类 word(docx) excel(xlsx) ppt等
 */
function downloadExportFile(blob, tagFileName, fileType) {
  let downloadElement = document.createElement('a');
  let href = blob;
  if (typeof blob == 'string') {
    downloadElement.target = '_blank';
  } else {
    href = window.URL.createObjectURL(blob); //创建下载的链接
  }
  downloadElement.href = href;
  downloadElement.download = tagFileName + '.' + fileType; //下载后文件名
  document.body.appendChild(downloadElement);
  downloadElement.click(); //点击下载
  document.body.removeChild(downloadElement); //下载完成移除元素
  if (typeof blob != 'string') {
    window.URL.revokeObjectURL(href); //释放掉blob对象
  }

}

9、判断是否微信环境、小程序环境

var isWeiXin = function() {
	var ua = window.navigator.userAgent.toLowerCase();
	if (ua.match(/MicroMessenger/i) == 'micromessenger') {
		return true;
	} else {
		return false;
	}
}

export function isMiniProgram(callback) { //是否为小程序环境
	//是否在微信环境
	if (!isWeiXin()) {
		callback(false);
	} else {
		//微信API获取当前运行环境
		wx.miniProgram.getEnv((res) => {
			if (res.miniprogram) { //小程序环境
				callback(true);
			} else {
				callback(false);
			}
		})
	}
}

10、数组去重

datas = [1,4,6,78,768,34,344,3,6,78,55,5,38,'qq','aa','qq']
let datas = datas.filter((item, index, arr) => {
    return arr.indexOf(item, 0) === index;
})
console.log(datas) //[1, 4, 6, 78, 768, 34, 344, 3, 55, 5, 38, 'qq', 'aa']

11、删除Object中的null和undefined

//删除null和Unfined
const removeNullUndefined = objText => {
	Object.keys(objText ).forEach(item => {
	    if (!objText[item] && objText[item] != 0) {
	        delete objText[item]
	    }
    })
	return objText;
}

12、比较当前日期是否在时间段之内

countTime(startTime, endTime){
	let nowDate = new Date(),
		startDate = new Date(startTime),
		endDate = new Date(endTime)
	if(nowDate >= startDate && nowDate <= endDate){
		return true
	}

	return false
}

13、阻止默认行为

$('#button').on('click', function (event) {
    event.preventDefault();
});

14、阻止冒泡

$('#button').on('click', function (event) {
    event.stopPropagation();
});

15、手机端禁止页面在浏览器滚动

//可以在根元素body上添加preventDefault方法 
<body ontouchmove="event.preventDefault()" >

//或者  在滑动事件touchMove中添加
document.addEventListener('touchmove', function(event) {
    event.preventDefault();
})

16、获取浏览器滚动条的高度

document.documentElement.scrollTop || document.body.scrollTop

17、发送验证码

//获取短信验证码倒计时
countdown(maxTime) {
	if (maxTime > 1) {
		maxTime--;
		this.verityText = `${maxTime}s后重发`;
		setTimeout(() => {
			this.countdown(maxTime);
		}, 1000)
	} else {
		this.verityText = '重新发送';
		this.verityCodeFlag = false;
	}
},

18、删除对象中某属性

let params = {
    planCode: '',
    orgCode: '0001',
    personCode: '',
    id: '10'
}

//方案一 delete属性
delete params.id  //对象名.属性名

//方案二 es6解构
let { planCode,...params} = params ; 
console.log(params)
//{orgCode: '0001', personCode: '', id: '10'}

19、

let params = {
    planCode: '',
    orgCode: '0001',
    personCode: '',
    id: '10'
}

// 方案1
var d = JSON.parse(JSON.stringify(params,function(key,value){
    if(value == ''|| value == null || value == undefined){
      delete params[key]
    }else{
      return value;
    }
}))

console.log(d)
// {orgCode: '0001', id: '10'}

// 方案2
for(let item in params){
    if(params[item] == '') {
        delete params[item]
    }
}

持续更新。。。