JavaScript常用方法
theme: fancy highlight: a11y-dark
分享一些常用的JS方法
1、Copy URL地址
方式一
js /** * @description 拷貝地址 * @param {string} url 地址 **/ export const copyUrl = (url, type = 1) => { if (type == 1) { navigator.clipboard .writeText(url) .then(() => { console.log("複製成功"); }) .catch(err => { console.log("複製失敗", err); }); return; } };方式二
js
/**
* @description 拷貝地址
* @param {string} url 地址
**/
export const copyUrl = (url) => {
let input = document.createElement("input");
input.value = url;
document.body.appendChild(input);
input.select();
document.execCommand("copy");
document.body.removeChild(input);
};
2、處理檔案大小展示
js
/**
* @description 計算檔案大小
* @param {number} fileSize 檔案大小
* @return {string} 計算後的檔案大小值
**/
export const name = (fileSize = 0) => {
if (!fileSize) return null;
let size = 0,
unit = "";
if (fileSize > 1073741824) {
size = (fileSize / 1073741824).toFixed(4) * 1;
unit = "GB";
} else if (fileSize > 1048576) {
size = (fileSize / 1048576).toFixed(4) * 1;
unit = "MB";
} else if (fileSize > 1024) {
size = (fileSize / 1024).toFixed(4) * 1;
unit = "KB";
} else {
size = fileSize;
unit = "B";
}
return size + unit;
};
3、獲取音訊/視訊時長
js
/**
* @description 獲取音/視訊時長
* @param {string/object} file 檔案地址/物件
* @return {number} 媒體檔案時長
**/
export const getMediaDuration = file => {
return new Promise(resolve => {
// 是否是檔案物件
let hasFile = file instanceof File;
let fileUrl = hasFile ? URL.createObjectURL(file) : file;
// 建立物件
let audioElement = new Audio(fileUrl);
// 監聽物件
audioElement.addEventListener("loadedmetadata", () => {
let time = Math.floor(audioElement.duration) || 0;
resolve(time);
});
// 載入失敗
audioElement.addEventListener("error", () => {
resolve(0);
});
});
};
4、下載檔案
js
/**
* @description 下載檔案
* @param {string} fileUrl 檔案連結地址
**/
export const downloadFile = fileUrl => {
const iframe = document.createElement("iframe");
// 防止影響頁面佈局
iframe.style.display = "none";
iframe.style.height = 0;
iframe.src = fileUrl;
document.body.appendChild(iframe);
// 載入完成後移除建立的標籤
iframe.onload = function () {
document.body.removeChild(iframe);
};
};
5、物件陣列去重
js
/**
* @description 物件陣列去重
* @param {Array} list 陣列
* @param {String} key 唯一鍵
* @return {Array} 去重後的陣列
**/
export const arrayDeduplication = (list, key) => {
return list.filter((item, index, self) => {
return self.findIndex(el => el[key] === item[key]) === index;
});
};
6、獲取位址列引數
方式一
js /** * @description 獲取位址列引數 * @param {string} key 引數名 * @return {string} 引數值 **/ export const queryParams = key => { if (!key) return null; let url = new URL(location.href); let value = url.searchParams.get(key); return value; };方式二
js
/**
* @description 獲取位址列引數
* @param {String} key 要取值的引數
* @return {String} 獲取的值
* */
export const getQueryString = name => {
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
let r = window.location.search.substring(1).match(reg);
if (r != null) return decodeURI(r[2]);
return null;
};
7、params引數處理
js
/**
* @description 引數處理
* @param {Object} params 引數
*/
export const tansParams = params => {
let result = "";
for (const propName of Object.keys(params)) {
const value = params[propName];
var part = encodeURIComponent(propName) + "=";
if (value !== null && value !== "" && typeof value !== "undefined") {
if (typeof value === "object") {
for (const key of Object.keys(value)) {
if (value[key] !== null && value[key] !== "" && typeof value[key] !== "undefined") {
let params = propName + "[" + key + "]";
var subPart = encodeURIComponent(params) + "=";
result += subPart + encodeURIComponent(value[key]) + "&";
}
}
} else {
result += part + encodeURIComponent(value) + "&";
}
}
}
return result;
};