前端常用工具函数

// 字符串格式化(%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;
}```
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 生信技能树1,2节 第一节 R与R studio 1.创建R文件在file新建project,其格式为X.Rpro...
    九歌_487a阅读 446评论 0 1
  • 不说谎就不能做生意买卖么? 曾有一卖布的信徒告诉我,他什么戒都能守,就是不能守不妄语戒,我问他为什么?他举了个例子...
    一切美好的阅读 107评论 0 0
  • 【每日一敲】EXCEL-IF函数嵌套、与或非-课件简介下载-上 一定要跟着敲一遍哦,这样记忆才深刻~ 每日一敲,轻...
    哈哈以哈哈阅读 107评论 0 1
  • 久违的晴天,家长会。 家长大会开好到教室时,离放学已经没多少时间了。班主任说已经安排了三个家长分享经验。 放学铃声...
    飘雪儿5阅读 7,573评论 16 22
  • 创业是很多人的梦想,多少人为了理想和不甘选择了创业来实现自我价值,我就是其中一个。 创业后,我由女人变成了超人,什...
    亦宝宝阅读 1,874评论 4 1