Utils文件常见的JavaScript方法集合

1、数值单位转换

export const numberUnitFormat =(value) => {
            let param = {};
            let k = 10000;
            let sizes = ['', '万', '亿', '万亿'];
            let i = null;
            if (value < k) {
                param.value = value;
                param.unit = '';
            } else {
                i = Math.floor(Math.log(value) / Math.log(k));
                param.value = (value / Math.pow(k, i)).toFixed(2);
                param.unit = sizes[i];
            }
            return param;
        }

   调用：numberUnitFormat(23232323343.23) => { "value": "232.32", "unit": "亿" }

2、千分位转换

export const thousandFormat = (num, obj) => {
            let param = '';
            if (!obj) {
                //格式化千分位输出
                param = num.toLocaleString();
            } else if (obj && obj.lang === 'en') {
                //格式化为千分位带$符号输出
                param = num.toLocaleString('en', { style: 'currency', currency: 'USD' });
            } else if (obj && obj.lang === 'cn') {
                //格式化为带￥符号输出
                param = num.toLocaleString('cn', { style: 'currency', currency: 'CNY' });
            } else {
                //格式化千分位输出
                param = num.toLocaleString();
            }
            return param;
        }

  调用：thousandFormat(123456789.0, { lang: 'cn' }) => ¥123,456,789.00

  千分位转数值：num.replace(/,/gi,'')

3、检查是否为空对象

/**
 * @param {Object} obj 被检查对象
 * @return {boolean} 检查结果
 */
export function isEmptyObject(obj) {
    return obj && Object.keys(obj).length === 0;
}

4、path后面增加query信息

/**
 * 如果path中有 ？则query用 & 连接，否则用 ？连接
 *
 * @param {string} path 路径信息
 * @param {Object} query query参数
 * @return {string} 加上query的path结果
 */
export const pathWithQuery = (path, query) => {
    return ~path.indexOf('?')
        ? `${path}&${queryStringify(query)}`
        : `${path}?${queryStringify(query)}`;
};

5、检查是不是全面屏(移动端)

/**
 * @return {boolean} 是不是全面屏机型
 */
export const checkFullScreen = () => {
    try {
        return getSystemInfo().then(info => {
            const tempInfo = info.model.toLowerCase();
            return Promise.resolve([
                'iphone x',
                'iphone xr',
                'iphone xs',
                'iphone xs max',
                'iphone 11',
                'iphone 11 pro',
                'iphone 11 pro max',
                'iphone 12',
                'iphone 12 pro',
                'iphone 12 pro max'
            ].some(ele => tempInfo.includes(ele)));
        });
    } catch (err) {
        console.log('设备信息获取失败', err);
        Promise.resolve(false);
    }
};

6、节流函数，控制函数重复执行的周期

/**
 * @param {Function} fn 目标函数
 * @param {number} timeout 截流间隔时间
 * @return {Function} 待执行函数
 */
export function throttle(fn, timeout = 500) {
    let lastApplyTime = 0;

    return function (...args) {
        const nowTime = Date.now();

        if (nowTime - lastApplyTime > timeout) {
            lastApplyTime = nowTime;
            return fn.apply(this, args);
        }
    };
}

7、new图片对象来预加载

// 预加载图片缓存列表
const preImgList = [];

/**
 * 通过new图片对象来预加载图片
 * @param {string} url 图片地址
 *
 */
export function preloadImage(url = '') {
    const img = new Image();
    img.src = url;
    preImgList.push(img);
}

8、数组去重

/**
 * 如果是纯粹数组，用es6 Set去重，只需要传arr即可
 * @param  {} arr 数组 or 对象数组
 * @param  {} params 数组对象去重时根据key值去重
 */
export const uniq = (arr, params) => {
	if (!Array.isArray(data)) {
		return arr;
	}
	if (params) {
		let obj = {};
		let newArr = arr.reduce((perv, cur) => {
			obj[cur[params.key]]
				? ''
				: (obj[cur[params.key]] = true && perv.push(cur));
			return perv;
		}, []);
		return newArr;
	} else {
		return Array.from(new Set(arr));
	}
};

   调用：uniq(data, { key: 'id' }) => 返回根据ID去重后的对象数组列表

9、对象数组去重

/**
 * 数组的对象完全匹配后去重
 * @param  {} data 对象数组
 */
export const uniqObject = (data) => {
	let uniques = [];
	let stringify = {};
	for (let i = 0; i < data.length; i++) {
		let keys = Object.keys(data[i]);
		keys.sort(function (a, b) {
			return Number(a) - Number(b);
		});
		let str = '';
		for (let j = 0; j < keys.length; j++) {
			str += JSON.stringify(keys[j]);
			str += JSON.stringify(data[i][keys[j]]);
		}
		if (!stringify.hasOwnProperty(str)) {
			uniques.push(data[i]);
			stringify[str] = true;
		}
	}
	uniques = uniques;
	return uniques;
};

   调用：uniqObject(data) => 返回去重后的对象数组列表

10、扁平数组与JSON树形互转

export const listToTree = (list, childName = 'children') => {
    const res = [];
    const map = list.reduce((res, v) => ((res[v.id] = v), res), {});

    for (const item of list) {
            if (item.parentId === 0) {
                    res.push(item);
                    continue;
            }
            if (item.parentId in map) {
                    const parent = map[item.parentId];
                    parent[childName] = parent[childName] || [];
                    parent[childName].push(item);
            }
    }
    return res;
}

  调用：listToTree(data) => 返回树形数组

11、树形结构转扁平数组列表

export const treeToList = (data, childName = 'children') => {
    // if (!Array.isArray(data)) {
    // 	return [];
    // }
    return data.reduce(
        (prev, cur) =>
            prev.concat([cur], treeToList(cur[childName] || [])),
        []
    );
};

   调用：treeToList(data) => 返回扁平数组列表

12、动态加载脚本

export const dynamicJsLoading (jsPath, callback, async, afterJs) {
    var js=$("script[src='"+jsPath+"']");
    if(js.length>0) return;

    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = jsPath;
    var fn = callback || function(){}; 
    if (async) {
        script.setAttribute("async", true);
        script.setAttribute("defer", "");

        if (script.readyState) {//IE
            script.onreadystatechange = function () {
                if (script.readyState == 'loaded' || script.readyState == 'complete') {
                    script.onreadystatechange = null;
                    console.log("dynamicJsLoading");
                    fn();
                }
            };
        } else {//其他浏览器        
            script.onwaiting = function () {
                console.log("dynamicJsLoading");
                fn();
            };
            script.onload  = function () {
                console.log("dynamicJsLoading");
                script.onload = null;
                fn();
            };
        }
    }

    if(afterJs) {
        $("script[src*='" + afterJs + "']").last().after(script);
    }
    else{
        // document.getElementsByTagName("head")[0].appendChild(script);
        $("script[src*='jquery.min']").last().after(script);
    }

    if(!async) 
        fn();
};

13、动态加载css

export const dynamicCssLoading (cssPath, callback, afterCss) {
    var css = $("link[href='" + cssPath + "']");
    if (css.length > 0) return;

    var css = document.createElement('link');
    css.rel = 'stylesheet';
    css.href = cssPath;

    if (afterCss) {
        $("link[href*='" + afterCss + "']").last().after(css);
    }
    else {
        // document.getElementsByTagName("head")[0].appendChild(script);
        $("head").last().append(css);
    }

    if (callback)
        callback();
}

14、RequireJS动态加载模块

/**
*  @isWinobj  
*  @moduleName 模块名称
**/
export const dynamicRequireJS =(moduleName, isWinobj) => {
    if (isWinobj) {
        if (!window[moduleName]) {
            window[moduleName] = require(moduleName);
        }
        return window[moduleName];
    } else {
        return require(moduleName);
    }
}

15、统一日志打印

export function pathWithQuery (log) {
    if(true === util.debug){
        console.log(log);
    }
}

16、统一页面跳转方法

/**
 * @param {*跳转类型} type 
 * @param {*跳转地址} url 
 */
export const goPage = (type,url) => {
     switch (type){
         //页面跳转
         case 1:
             window.location.href = url;
             break;
         //返回上一个页面
         case 2:
             window.history.go(-1);
             break;
         //返回并刷新上一个页面
         case 3:
             window.location.href = document.referrer;
     }
 };

17、2个数组合并成1个数组对象

/**
 * @param {*} arr1 数组1
 * @param {*} arr2 数组2
 * @param {*} param1 
 * @param {*} param2 
 * @returns 
 */
export const arrayMerge = (arr1,arr2,param1,param2) => {
     var newArray = [];
     $.each(arr1,function (i,v) {
         var obj = {};
         obj[param1] = v;
         $.each(arr2,function (j,k) {
             if(i === j){
                 obj[param2] = k;
             }
         })
         newArray.push(obj);
     });
     return newArray;
 };

18、在data数组中删除obj对象

export const remove = (data, obj) =>{
        for(var i = 0; i < data.length; i++){
            if(data[i] == obj){
                //删除下标为i的元素
                data.splice(i, 1);
            }
        }
        return data;
    }

19、通过属性值查找数组某一项

export function findArrItemByPropVal(arr, prop, val) {
    let result = null;
    for (let i = 0, l = arr.length; i < l; i++) {
        if (arr[i][prop] === val) {
            result = arr[i];
            break;
        }
    }
    return result;
}

20、获取指定月份天数

export function getDateByMon(year, month){
    let d = new Date(year, month, 0);
    return d.getDate();
}

21、判断时间是不是今天

export function isTodayDate(time) {
    if (time.toDateString() === new Date().toDateString()) {
        return true;
    } else {
        return false;
    }
}

22、对象判空

export function isObjEmpty(obj) {
     for (let key in obj){
        return false;    //非空
     }
     return true;       //为空
}

       调用：isObjEmpty( {sex: "male"}) --> 布尔类型false

23、 数组对象属性值转换映射对象 

export function arrPropValToMap(arr, format) {
    const pArr = format.split(':');
    const p1 = pArr[0];
    const p2 = pArr[1];
    let res = {};
    for (let i = 0, l = arr.length; i < l; i++) {
        let v1 = arr[i][p1];
        let v2 = arr[i][p2];
        res[v1] = v2
    }
    return res;
}

    调用：arrPropValToMap('[{a: c, b: d}] ','a:b') --> {c: d})

24、首字母大写

export const capitalizeFirstLetter = (string) => {
    return string.charAt(0).toUpperCase() + string.slice(1);
};

   调用：capitalizeFirstLetter('promise') => Promise

25、判断两个字符串是否相等

/**
 * 相等返回true否则返回false
 *
 * @param {} source
 * @param {} target
 */
export function decideString(source, target) {
    return (source == target) ? true : false;
}

    调用： decideString('abcd','sdasc')  --> 布尔类型false

26、js判断对象中是否有某个属性

/**
 * @param {*} obj 对象
 * @param {*} params 参数
 * @returns 
 */
export const isHasOwnPro = (obj, params) =>{
    if (obj.hasOwnProperty(params)){
       return true;
    }else {
        return false;
    }
}

      调用：isHasOwnPro({sex: "male"},'sex')  --> true

27、 检查一个数是否是整数则位数在8以内

/**
 * @param {} source
 */
export function checkIntLeng(source) {
    var regex = /^[1-9]{1}[0-9]{1,7}$/g
    return regex.test(source);
}

28、判断字符串是否为空

/**
 * 若为空则返回true否则返回false
 * @param source
 * @return true或者false
 **/
export function isEmptyString(source){
    var str = source.replace(/(^\s*)|(\s*$)/g,"");
    if(str=="" || str.toLowerCase()=="null" || str.length<=0){
        return true;
    }else{
        return false;
    }
}

   调用： isEmptyString('dasedfeaw') ---> false

29、验证是否为电话号码

/**
 * 验证是否为座机号码
 * @param {} source
 */
 
export function isTelephone(source) {
    var regex = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/
    return regex.test(source); 
}
 


/**
 * 验证是否移动手机
 * @param {}source
 */
 
export function isMobilePhone(source) {
    var regex = /^((\(\d{3}\))|(\d{3}\-))?1\d{10}/;
    return regex.test(source);
}

30、获取文件的扩展名

/**
 * @param {} filename 文件
 */
export function getFileExt(filename){
    var d=/\.[^\.]+$/.exec(filename);
    var ext = new String(d);
    var s = ext.toLowerCase();
    return s;
}

31、字符串编码

export function strEncode(source){
    return encodeURIComponent(source);
}

32、字符串解码

export function strDencode(source){
    return decodeURIComponent(source);
}