分享一些常用的JS方法

分享一些常用的JS方法

1、Copy URL地址

方式一

1/**
2 * @description 拷贝地址
3 * @param {string} url 地址
4 **/
5export const copyUrl = (url, type = 1) => {
6	if (type == 1) {
7		navigator.clipboard
8			.writeText(url)
9			.then(() => {
10				console.log("复制成功");
11			})
12			.catch(err => {
13				console.log("复制失败", err);
14			});
15		return;
16	}
17};
18

方式二

1/**
2 * @description 拷贝地址
3 * @param {string} url 地址
4 **/
5export const copyUrl = (url) => {
6        let input = document.createElement("input");
7        input.value = url;
8        document.body.appendChild(input);
9        input.select();
10        document.execCommand("copy");
11        document.body.removeChild(input);
12};
13

2、处理文件大小展示

1/**
2 * @description 计算文件大小
3 * @param {number} fileSize 文件大小
4 * @return {string} 计算后的文件大小值
5 **/
6export const name = (fileSize = 0) => {
7	if (!fileSize) return null;
8	let size = 0,
9		unit = "";
10	if (fileSize > 1073741824) {
11		size = (fileSize / 1073741824).toFixed(4) * 1;
12		unit = "GB";
13	} else if (fileSize > 1048576) {
14		size = (fileSize / 1048576).toFixed(4) * 1;
15		unit = "MB";
16	} else if (fileSize > 1024) {
17		size = (fileSize / 1024).toFixed(4) * 1;
18		unit = "KB";
19	} else {
20		size = fileSize;
21		unit = "B";
22	}
23	return size + unit;
24};
25

3、获取音频/视频时长

1/**
2 * @description 获取音/视频时长
3 * @param {string/object} file 文件地址/对象
4 * @return {number} 媒体文件时长
5 **/
6export const getMediaDuration = file => {
7	return new Promise(resolve => {
8		// 是否是文件对象
9		let hasFile = file instanceof File;
10		let fileUrl = hasFile ? URL.createObjectURL(file) : file;
11		// 创建对象
12		let audioElement = new Audio(fileUrl);
13		// 监听对象
14		audioElement.addEventListener("loadedmetadata", () => {
15			let time = Math.floor(audioElement.duration) || 0;
16			resolve(time);
17		});
18		// 加载失败
19		audioElement.addEventListener("error", () => {
20			resolve(0);
21		});
22	});
23};
24

4、下载文件

1/**
2 * @description 下载文件
3 * @param {string} fileUrl 文件链接地址
4 **/
5export const downloadFile = fileUrl => {
6	const iframe = document.createElement("iframe");
7	// 防止影响页面布局
8	iframe.style.display = "none";
9	iframe.style.height = 0;
10	iframe.src = fileUrl;
11	document.body.appendChild(iframe);
12	// 加载完成后移除创建的标签
13	iframe.onload = function () {
14		document.body.removeChild(iframe);
15	};
16};
17

5、对象数组去重

1/**
2 * @description 对象数组去重
3 * @param {Array} list 数组
4 * @param {String} key 唯一键
5 * @return {Array} 去重后的数组
6 **/
7export const arrayDeduplication = (list, key) => {
8	return list.filter((item, index, self) => {
9		return self.findIndex(el => el[key] === item[key]) === index;
10	});
11};
12

6、获取地址栏参数

方式一

1/**
2 * @description 获取地址栏参数
3 * @param {string} key 参数名
4 * @return {string} 参数值
5 **/
6export const queryParams = key => {
7	if (!key) return null;
8	let url = new URL(location.href);
9	let value = url.searchParams.get(key);
10	return value;
11};
12

方式二

1/**
2 * @description 获取地址栏参数
3 * @param {String} key 要取值的参数
4 * @return {String} 获取的值
5 *  */
6export const getQueryString = name => {
7	let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
8	let r = window.location.search.substring(1).match(reg);
9	if (r != null) return decodeURI(r[2]);
10	return null;
11};
12

7、params参数处理

1/**
2 * @description 参数处理
3 * @param {Object} params  参数
4 */
5export const tansParams = params => {
6	let result = "";
7	for (const propName of Object.keys(params)) {
8		const value = params[propName];
9		var part = encodeURIComponent(propName) + "=";
10		if (value !== null && value !== "" && typeof value !== "undefined") {
11			if (typeof value === "object") {
12				for (const key of Object.keys(value)) {
13					if (value[key] !== null && value[key] !== "" && typeof value[key] !== "undefined") {
14						let params = propName + "[" + key + "]";
15						var subPart = encodeURIComponent(params) + "=";
16						result += subPart + encodeURIComponent(value[key]) + "&";
17					}
18				}
19			} else {
20				result += part + encodeURIComponent(value) + "&";
21			}
22		}
23	}
24	return result;
25};
26