简洁的工具类函数封装

数组

1.1 检查是不是数组

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

1.2 数组去重set方法

set 去重代码,方法一
//利用set方法将数组转化为set数据,而后用Array.from将set转化为数组类型javascript

export const chnageReArr=(arr)=>{
    return Array.from(new Set([1,2,3,3,5,5,6]))
}

方法二
//利用…扩展运算符将set中的值遍历出来从新定义一个数据,…是利用for…of遍历的java

export const changeReArr=(arr)=>{
    return {...new Set([1,1,22,3,3,5])}
}

Array.form 能够把带有length属性相似数组的对象转化为数组,也能够把字符串等能够遍历的对象转化为数组,它接收两个参数,转换对象与回调函数,…和Array.from都是ES6的方法ios

1.3 纯数组排序

sort 排序web

export const orderArr=>(arr)=>{
    arr.sort((a,b)=>{ return a-b }) }

1.4 数组对象排序

sort 函数在这里接收对象属性名ajax

export const orderArr=>(arr)=>{
    arr.sort((a,b)=>{ let value1 = a[property]; let value2 = b[property]; return value1 - value2; }) }

1.5 数组的‘短路运算’ every和some

//若是数组的每一项都知足,则返回true,若是有一项不知足,就返回falseelement-ui

export default const allTrueAarr=(arr)=>{
    return arr.eveyy((arr)=>{ return arr>20; }) }

//若是数组中有一项知足,就返回true,若果每一项都不知足,则返回falseaxios

export default const OneTrueArr(arr)=>{
    return arr.some((arr)=>{ return arr>20; }) }

对象

1.1 对象遍历

//for…in 遍历对象包括全部继承的属性因此若是只是想使用对象自己的属性须要作一个判断数组

export default const traverseObj=(obj)=>{
    for(let variable in obj){
        if(obj.hasOwnProperty(variable)){
            console.log(variable,obj[variable])
        }
    }
}

1.2 对象的数据属性

对象属性分类:数据属性,访问器属性
数据属性的四个特性:
1.configurabel:表示可否经过delete删除属性从而从新定义属性,可否修改属性的特性或者可否把属性修改成访问器属性,默认为true
2.enumerable:表示可否经过for-in循环返回属性
3.wriable:表示可否修改属性的值
4.value:包含该属性的数据值,默认为underfined
修改数据属性的默认特性,利用 Object.defineProperty()promise

export default const modifyObjAttr=()=>{
    let person = {name:'李四',age:40};
    Object.defineProperty(person,'name',{
        writable:false,
        value:'张三',
        configurable:false,
        enumerable:false
    })
}

1.3 对象的访问器属性

访问器属性的四个特性
1.configurable: 表示可否经过delete删除属性从而从新定义属性,可否修改属性的特性,或者可否将属性修改成访问器属性,默认为false
2.enumerable:表示可否经过for-in循环返回属性的值,默认为false
3.Get:在读取属性时调动的函数,默认为underfined
4.Set:在写入属性时调用的函数,默认值为underfined
访问器属性只能经过Object.defineProperty()来定义网络

export default 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

1.1 axios 的get方法

export default getAjax=function(getUrl,getAjaxData){
    return axios.get(getUrl,{
        params:{
            'getAjaxDataObj1':getAjaxData.obj1,obj1为getAjaxData的一个属性
            'getAjaxDataObj2':getAjaxData.obj2
        }
    })
}

1.2 axios的post方法

export default const postAjax=function(getUrl,getAjaxData){
    return axios.get(postUrl,{
        'postAjaxDataObj1':postAjaxObj1,
        'postAjaxDataObj2':postAjaxObj2
    })
}

1.3 axios的拦截器

拦截器主要分为请求和响应两种,请求拦截通常就是配置对应的请求头信息(适用于常见的请求方法,虽然ajax的get方法没有请求头,可是axios里面进行了封装),响应通常就是对response进行拦截处理,若是返回结果为[] 能够转化为0

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

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

响应拦截:处理response的结果

axios.interceptors.response.use((response)=>{
    let data = response.data;
    if(response.request.responseType === 'arraybuffer'$$!data.length){ response.data = 0; }
})

promise

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

1.1 应用方法一

export default const promiseDemo=()=>{
    new Promise((resolve,reject)=>{ resolve(()=>{ let a = 1; return ++a; }).then((data)=>{ console.log(data); //data的值为++a的值 }).catch(()=>{ console.log('网络故障'); // 错误提示 }) }) }

1.2 应用方法二

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

文本框的判断

1.1 所有为数字

方法一

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

方法二

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

注:当num1为空数组、空字符串和null时,会在过程当中转化为数字类型的0,因此也会返回false,从而判断为数字,因此用tyoeof将以上状况排除
方法三 正则

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

1.2 只能为数字或字母

let reg = /^[0-9a-zA-Z]*$/g

1.3 只能为数字、字母和英文符号

let reg = /^[0-9a-zA-Z,]*$/g

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

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

日期

1.1 element-UI 的日期格式化

DatePicker 日期选择器默认获取到的日期是Date对象,可是咱们后台须要用到的是yyyy-MM-dd,因此须要咱们进行转化

方法一 转化为dd-MM-yyyy HH:mm:ss

export default const dateFormat=(date1)=>{
    date1.toLocaleString('en-US',{hour12:false}).replace(/\b\d\b/g).replace(new RegExp('/'),'gm'),'-')
}

方法二 从element-UI 提供的value-format属性,直接设置返回的值

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

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();
    let arr=[month,day,hours,minu,second];
    arr.forEach((item)=>{
        item<10?'0'+item:item;
    })
    console.log(year+'-'+arr[0]+'-'+arr[1]+'-'+arr[3]+':'+arr[4])
}

提升开发效率,工具库是必备神器!!!