原文鏈接：https://segmentfault.com/a/1190000013438501

前言

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

1.日期

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

1.1 element-UI的日期格式化

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

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

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

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

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

沒有滿10就補0

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<?10?"0"+item:item;??????})??????console.log(year+'-'+arr[0]+'-'+arr[1]+'?'+arr[2]+':'+arr[3]+':'+arr[4])???????}

2.數組

2.1 檢測是否是數組

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去重代碼

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排序

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

2.4 數組對象排序

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

情況一:全部滿足????export?const?allTrueArr=(arrs)=>{??????????arr.every((arr)=>{?????????????return?arr>20;//如果數組的沒一項都滿足則返回true,如果有一項不滿足返回false,終止遍歷??????????})??????}情況二:有一個滿足export?default?const?OneTrueArr=(arrs)=>{??????arr.some((arr)=>{?????????return?arr>20;//如果數組的沒一項都滿足則返回false,如果有一項不滿足返回true,終止遍歷??????})??}

以上兩種情景就和||和&&的短路運算很相似,所以我就起了一個名字叫短路運算,當然兩種情況都可以通過遍歷去判斷每一項然后用break和return false 結束循環和函數.

3.對象

3.1 對象遍歷

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

3.2 對象的數據屬性

1.對象屬性分類:數據屬性和訪問器屬性;

2.數據屬性:包含數據值的位置,可讀寫,包含四個特性包含四個特性：

configurable：表示能否通過delete刪除屬性從而重新定義屬性，能否修改屬性的特性，或能否把屬性修改為訪問器屬性，默認為true?enumerable:表示能否通過for-in循環返回屬性?writable：表示能否修改屬性的值?value：包含該屬性的數據值。默認為undefined

3.修改數據屬性的默認特性,利用Object.defineProperty()

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

3.3 對象的訪問器屬性

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

configurable：表示能否通過delete刪除屬性從而重新定義屬性，能否修改屬性的特性，或能否把屬性修改為訪問器屬性，默認為false?enumerable:表示能否通過for-in循環返回屬性,默認為false?Get：在讀取屬性時調用的函數,默認值為undefined?Set：在寫入屬性時調用的函數,默認值為undefined

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

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方法

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

4.2 axios的post方法

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

4.3 axios的攔截器

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

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

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

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

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

5.promise

promise是一種封裝未來值的易于復用的異步任務管理機制,主要解決地獄回調和控制異步的順序

5.1 應用方法一

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

5.2 應用方法二

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

6.文本框的判斷

6.1 全部為數字

方法一(最簡單):

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

方法二:isNaN

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

注:當num1為[]（空數組）、“”（空字符串)和null會在過程中轉換為數字類型的0,所以也會返回false,從而判斷為數字,所以可以將用typeof將以上特殊情況剔除.

方法三:正則

export?default?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屬性來判斷

export?default?const?judgeNum1=(num1)=>{??????if(num1.length>16){????????

console.log('num1超過16位')?????}?}

總結

以上是生活随笔為你收集整理的前端简洁并实用的工具类 (推荐收藏)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。