JS工具库之工具案例

置顶 A这瓜保熟吗

已于 2023-02-02 14:06:58 修改

阅读量119

点赞数

分类专栏： js工具库文章标签： javascript 前端

于 2023-02-01 13:42:26 首次发布

本文链接：https://blog.csdn.net/wswyz/article/details/128832232

版权

js工具库专栏收录该内容

3 篇文章 0 订阅

订阅专栏

日常用到的一些JS案例

案例一：手机号脱敏如：151****3205

<script>
			var num = '15117893205'
			var reg = /^(\d{3})\d{4}(\d{4})$/
			console.log(num.replace(reg, "$1****$2"))
</script>

案例二：文件下载

<script>
			let data = '11111';
			
			var funDownload = function (content, filename) {
			    // 创建隐藏的可下载链接
			    var eleLink = document.createElement('a');
			    eleLink.download = filename;
			    eleLink.style.display = 'none';
			    // 字符内容转变成blob地址
			    var blob = new Blob([content]);
			    eleLink.href = URL.createObjectURL(blob);
			    // 触发点击
			    document.body.appendChild(eleLink);
			    eleLink.click();
			    // 然后移除
			    document.body.removeChild(eleLink);
			}
				
			funDownload(data,'文件下载')
			//第一个参数是文件内容，第二个参数是文件名
</script>

案例三：字母随机生成

<script>
			function generateMixed(n) {
				var chars = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
			    var a = "";
			    for (var i = 0; i < n; i++) {
			        a += chars[Math.ceil(Math.random() * 25)];//25是chars长度减一
			    }
			    return a;
			}
			
			console.log(generateMixed(3))//参数决定生成后的长度
</script>

案例四：js判断是不是数组

不考虑不支持ES5，最佳推荐Array.isArray
<script>
			let a = [1,2,3]
			Array.isArray(a);//true
</script>

案例五：h5在微信中怎么判断是ios还是安卓

<script>
		 	var u = navigator.userAgent;
			var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
		    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
		    if (isAndroid) {
		        console.log("android") 
		    }
		    if (isiOS) {
				console.log("ios") 
		    }
</script>

案例六：vue 移动端遮罩层显示后禁止页面滚动

可以在遮罩层中添加 @touchmove.prevent 就可以实现禁止页面滚动；
注意 遮罩层里面有滚动条的也是无法滚动的；
<template>
	<div @touchmove.prevent>
	
	</div>
</template>

注意

如果在遮罩层里面想滚动，需要在遮罩层开启时添加
<script>
	document.body.style.overflow = 'hidden'
</script>

案例七：在后台管理系统中，每个页面发起请求，需要在请求头里加上当前路由的菜单code

在请求拦截器里加
if (router.app._route.meta.userMenus && router.app._route.meta.userMenus.length > 0) {
				console.log('router', router.app._route.meta.userMenus[0])
				const menuCode = router.app._route.meta.userMenus[0]
				config.headers['menuCode'] = menuCode
}
userMenus不是写死的，是写在router.js里meta配置里面的，主要看你配置里怎么写的。

案例八：js数组中的every和some，这个还是很实用的

every()是对数组中每一项运行给定函数，如果该函数对每一项返回true,则返回true。

let arr = [1, 2, 3, 4, 5];
let flag = arr.every(item => item < 6);
console.log(flag); //输出结果true

some()是对数组中每一项运行给定函数，如果该函数对任一项返回true，则返回true。
let arr = [1, 2, 3, 4, 5];
let flag = arr.some(item => {
	if (item == 1) {
    	return item;
	}
});
console.log(flag); //输出结果true