前言
本文主要從日期,陣列,物件,axios,promise和字元判斷這幾個方面講工作中常用的一些函式進行了封裝,確實可以在專案中直接引用,提高開發效率.
1.日期
日期在後臺管理系統還是用的很多的,一般是作為資料存貯和管理的一個維度,所以就會涉及到很多對日期的處理
1.1 element-UI的日期格式化
DatePicker日期選擇器預設獲取到的日期預設是Date物件,但是我們後臺需要用到的是yyyy-MM-dd,所以需要我們進行轉化
方法一:轉化為dd-MM-yyyy HH:mm:ss
|
1 2 3 |
export 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
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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 |
2.陣列
2.1 檢測是否是陣列
|
1 2 3 4 5 |
export 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去重程式碼
|
1 2 3 4 5 6 7 8 |
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的方法
2.3 純陣列排序
常見有冒泡和選擇,這裡我寫一下利用sort排序
|
1 2 3 4 5 |
export const orderArr=(arr)=>{ arr.sort((a,b)=>{ return a-b //將arr升序排列,如果是倒序return -(a-b) }) } |
2.4 陣列物件排序
|
1 2 3 4 5 6 7 8 |
export 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
情況一:全部滿足 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 物件遍歷
|
1 2 3 4 5 6 7 8 9 |
export const traverseObj=(obj)=>{ for(let variable in obj){ //For…in遍歷物件包括所有繼承的屬性,所以如果 //只是想使用物件本身的屬性需要做一個判斷 if(obj.hasOwnProperty(variable)){ console.log(variable,obj[variable]) } } } |
3.2 物件的資料屬性
1.物件屬性分類:資料屬性和訪問器屬性;
2.資料屬性:包含資料值的位置,可讀寫,包含四個特性包含四個特性：
|
1 2 3 4 |
configurable：表示能否通過delete刪除屬性從而重新定義屬性，能否修改屬性的特性，或能否把屬性修改為訪問器屬性，預設為true enumerable:表示能否通過for-in迴圈返回屬性 writable：表示能否修改屬性的值 value：包含該屬性的資料值。預設為undefined |
3.修改資料屬性的預設特性,利用Object.defineProperty()
|
1 2 3 4 5 6 7 8 9 |
export const modifyObjAttr=()=>{ let person={name:'張三',age:30}; Object.defineProperty(person,'name',{ writable:false, value:'李四', configurable:false,//設定false就不能對該屬性修改 enumerable:false }) } |
3.3 物件的訪問器屬性
1.訪問器屬性的四個特性:
|
1 2 3 4 5 6 7 |
configurable：表示能否通過delete刪除屬性從而重新定義屬性，能否修改屬性的特性，或能否把屬性修改為訪問器屬性，預設為false enumerable:表示能否通過for-in迴圈返回屬性,預設為false Get：在讀取屬性時呼叫的函式,預設值為undefined Set：在寫入屬性時呼叫的函式,預設值為undefined |
2.定義:
訪問器屬性只能通過要通過Object.defineProperty()這個方法來定義
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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屬性來改變資料的
4.axios
4.1 axios的get方法
|
1 2 3 4 5 6 7 8 |
export const getAjax= function (getUrl,getAjaxData) { return axios.get(getUrl, { params: { 'getAjaxDataObj1': getAjaxData.obj1,//obj1為getAjaxData的一個屬性 'getAjaxDataObj2': getAjaxData.obj2 } }) } |
4.2 axios的post方法
|
1 2 3 4 5 6 |
export 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.請求攔截:將當前城市資訊放入請求頭中
|
1 2 3 4 |
axios.interceptors.request.use(config => { config.headers.cityCode = window.sessionStorage.cityCode //jsCookie.get('cityCode') return config }, |
2.響應攔截:處理reponse的結果
|
1 2 3 4 5 6 |
axios.interceptors.response.use((response) =>{ let data = response.data if(response.request.responseType === 'arraybuffer'&&!data.length){ reponse.date=0 } }) |
5.promise
promise是一種封裝未來值的易於複用的非同步任務管理機制,主要解決地獄回撥和控制非同步的順序
5.1 應用方法一
|
1 2 3 4 5 6 7 8 9 10 11 12 |
export const promiseDemo=()=>{ new Promise((resolve,reject)=>{ resolve(()=>{ let a=1; return ++a; }).then((data)=>{ console.log(data)//data值為++a的值 }).catch(()=>{//錯誤執行這個 }) }) } |
5.2 應用方法二
|
1 2 3 4 5 |
export const promiseDemo=()=>{ Promise.resolve([1,2,3]).then((data)=>{//直接初始化一個Promise並執行resolve方法 console.log(data)//data值為[1,2,3] }) } |
6.文字框的判斷
6.1 全部為數字
方法一(最簡單):
|
1 2 3 4 5 6 7 |
export const judgeNum1=(num1)=>{ if(typeof num1==number){ return true; }else{ return false; } } |
方法二:isNaN
|
1 2 3 4 5 6 7 |
export const judgeNum1=(num1)=>{ if(!isNaN(num1)){ return true; }else{ return false; } } |
注:當num1為[]（空陣列）、“”（空字串)和null會在過程中轉換為數字型別的0,所以也會返回false,從而判斷為數字,所以可以將用typeof將以上特殊情況剔除.
方法三:正則
|
1 2 3 4 5 6 |
export const judgeNum1=(num1)=>{ let reg=/^[0-9]*$/ 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屬性來判斷
|
1 2 3 4 5 |
export const judgeNum1=(num1)=>{ if(num1.length>16){ console.log('num1超過16位') } } |
結束
很開心你還能看到這裡,這些類可能你現在用不到,但可以先收藏著.
大家可以一起交流,下次專案開發直接拿過去用,現在3月專案比較趕,這個真的可以提高開發效率哦!祝大家新年快樂噠.