簡潔的工具類函數封裝

數組

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

提升開發效率,工具庫是必備神器!!!