close
X

前端簡潔並實用的工具類函式封裝


原文出處: 火狼   

前言

本文主要從日期,陣列,對象,axios,promise和字元判斷這幾個方面講工作中常用的一些函式進行了封裝,確實可以在專案中直接引用,提高開發效率.

1.日期

日期在後臺管理系統還是用的很多的,一般是作為資料存貯和管理的一個維度,所以就會涉及到很多對日期的處理

1.1 element-UI的日期格式化

DatePicker日期選擇器預設獲取到的日期預設是Date對象,但是我們後臺需要用到的是yyyy-MM-dd,所以需要我們進行轉化

方法一:轉化為dd-MM-yyyy HH:mm:ss


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

方法二:
從element-UI的2.x版本提供了value-format屬性,可以直接設定選擇器返回的值

1.2 獲取當前的時間yyyy-MM-dd HH:mm:ss

沒有滿10就補0

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

2.陣列

2.1 檢測是否是陣列


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

2.2陣列去重set方法

1.常見利用迴圈 循環和indexOf(ES5的陣列方法,可以返回值在陣列中第一次出現的位置)這裡就不再詳寫,這裡介紹一種利用ES6的set實現去重.

2.set是新怎資料結構,似於陣列,但它的一大特性就是所有元素都是唯一的.

3.set常見操作
大家可以參照下面這個:新增資料結構Set的用法

4.set去重程式碼

12345678export 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的方法

2.3 純陣列排序

常見有冒泡和選擇,這裡我寫一下利用sort排序

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

2.4 陣列對象排序

12345678export const orderArr=(arr)=>{        arr.sort((a,b)=>{            let value1 = a[property];            let value2 = b[property];            return value1 value2;//sort方法接收一個函式作為引數,這裡巢狀一層函式            //來接收對象屬性名,其他部分程式碼與正常使用sort方法相同        })    }      

2.5 陣列的」短路運算」every和some

陣列短路運算這個名字是我自己加的,因為一般有這樣一種需求,一個陣列裡面某個或者全部滿足條件,就返回true

1234567891011121314情況一:全部滿足     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 結束迴圈 循環和函式.

3.對象

3.1 對象遍歷

123456789export const traverseObj=(obj)=>{        for(let variable in obj){        //For…in遍歷對象包括所有繼承的屬性,所以如果         //只是想使用對象本身的屬性需要做一個判斷        if(obj.hasOwnProperty(variable)){            console.log(variable,obj[variable])        }        }    }

3.2 對象資料屬性

1.對象屬性分類:資料屬性和訪問器屬性;

2.資料屬性:包含資料值的位置,可讀寫,包含四個特性包含四個特性:

1234configurable:表示能否通過delete刪除屬性從而重新定義屬性,能否修改屬性的特性,或能否把屬性修改為訪問器屬性,預設為true enumerable:表示能否通過forin迴圈 循環返回屬性 writable:表示能否修改屬性的值 value:包含該屬性資料值。預設為undefined

3.修改資料屬性的預設特性,利用Object.defineProperty()

123456789 export const modifyObjAttr=()=>{  let person={name:'張三',age:30};  Object.defineProperty(person,'name',{    writable:false,    value:'李四',    configurable:false,//設定false就不能對該屬性修改    enumerable:false  })}

3.3 對象的訪問器屬性

1.訪問器屬性的四個特性:

1234567configurable:表示能否通過delete刪除屬性從而重新定義屬性,能否修改屬性的特性,或能否把屬性修改為訪問器屬性,預設為false  enumerable:表示能否通過forin迴圈 循環返回屬性,預設為false  Get:在讀取屬性時呼叫的函式,預設值為undefined  Set:在寫入屬性時呼叫的函式,預設值為undefined

2.定義:
訪問器屬性只能通過要通過Object.defineProperty()這個方法定義

123456789101112131415161718export 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屬性來改變資料

4.axios

4.1 axios的get方法

12345678export const getAjax= function (getUrl,getAjaxData) {  return axios.get(getUrl, {    params: {      'getAjaxDataObj1': getAjaxData.obj1,//obj1為getAjaxData的一個屬性      'getAjaxDataObj2': getAjaxData.obj2    }  })}

4.2 axios的post方法

123456export const postAjax= function (getUrl,postAjaxData) {  return axios.post(postUrl, {      'postAjaxDataObj1': postAjaxData.obj1,//obj1為postAjaxData的一個屬性      'postAjaxDataObj2': postAjaxData.obj2  })}

4.3 axios的攔截器

主要分為請求和響應兩種攔截器,請求攔截一般就是配置對應的請求頭資訊(適用與常見請求方法,雖然ajax的get方法沒有請求頭,但是axios裡面進行啦封裝),響應一般就是對reponse進行攔截處理,如果返回結果為[]可以轉化為0

1.請求攔截:將當前城市資訊放入請求頭中

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

2.響應攔截:處理reponse的結果

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

5.promise

promise是一種封裝未來值的易於複用的非同步任務管理機制,主要解決地獄回撥和控制非同步的順序

5.1 應用方法

123456789101112export const promiseDemo=()=>{new Promise((resolve,reject)=>{    resolve(()=>{        let a=1;        return ++a;    }).then((data)=>{        console.log(data)//data值為++a的值    }).catch(()=>{//錯誤執行這個     })})}

5.2 應用方法

12345export const promiseDemo=()=>{Promise.resolve([1,2,3]).then((data)=>{//直接初始化一個Promise並執行resolve方法    console.log(data)//data值為[1,2,3]})}

6.文字框的判斷

6.1 全部為數字

方法一(最簡單):

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

方法二:isNaN

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

注:當num1為[](空陣列)、「」(空字串)和null會在過程中轉換為數字型別的0,所以也會返回false,從而判斷為數字,所以可以將用typeof將以上特殊情況剔除.

方法三:正則

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

6.2 只能為數字或字母

這個用正則判斷
定義一個正則:let reg=/^[0-9a-zA-Z]*$/g

6.3 只能為數字,字母和英文逗號

因為存在輸入多個編號,以英文逗號分隔的情況
定義一個正則:let reg=/^[0-9a-zA-Z,]*$/g

6.4 判斷輸入的位數不超過16位

直接利用字串新加的length屬性來判斷

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

結束

很開心你還能看到這裡,這些類可能你現在用不到,但可以先收藏著.
大家可以一起交流,下次專案開發直接拿過去用,現在3月專案比較趕,這個真的可以提高開發效率哦!祝大家新年快樂噠.


分享是一種美德,喜歡就幫我們讚一下支持吧~

為你推薦