有趣的工具

合集 - 有意思的(95)

1.使用递归的方式实现数组、对象的深拷贝2023-08-302.js获取url的参数2023-09-043.弹框组件el-tree+vue3必坑指南2023-09-044.在Vue 3中，与Vue 2相比，有一些改进和优化的diff算法。2023-09-055.浏览器解析html2023-09-056.浏览器渲染HTML2023-09-057.Object.entries()2023-09-058.vue实现虚拟dom转换成真是dom的原理2023-09-059.全局封装组件处理并发请求不连续的loading2023-09-0610.为什么vue数组下标修改监听不到2023-09-0711.vue里表单验证的v-model.number的坑2023-09-0812.有意思的css2023-09-0913.js原生语音转文字2023-09-0914.js手写一个call2023-10-1415.js手写一个apply2023-10-1416. 手写一个 bind 方法2023-10-1417.js寄生组合式继承2023-10-1418.react中的useState修改状态获取最新状态值2023-10-1519.函数柯里化js2023-10-2020.axios请求中断_下载中断和下载进度2023-10-2021.axios请求重试_核心原理2023-10-2022.axios请求重试_axios-retry插件2023-10-2023.虚拟列表-渲染 10 万条数据2023-10-2124.vue-office 组件2023-10-2125.threejs2023-10-2226.把原生 DOM 标签转换后加入到 3D 场景空间中显示2023-10-2427.three.js 物体要使用光线投射技术，计算是否点击位置与物体有交叉2023-10-2428.threejs基本函数2023-10-2529.二分查找算法2023-10-2630.js判断字符串是否连贯2023-10-2631.世界坐标系和模型坐标系2023-10-2832.设置车模型中每个小物体 castShadow = true2023-11-0433.Vue3 echarts 组件化使用 resizeObserver2023-11-0534.网页验证码的作用 *网页中几种常见验证码2023-11-0735.多个装饰器一起es6装饰器2023-11-0736.flex属性2023-11-0737.移动端兼容问题2023-11-0738.那什么是URL、URI、URN？2023-11-0739.threejs的坐标渲染和着色2023-11-1040.着色器2023-11-1041.基于 three.js 加载器分别加载模型2023-11-1042.echarts自适应大屏方案 亲测有用2023-11-16

43.有趣的工具2023-11-17

44.关于threejs中鼠标左右移动，左动看右边，右动看左边2023-11-1745.有趣的知识点threejs2023-11-1846.uniapp底层跨端原理2023-11-2247.防止XSS（跨站脚本攻击）漏洞2023-11-2248.启动vite和electron项目配置多个主进程2023-11-2349.margin-bottom:-1px无效的问题2023-11-2450.九宫格css2023-11-2451.css伪类选择器2023-11-2452.uniapp关于uni.getUserProfile的使用2023-11-3053.uniapp获取用户信息2023-12-0454.在项目中使用UEditor碰到的几个问题2023-12-0455.一维数组转二位数组2023-12-1056.使用此函数对数组进行分块，并在最后一组添加特定的值2023-12-1057.如果win报错无法加载文件 C:\Users\xx\AppData\Roaming\npm\pnpm.ps1，因为在此系统上禁止运行脚本2023-12-1158.阅读时间缓存（快应用）2023-12-2859.uniapp中OnShow获取缓存2024-01-1060.之前使用抖音的担保支付，后俩转换成通用的交易方式2024-01-1161.width:100%与width:auto区别2024-01-1562.leetcode1047字符串反复去重（栈）2024-01-1563.由于<textarea>在某些平台上会创建一个原生控件，这可能会导致层级问题，尤其是在安卓设备上。在uni-app中，对于这种情况，通常推荐的解决方案是使用<cover-view>组件来覆盖原生组件，但是这种做法通常用于覆盖地图、视频等原生组件，而不是<textarea>2024-01-2164.记录一次uniapp使用scrollview2024-01-2265.微前端(矩阵项目)代码将单个文件合并到指定分支2024-01-2266.推荐一个炫酷爆炸例子2024-01-2467.思维导图推荐包2024-01-2468.自适应高度的过渡2024-01-2469.自定义滚动条边角2024-01-2870.实现下划线动画2024-01-2971.js不同类型比较2024-01-3172.css2024-02-0273.sse2024-02-1874.ECMAScript 语言规范每年都会进行一次更新，而备受期待的 ECMAScript 2024 将于 2024 年 6 月正式亮相。目前，ECMAScript 2024 的候选版本已经发布，为我们带来了一系列实用的新功能。2024-02-1975.前端scale负数表示翻转2024-02-1976.关于小说阅读前端翻页插件推荐turn.js2024-02-1977.数组扁平化2024-02-1978.Vue-Plugin-HiPrint2024-02-2079.好玩的vue组件2024-02-2080.DOMRect对象2024-02-2081.js中关于return和if条件处理2024-02-2082.关于文心一言不能打开F12开发者工具2024-02-2083.js文字处理两端展示中间省略号2024-02-2084.[popover, select] el-popover内有select的时候在选择后会自动关闭2024-02-2085.说一下flex的属性2024-02-2686.vue3中404路由匹配规则2024-02-2687.shape-outside2024-02-2788.createRange表示文档中的一个范围——用于js判断文字添加省略号情况2024-02-2889.uniapp+vue3 使用list触底+下拉2024-03-1190.diff算法vue2024-03-1291.动态修改manifest.json2024-03-1892.记录一下大小写导致的问题2024-03-2093.微信小程序关于小说类使用官方阅读器2024-03-2994.VS Code侧边栏的“资源管理器”丢了2024-04-1295.nestjs中服务引入控制器和模块的作用2024-08-04

收起

点击查看代码

/*
 * @Author: your name
 * @Date: 2021-10-22 10:27:11
 * @LastEditTime: 2021-12-04 00:04:58
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue-ts\src\tools\index.js
 */
//将一个数组等分成多个数组
export const group = (array: string | any[], subGroupLength: number) => {
	//数组，一组有多少个数据
	let index = 0;
	const newArray = [];
	while (index < array.length) {
		newArray.push(array.slice(index, (index += subGroupLength)));
	}
	return newArray;
};
//下载一个链接
export const download = (link: any, name: string) => {
	if (!name) {
		name = link.slice(link.lastIndexOf("/") + 1);
	}
	const eleLink = document.createElement("a");
	eleLink.download = name;
	eleLink.style.display = "none";
	eleLink.href = link;
	document.body.appendChild(eleLink);
	eleLink.click();
	document.body.removeChild(eleLink);
};
//下载excel
// download('http://111.229.14.189/file/1.xlsx')

/**
 * 浏览器下载静态文件
 * @param {String} name 文件名
 * @param {String} content 文件内容
 */
export const downloadFile = (name: any, content: BlobPart) => {
	if (typeof name == "undefined") {
		throw new Error("The first parameter name is a must");
	}
	if (typeof content == "undefined") {
		throw new Error("The second parameter content is a must");
	}
	if (!(content instanceof Blob)) {
		content = new Blob([content]);
	}
	const link = URL.createObjectURL(content);
	download(link, name);
};

/**
 * @description: 生成指定范围随机数
 * @param {number} min 最小值
 * @param {number} max 最大值
 * @return {*}
 */
export const randomNum = (min: number, max: number) =>
		Math.floor(Math.random() * (max - min + 1)) + min;

/**
 * @description:数字千分位分隔
 * @param {any} n
 * @return {*}
 */
export const format = (n: { toString: () => any }) => {
	const num = n.toString();
	const len = num.length;
	if (len <= 3) {
		return num;
	} else {
		const temp = "";
		const remainder = len % 3;
		if (remainder > 0) {
			// 不是3的整数倍
			return (
					num.slice(0, remainder) +
					"," +
					num.slice(remainder, len).match(/\d{3}/g).join(",") +
					temp
			);
		} else {
			// 3的整数倍
			return num.slice(0, len).match(/\d{3}/g).join(",") + temp;
		}
	}
};
/**
 * @description:数组乱序
 * @param {any} arr
 * @return {*}
 */
export const arrScrambling = (arr: any[]) => {
	for (let i = 0; i < arr.length; i++) {
		const randomIndex = Math.round(Math.random() * (arr.length - 1 - i)) + i;
		[arr[i], arr[randomIndex]] = [arr[randomIndex], arr[i]];
	}
	return arr;
};
/**
 * @description: 数组扁平化
 * @param {string} arr
 * @return {*}
 */
export const flatten = (arr: string | any[]) => {
	let result: any[] = [];
	for (let i = 0; i < arr.length; i++) {
		if (Array.isArray(arr[i])) {
			result = result.concat(flatten(arr[i]));
		} else {
			result.push(arr[i]);
		}
	}
	return result;
};
/**
 * @description: 数组中获取随机数
 * @param {string} arr
 * @return {*}
 */
export const sample = (arr: string | any[]) =>
		arr[Math.floor(Math.random() * arr.length)];

/**
 * @description: 生成随机字符串
 * @param {number} len
 * @return {*}
 */
export const randomString = (len: number) => {
	const chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz123456789";
	const strLen = chars.length;
	let randomStr = "";
	for (let i = 0; i < len; i++) {
		randomStr += chars.charAt(Math.floor(Math.random() * strLen));
	}
	return randomStr;
};

/**
 * @description: 字符串首字母大写
 * @param {string} str
 * @return {*}
 */
export const fistLetterUpper = (str: string) => {
	return str.charAt(0).toUpperCase() + str.slice(1);
};

/**
 * @description: 手机号中间四位变成*
 * @param {string} tel
 * @return {*}
 */
export const telFormat = (tel: number) => {
	const newtel = String(tel);
	return newtel.substr(0, 3) + "****" + newtel.substr(7);
};

/**
 * @description: 驼峰命名转换成短横线命名
 * @param {string} str
 * @return {*}
 */
export const getKebabCase = (str: string) => {
	return str.replace(/[A-Z]/g, (item: string) => "-" + item.toLowerCase());
};

/**
 * @description:短横线命名转换成驼峰命名
 * @param {string} str
 * @return {*}
 */
export const getCamelCase = (str: string) => {
	return str.replace(/-([a-z])/g, (i: any, item: string) => item.toUpperCase());
};

/**
 * @description:全角转换为半角
 * @param {string} str
 * @return {*}
 */
export const toCDB = (str: string) => {
	let result = "";
	for (let i = 0; i < str.length; i++) {
		const code = str.charCodeAt(i);
		if (code >= 65281 && code <= 65374) {
			result += String.fromCharCode(str.charCodeAt(i) - 65248);
		} else if (code == 12288) {
			result += String.fromCharCode(str.charCodeAt(i) - 12288 + 32);
		} else {
			result += str.charAt(i);
		}
	}
	return result;
};

/**
 * @description: 半角转换为全角
 * @param {string} str
 * @return {*}
 */
export const toDBC = (str: string) => {
	let result = "";
	for (let i = 0; i < str.length; i++) {
		const code = str.charCodeAt(i);
		if (code >= 33 && code <= 126) {
			result += String.fromCharCode(str.charCodeAt(i) + 65248);
		} else if (code == 32) {
			result += String.fromCharCode(str.charCodeAt(i) + 12288 - 32);
		} else {
			result += str.charAt(i);
		}
	}
	return result;
};

/**
 * @description: 数字转化为大写金额
 * @param {number} n
 * @return {*}
 */
export const digitUppercase = (n: number) => {
	const fraction = ["角", "分"];
	const digit = ["零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"];
	const unit = [
		["元", "万", "亿"],
		["", "拾", "佰", "仟"],
	];
	n = Math.abs(n);
	let s = "";
	for (let i = 0; i < fraction.length; i++) {
		s += (
				digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]
		).replace(/零./, "");
	}
	s = s || "整";
	n = Math.floor(n);
	for (let i = 0; i < unit[0].length && n > 0; i++) {
		let p = "";
		for (let j = 0; j < unit[1].length && n > 0; j++) {
			p = digit[n % 10] + unit[1][j] + p;
			n = Math.floor(n / 10);
		}
		s = p.replace(/(零.)*零$/, "").replace(/^$/, "零") + unit[0][i] + s;
	}
	return s
			.replace(/(零.)*零元/, "元")
			.replace(/(零.)+/g, "零")
			.replace(/^整$/, "零元整");
};

/**
 * @description: 数字转化为中文数字
 * @param {any} value
 * @return {*}
 */
export const intToChinese = (value: any) => {
	const str = String(value);
	const len = str.length - 1;
	const idxs = [
		"",
		"十",
		"百",
		"千",
		"万",
		"十",
		"百",
		"千",
		"亿",
		"十",
		"百",
		"千",
		"万",
		"十",
		"百",
		"千",
		"亿",
	];
	const num = ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九"];
	return str.replace(/([1-9]|0+)/g, ($, $1, idx, full) => {
		let pos = 0;
		if ($1[0] !== "0") {
			pos = len - idx;
			if (idx == 0 && $1[0] == 1 && idxs[len - idx] == "十") {
				return idxs[len - idx];
			}
			return num[$1[0]] + idxs[len - idx];
		} else {
			const left = len - idx;
			const right = len - idx + $1.length;
			if (Math.floor(right / 4) - Math.floor(left / 4) > 0) {
				pos = left - (left % 4);
			}
			if (pos) {
				return idxs[pos] + num[$1[0]];
			} else if (idx + $1.length >= len) {
				return "";
			} else {
				return num[$1[0]];
			}
		}
	});
};