6个简洁并实用的前端工具类

￡神魔★判官ぃ 2023-02-26 04:19 6阅读 0赞

好几天没更文，这篇文章主要从日期,数组,对象,axios,promise和字符判断这几个方面讲工作中常用的一些函数进行了封装,确实可以在项目中直接引用,提高开发效率.

## 日 期 ##

在后台管理系统还是用的很多的,一般是作为数据存贮和管理的一个维度,所以就会涉及到很多对日期的处理

**new Date转化为yyyy-MM-dd HH:mm:ss**

DatePicker日期选择器默认获取到的日期默认是Date对象,但是我们后台需要用到的是yyyy-MM-dd,所以需要我们进行转化

方法一:将Fri Mar 23 2018 12:19:48 GMT+0800 (国际时间)转化为dd-MM-yyyy HH:mm:ss

export const dateToFormat=(date)=>{ 
        date.toLocaleString("en-US", {  hour12: false }).replace(/\b\d\b/g, '0$&').replace(new RegExp('/','gm'),'-')
    }

方法二: 从element-UI的2.x版本提供了value-format属性,可以直接设置选择器返回的值

**将yyyy-MM-dd转化为new Date()**

也就是转化为日期控件可以接受的类型 直接初始化

export const forMatToDate=(date)=>
      return new Date('2018-04-16 19:43:00');
    }

**获取当前的时间yyyy-MM-dd HH:mm:ss**

没有满10就补0

export default const obtainDate=()=>{ 
     let date = new Date();
          let year = date.getFullYear();
          let month = date.getMonth() + 1;
          let day=date.getDate();
          let hours=date.getHours();
          let minu=date.getMinutes();
          let second=date.getSeconds();
          //判断是否满10
          let arr=[month,day,hours,minu,second];
          arr.forEach(item=>{ 
            item< 10?"0"+item:item;
          })
          return year+'-'+arr[0]+'-'+arr[1]+' '+arr[2]+':'+arr[3]+':'+arr[4]      
    }

**将时间戳转化为yyyy-MM-dd HH:mm:ss**

export default const returnTimestamp=(strTime)=>{ 
      let middleDate=new Date(strTime)
      return middleDate.toLocaleString('zh-CN',{ hour12:false}).replace(/\b\d\b/g, '0$&').replace(new RegExp('/','gm'),'-')
    })

**比较yyyy-MM-dd时间大小**

如果单个比较会比较复杂,这里直接处理成Number比较

export default const compareTwo=(dateOne,dateTwo)=>{ 
        return Number(dateOne.replace(/\-/g,""))<Number(dateTwo.replace(/\-/g,""))
    }

**计算两个日期格式为(yyyy-MM-dd)相差几个月**

export default const disparityFewMonth = (dateOne, dateTwo) => { 
        let datesOne = dateOne.split('-').map(item => Number(item));
        let datesTwo = dateTwo.split('-').map(item => Number(item));
        const diff = [0, 0, 0].map((value, index) => { 
            return datesOne[index] - datesTwo[index]
        });
        return (diff[0] * 12 + diff[1]) + '月' + diff[2] + '天'
    }

**new Date对象可接受的参数**

1、new Date("month dd,yyyy hh:mm:ss"); 
    2、new Date("month dd,yyyy"); 
    3、new Date(yyyy,mth,dd,hh,mm,ss); 注意：这种方式下，必须传递整型；
    4、new Date(yyyy,mth,dd); 
    5、new Date(ms); 注意：ms:是需要创建的时间和
    6.new Date(yyyy-MM-dd hh:mm:ss)
    GMT时间1970年1月1日之间相差的毫秒数；当前时间与GMT1970.1.1之间的毫秒数：var mills = new Date().getTime();
    注意:mth:用整数表示月份，从0（1月）到11（12月）

## 数 组 ##

**检测是否是数组**

export default const judgeArr=(arr)=>{ 
            if(Array.isArray(arr)){ 
                return true;
            }
    }

**数组去重set方法**

1.常见利用循环和indexOf(ES5的数组方法,可以返回值在数组中第一次出现的位置)这里就不再详写,这里介绍一种利用ES6的set实现去重.

2.set是新怎数据结构,似于数组，但它的一大特性就是所有元素都是唯一的.

3.set常见操作 大家可以参照下面这个:\[新增数据结构Set的用法\]\[3\]

4.set去重代码

export const changeReArr=(arr)=>{ 
        return Array.from(new Set([1,2,2,3,5,4,5]))//利用set将[1,2,2,3,5,4,5]转化成set数据,利用array from将set转化成数组类型
    }
    //或者
    export const changeReArr=(arr)=>{ 
        return [...new Set([1,2,2,3,5,4,5])]//利用...扩展运算符将set中的值遍历出来重新定义一个数组,...是利用for...of遍历的
    }

Array.from可以把带有lenght属性类似数组的对象转换为数组，也可以把字符串等可以遍历的对象转换为数组，它接收2个参数，转换对象与回调函数,…和Array.from都是ES6的方法

**纯数组排序**

常见有冒泡和选择,这里我写一下利用sort排序

export const orderArr=(arr)=>{ 
            arr.sort((a,b)=>{ 
                return a-b //将arr升序排列,如果是倒序return -(a-b)
            })
     }

**数组对象排序**

export const orderArr=(arr)=>{ 
            arr.sort((a,b)=>{ 
                let value1 = a[property];
                let value2 = b[property];
                return value1 - value2;//sort方法接收一个函数作为参数，这里嵌套一层函数用
                //来接收对象属性名，其他部分代码与正常使用sort方法相同
            })
    }

**数组中的最大值**

export const maxArr=(arr)=>{ 
        return Math.max(...arr)
     }
     
     或者export const maxArr=(arr)=>{ 
        return Math.max.apply(null,arr)
     }

**数组的"短路运算"every和some**

数组短路运算这个名字是我自己加的,因为一般有这样一种需求,一个数组里面某个或者全部满足条件,就返回true

//情况一:全部满足
    
    export const allTrueArr=(arrs)=>{ 
          return arr.every((arr)=>{ 
             return arr>20;//如果数组的每一项都满足则返回true,如果有一项不满足返回false,终止遍历
          })  
    }
    
    //情况二:有一个满足
    export default const OneTrueArr=(arrs)=>{ 
          return arr.some((arr)=>{ 
             return arr>20;//如果数组有一项满足则返回true,终止遍历,每一项都不满足则返回false
          })  
    }

以上两种情景就和||和&&的短路运算很相似,所以我就起了一个名字叫短路运算,当然两种情况都可以通过遍历去判断每一项然后用break和return false 结束循环和函数.

**数组过滤filter和处理map方法**

filter:过滤满足某一条件的数组值,并返回新数组

export const filterArr = (arr, operator, judgeVal) => { 
      return arr.filter(item => { 
        if (operator == '>') { 
          return item > judgeVal;
        } else if (operator == '<') { 
          return item > judgeVal;
        } else if (operator == '==') { 
          return item == judgeVal;
        }
      })
    }

**map:对数组进行处理返回一个新数组**

export const mapArr = (arr) => { 
      return arr.map(item => item + 10;)//箭头函数的{}如果省略,则会默认返回,不用写return
     }

## 对 象 ##

**对象遍历**

export const traverseObj=(obj)=>{ 
        for(let variable in obj){ 
        //For…in遍历对象包括所有继承的属性,所以如果
         //只是想使用对象本身的属性需要做一个判断
        if(obj.hasOwnProperty(variable)){ 
            console.log(variable,obj[variable])
        }
        }
    }

**对象的数据属性**

对象属性分类:数据属性和访问器属性;

数据属性:包含数据值的位置,可读写,包含四个特性包含四个特性：

configurable：表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或能否把属性修改为访问器属性，默认为true
     enumerable:表示能否通过for-in循环返回属性
     writable：表示能否修改属性的值
     value：包含该属性的数据值。默认为undefined

修改数据属性的默认特性,利用Object.defineProperty()

export const modifyObjAttr=()=>{ 
      let person={ name:'张三',age:30};
      Object.defineProperty(person,'name',{ 
        writable:false,
        value:'李四',
        configurable:false,//设置false就不能对该属性修改
        enumerable:false
      })
    }

**对象的访问器属性**

访问器属性的四个特性:

configurable：表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或能否把属性修改为访问器属性，默认为false
    
     enumerable:表示能否通过for-in循环返回属性,默认为false
    
     Get：在读取属性时调用的函数,默认值为undefined
    
     Set：在写入属性时调用的函数,默认值为undefined

定义: 访问器属性只能通过要通过Object.defineProperty()这个方法来定义

export const defineObjAccess=()=>{ 
    let personAccess={ 
        _name:'张三',//_表示是内部属性,只能通过对象的方法修改
        editor:1
      }
      Object.defineProperty(personAccess,'name',{ 
        get:function(){ 
          return this._name;
        },
        set:function(newName){ 
          if(newName!==this._name){ 
            this._name=newName;
            this.editor++;
          }
        }
        //如果只定义了get方法则改对象只能读
      })
    }

vue中最核心的响应式原理的核心就是通过defineProperty来劫持数据的getters和setter属性来改变数据的。

## axios ##

**axios的get方法**

export const getAjax= function (getUrl,getAjaxData) { 
      return axios.get(getUrl, { 
        params: { 
          'getAjaxDataObj1': getAjaxData.obj1,//obj1为getAjaxData的一个属性
          'getAjaxDataObj2': getAjaxData.obj2
        }
      }).then(data=>{ 
          //成功返回
      }).catch(err=>{ 
          //错误返回
      })
    }

**axios的post方法**

export const postAjax= function (getUrl,postAjaxData) { 
      return axios.post(postUrl, { 
          'postAjaxDataObj1': postAjaxData.obj1,//obj1为postAjaxData的一个属性
          'postAjaxDataObj2': postAjaxData.obj2
      }).then(data=>{ 
          //成功返回
      }).catch(err=>{ 
          //错误返回
      })
    }

**axios的拦截器**

主要分为请求和响应两种拦截器,请求拦截一般就是配置对应的请求头信息(适用与常见请求方法,虽然ajax的get方法没有请求头,但是axios里面进行啦封装),响应一般就是对reponse进行拦截处理,如果返回结果为\[\]可以转化为0

请求拦截:将当前城市信息放入请求头中

axios.interceptors.request.use(config => { 
      config.headers.cityCode = window.sessionStorage.cityCode //jsCookie.get('cityCode')
      return config
    },

响应拦截:处理reponse的结果

axios.interceptors.response.use((response) =>\{  
let data = response.data  
if(response.request.responseType === ‘arraybuffer’&&!data.length)\{  
reponse.date=0  
\}  
\})

## promise ##

promise是一种封装未来值的易于复用的异步任务管理机制,主要解决地狱回调和控制异步的顺序。

**应用方法一**

export const promiseDemo=()=>{ 
    new Promise((resolve,reject)=>{ 
        resolve(()=>{ 
            let a=1;
            return ++a;
        }).then((data)=>{ 
            console.log(data)//data值为++a的值
        }).catch(()=>{ //错误执行这个
    
        })
    })
    }

**应用方法二**

export const promiseDemo=()=>{ 
    Promise.resolve([1,2,3]).then((data)=>{ //直接初始化一个Promise并执行resolve方法
        console.log(data)//data值为[1,2,3]
    })
    }

## 文本框的判断 ##

**全部为数字**

方法一(最简单):

export const judgeNum1=(num1)=>{ 
        if(typeof num1=='number'){ 
            return true;
        }else{ 
            return false;
        }
    }

方法二:isNaN

export const judgeNum1=(num1)=>{ 
        if(!isNaN(num1)){ 
            return true;
        }else{ 
            return false;
        }
    }

注:当num1为\[\]（空数组）、“”（空字符串)和null会在过程中转换为数字类型的0,所以也会返回false,从而判断为数字,所以可以将用typeof将以上特殊情况剔除.

方法三:正则

export const judgeNum1=(num1)=>{ 
      let reg=/^[0-9]*$/
      if(!reg.test(num1)){ 
        console.log('num1是0-9')
      }
    }

**只能为数字或字母**

这个用正则判断 定义一个正则:let reg=/^[0-9a-zA-Z]*$/g

**只能为数字,字母和英文逗号**

因为存在输入多个编号,以英文逗号分隔的情况 定义一个正则:let reg=/^[0-9a-zA-Z,]*$/g

**判断输入的位数不超过16位**

直接利用字符串新加的length属性来判断

export const judgeNum1=(num1)=>{ 
          if(num1.length>16){ 
            console.log('num1超过16位')
         }
     }