简洁的工具类函数封装

数组

1.1 检查是否是数组

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

1.2 数组去重set方法

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

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

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

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

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

1.3 纯数组排序

sort 排序

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

1.4 数组对象排序

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

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

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

//如果数组的每一项都满足,则返回true,如果有一项不满足,就返回false

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

//如果数组中有一项满足,就返回true,若果每一项都不满足,则返回false

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()

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])
}

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

猜你喜欢

转载自blog.csdn.net/weixin_41676178/article/details/79461532
今日推荐