前端专栏 | 10个非常实用的javascript函数方法

52 阅读2分钟

1.根据数组对象中某一属性进行数组对象的排序

/**
* @desc 根据数组对象中某一属性进行数组对象的排序
* @params { Array } objArr 数组对象
* @params { String } Attribute 排序属性名称
* @params { Boolean } OrderFlag 方式表述 true-正序(默认值) false-倒序
*/

export const ObjArrSortByAtr = (objArr, attribute, OrderFlag = true) => {
    const compare = (key, sortFalg) => {
        const sortFlagRes = sortFalg ? 1 : -1;
        
        return (value1, value2) => {
            const val1 = value1[key];
            const val2 = value2[key];
            
            if(val1 < val2)return sortFlagRes* -1;
             if(val1 > val2)return sortFlagRes* 1;
            return 0;
        };
    };
    return objArr.sort(compare(`${attribute}`, OrderFlag));
};

2.节流函数

/**
*
* @desc 节流函数,再等待时间内,方法只会执行一次(用于防爆点击)
* @params { Function } fn 执行的方法
* @params { Number } milliseconds 等待时间
*
*/

export const throttle = function (fn, milliseconds = 1500){
    let lastTime = null;
    
    //返回的新函数
    return function () {
        const nowTime = +new Date();
        if(nowTime - lastTime > milliseconds || !lastTime ){
            fn.apply(this, arguments); //将this和参数传给原函数 
            lastTime = newTime;
        }
    };
};

3.防抖函数

/**
*
* @desc 防抖函数,一定时间内只会执行一次函数(用于输入框联想搜索)
* @params { Function } func 执行的方法
* @params { Number } delay 等待时间
*
*/

export const debounce = function (func, delay = 1500){
   let timeout;
   return function (e) {
       clearTimeout(timeout);
       const conext = this;
       args = arguments;
       timeout = setTimeout (() => {
           func.apply(conext, args);
       }, delay)
   };
};

4.转换为字符串

/**
* @desc 转换为字符串
* @params { Object } v 
* @returns { String } 
*/  

export const toString = v => Object.prototype.toString.apply(v);

5.是否为数组

/**
* @desc 是否为空
* @params { * } 值
* @returns { Boolean } 
*/  

export const isArray = v =>  Object.prototype.toString.apply(v) === '[object Array]'

6.是否为空

/**
* @desc 是否为空
* @params { * } 值
* @params { Boolean } allowBlank 是允许行空
* @returns { Boolean|* } 
*/  

export const isEmpty = ( v, allowBlank ) =>  v === null || v === undefined || String(v).toUpperCase() === 'NULL' || (Object.prototype.toString.apply(v) === '[object Array]' && !v.length)

7.是否是日期

/**
* @desc 是否是日期
* @params { * } 值
* @returns { Boolean } 
*/  

export const isDate = v =>   Object.prototype.toString.apply(v) === '[object Date]'

8.是否是对象

/**
* @desc 是否是对象
* @params { * } 值
* @returns { Boolean } 
*/  

export const isObject = v =>   Object.prototype.toString.apply(v) === '[object Object]'

9.获取URL中的参数

/**
* @desc 是否是对象
* @params { String } url URL地址
* @returns { Object } 
*/  

export const getUrlParams = (url = decodeURIComponent(location.href)) => {
    const paramStr = url.subString(url.indexOf('?')+1, url.length).split('&');
    const params = {};
    for( let i of paramStr ){
        params[i.substring(0, i.indexOf('='))] = i.substring(i.indexOf('=') +1), i.length)
    }
    
    return typeof params === 'underfind' ? {} : params;
}

10.动态加载JS文件

在一些特殊的场景下,特别是一些库和框架的开发中,我们有时会去动态的加载JS文件并执行,下面是利用Promise进行了简单的封装。

function loadJS(files, done) {  
    // 获取head标签  
    const head = document.getElementsByTagName('head')[0];  
    Promise.all(files.map(file => {  
        return new Promise(resolve => {  
            // 创建script标签并添加到head  
            const s = document.createElement('script');  
            s.type = "text/javascript";  
            s.async = true;  
            s.src = file;  
            // 监听load事件,如果加载完成则resolve  
            s.addEventListener('load', (e) => resolve(), false);  
            head.appendChild(s);  
        });  
    })).then(done); // 所有均完成,执行用户的回调事件  
}  
  
loadJS(["test1.js", "test2.js"], () => {  
// 用户的回调逻辑  
});