// 字符串格式化(%s )
export function sprintf(str) {
var args = arguments,
flag = true,
i = 1;
str = str.replace(/%s/g, function () {
var arg = args[i++];
if (typeof arg === 'undefined') {
flag = false;
return '';
}
return arg;
});
return flag ? str : '';
}
// 转换字符串,undefined,null等转化为""
export function praseStrEmpty(str) {
if (!str || str == "undefined" || str == "null") {
return "";
}
return str;
}
// element表单重置
export function resetForm(refName) {
if (this.$refs[refName]) {
this.$refs[refName].resetFields();
}
}
// 日期格式化
/**
*
* @param {一般格式 全部格式化} parseTime(time)
* @param {准确格式} parseTime(time, "{y}-{m}-{d} {MM}-{hh}-{ss}")
*/
export function parseTime(time, pattern) {
if (arguments.length === 0 || !time) {
return null
}
const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
let date
if (typeof time === 'object') {
date = time
} else {
if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
time = parseInt(time)
} else if (typeof time === 'string') {
time = time.replace(new RegExp(/-/gm), '/');
}
if ((typeof time === 'number') && (time.toString().length === 10)) {
time = time * 1000
}
date = new Date(time)
}
const formatObj = {
y: date.getFullYear(),
m: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay()
}
const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
let value = formatObj[key]
// Note: getDay() returns 0 on Sunday
if (key === 'a') {
return ['日', '一', '二', '三', '四', '五', '六'][value]
}
if (result.length > 0 && value < 10) {
value = '0' + value
}
return value || 0
})
return time_str
}
// 安全获取对象方法 获取对象一个深层的属性时,必须保证它的上一级不为undefined,为了不让程序崩溃可以使用这个方法
/**
*
* @param {*} obj 传入的对象
* @param {*} key 对象key
* @param {*} defaultVal 当对象处理异常后的默认值
*/
export function getObjectValueByKeyStr(obj, key, defaultVal = undefined) {
if (!key) return defaultVal;
let namespace = key.toString().split(".");
let value,
i = 0,
len = namespace.length;
for (; i < len; i++) {
value = obj[namespace[i]];
if (value === undefined || value === null) return defaultVal;
obj = value;
}
return value;
}
// 顺序执行函数
/**使用 async/await 配合 for
* const sources = [getData1,getData2,getData3]
* async function promiseQueue() {
* console.log('开始');
* for (let targetSource in sources) {
* await targetSource();
* }
* console.log('完成');
* };
* promiseQueue()
*/
// 并行执行
/**
* Promise.all([getData1(),getData2(),getData3()]).then(res={
* console.log('res:',res)
* })
*/
/**
* 截取指定字节的字符串
* @param str 要截取的字符串
* @param len 要截取的长度,根据字节计算
* @param suffix 截取前len个后,其余的字符的替换字符,一般用“…”
* @returns {*}
*/
export function cutString(str, len, suffix) {
if (!str) return "";
if (len <= 0) return "";
if (!suffix) suffix = "";
var templen = 0;
for (var i = 0; i < str.length; i++) {
if (str.charCodeAt(i) > 255) {
templen += 2;
} else {
templen++
}
if (templen == len) {
return str.substring(0, i + 1) + suffix;
} else if (templen > len) {
return str.substring(0, i) + suffix;
}
}
return str;
}
// 浏览器判断
export function parseUA() {
var u = navigator.userAgent;
var u2 = navigator.userAgent.toLowerCase();
return { //移动终端浏览器版本信息
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1, //是否web应该程序,没有头部与底部
iosv: u.substr(u.indexOf('iPhone OS') + 9, 3),
weixin: u2.match(/MicroMessenger/i) == "micromessenger",
ali: u.indexOf('AliApp') > -1,
};
}
// 返回数据类型
/**
*
* @param {*} data 需要验证的数据
*/
export function dataType(data) {
return Object.prototype.toString.call(data).slice(8, -1)
}
//将Url参数转换成对象,没有参数时返回空对象
export function formatParamsToObject() {
let search = window.location.search, // 获取url的参数部分
obj = {};
if (!search) return obj;
let params = search.split('?')[1]; // 获取参数
let paramsArr = params.split('&');
// 遍历数组
for (let i of paramsArr) {
let arr = i.split('=');
obj[arr[0]] = arr[1] // 设置对象key,value
}
return obj
}
//对象处理为数组
/**
* obj 需要处理的对象
*/
objToArrObj = obj => {
let arr = []
for (let i in obj) {
arr.push({
[i]: obj[i]
})
}
return arr
}
// 冒泡排序 升序
export function bubbleAsSort(arr) {
for (let i = 0; i < arr.length - 1; i++) {
for (let j = 0; j < arr.length - 1 - i; j++) {
if (arr[j] > arr[j + 1]) {
let temp = arr[j + 1];
arr[j + 1] = arr[j];
arr[j] = temp;
}
}
}
return arr;
}
// 冒泡排序 降序
export function bubbleDeSort(arr) {
for (let i = 0; i < arr.length - 1; i++) {
for (let j = 0; j < arr.length - 1 - i; j++) {
if (arr[j] < arr[j + 1]) {
let temp = arr[j + 1];
arr[j + 1] = arr[j];
arr[j] = temp;
}
}
}
return arr;
}
// 防抖函数
/**
* 在一定的时间内,多次执行同一个函数,只会触发一次
* @param {*} fn 需要防抖的函数
* @param {*} delay 时间
*/
export function debounce(fn,delay) {
let timer = null;
return function () {
if(timer) clearTimeout(timer);
timer = setTimeout(fn,delay)
}
}
//节流函数
/**
* 在一定时间内,多次执行同一个函数,只有第一次执行才会触发
* @param {*} fn 需要防抖的函数
* @param {*} delay 时间
*/
function throttle(fn,delay) {
let flag = true;
return function () {
if(!flag) return false;
flag = false;
setTimeout(()=> {
fn();
flag = false;
},delay);
}
}
//检测对象是否含有某个属性
/**
*
* @param {*} obj 传入的对象
* @param {*} key 需要检测的KEY
*/
function checkObjHasAtrr(obj, key) {
return Object.prototype.hasOwnProperty.call(obj, key);
}
//图片下载
/**
* 在微信自带的游览器中不支持,微信会拦截,可以使用微信的JS-SDK。 服务器端需要设置允许跨域:access-control-allow-origin: *
* @param {*} imageSrc 图片地址
* @param {*} name 需要生成的图片名称
*/
function downImage(imageSrc, name) {
let image = new Image();
// 处理canvas 跨域问题
image.setAttribute('crossOrigin', 'anonymous');
image.onload = function() {
let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
canvas.width = image.width;
canvas.height = image.height;
context.drawImage(image, 0, 0, image.width, image.height);
let url = canvas.toDataURL('image/png'); // 图片编码数据
let a = document.createElement('a');
let event = new MouseEvent('click'); // 创建一个单击事件
a.download = name || 'image'; // 设置图片名称
a.href = url; // 将生成的URL设置为a.href属性
a.dispatchEvent(event); // 触发a的单击事件
a = null,canvas = null;
}
image.src = imageSrc;
}```
前端常用工具函数
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。