1. 日 期
日期在后臺管理系統(tǒng)還是用的很多的，一般是作為數據存貯和管理的一個維度，所以就會涉及到很多對日期的處理。
1.1 new Date轉化為yyyy-MM-dd HH:mm:ss
DatePicker日期選擇器默認獲取到的日期默認是Date對象，但是我們后臺需要用到的是yyyy-MM-dd，所以需要我們進行轉化。
方法一:
將Fri Mar 23 2018 12:19:48 GMT+0800 (國際時間)轉化為dd-MM-yyyy HH:mm:ss
export const dateToFormat=(date)=>{
? ? date.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轉化為new Date()
也就是轉化為日期控件可以接受的類型
export const forMatToDate=(date)=>{
? ? ? let dateArr=date.split(':');
? return new Date(2017,10,19,dateArr[0],dateArr[1],dateArr[2]);
? ? }
注意！日期中初始化默認比實際設置的值大一
1.3 獲取當前的時間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;
? ? ? })? ? ?
? ? ? return year+'-'+arr[0]+'-'+arr[1]+' '+arr[2]+':'+arr[3]+':'+arr[4]? ? ?
}
1.4 將時間戳轉化為yyyy-MM-dd HH:mm:ss
export default const returnTimestamp=(strTime)=>{
? let middleDate=new Date(strTime)
? return middleDate.toLocaleString('zh-CN',{hour12:false}).replace(/\b\d\b/g, '0$&').replace(new RegExp('/','gm'),'-')
})?
1.5 比較yyyy-MM-dd時間大小
如果單個比較會比較復雜，這里直接處理成Number比較。
export default const compareTwo=(dateOne,dateTwo)=>{
? ? return Number(dateOne.replace(/\-/g,""))<Number(dateTwo.replace(/\-/g,""))
}
1.6 計算兩個日期格式為(yyyy-MM-dd)相差幾個月
export default const disparityFewMonth = (dateOne, dateTwo) => {
? let datesOne = dateOne.split('-').map(item => Number(item));? ?
? ? let datesTwo = dateTwo.split('-').map(item => Number(item));? ?
? ? const diff = [0, 0, 0].map((value, index) => {? ?
? ? ? ? return datesOne[index] - datesTwo[index]
? ? });? ?
? ? return (diff[0] * 12 + diff[1]) + '月' + diff[2] + '天'
}
1.7 new Date對象可接受的參數
1、new Date("month dd,yyyy hh:mm:ss");
2、new Date("month dd,yyyy");
3、new Date(yyyy,mth,dd,hh,mm,ss); 注意：這種方式下，必須傳遞整型；4、new Date(yyyy,mth,dd);
5、new Date(ms); 注意：ms:是需要創(chuàng)建的時間和 GMT時間1970年1月1日之間相差的毫秒數；當前時間與GMT1970.1.1之間的毫秒數：var mills = new Date().getTime();
注意:mth:用整數表示月份，從0（1月）到11（12月）
2. 數 組
2.1 檢測是否是數組
export default const judgeArr=(arr)=>{
? ? ? ? if(Array.isArray(arr)){
? ? ? ? ? ? return true;
? ? ? ? }
? ? }
2.2數組去重set方法
1.常見利用循環(huán)和indexOf(ES5的數組方法,可以返回值在數組中第一次出現(xiàn)的位置)這里就不再詳寫，這里介紹一種利用ES6的set實現(xiàn)去重。
2.set是新怎數據結構，似于數組，但它的一大特性就是所有元素都是唯一的。
3.set常見操作
大家可以參照下面這個:新增數據結構Set的用法（https://www.cnblogs.com/kongxianghai/p/7250248.html）
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可以把帶有l(wèi)enght屬性類似數組的對象轉換為數組，也可以把字符串等可以遍歷的對象轉換為數組，它接收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 數組中的最大值
export const maxArr=(arr)=>{
? ? return Math.max(...arr)
}
或者
export const maxArr=(arr)=>{
? ? return Math.max.apply(null,arr)
}
2.6 數組的"短路運算"every和some
數組短路運算這個名字是我自己加的，因為一般有這樣一種需求，一個數組里面某個或者全部滿足條件，就返回true。
情況一:全部滿足
? ? 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 結束循環(huán)和函數。
2.7 數組過濾filter和處理map方法
filter:過濾滿足某一條件的數組值，并返回新數組。
export const filterArr = (arr, operator, judgeVal) => {
? ? ? return arr.filter(item => {? ? ? ?
? ? ? ? if (operator == '>') {? ? ? ?
? ? ? ? ? return item > judgeVal;
? ? ? ? } else if (operator == '<') {? ? ? ? ?
? ? ? ? ? return item > judgeVal;
? ? ? ? } else if (operator == '==') {? ? ? ? ?
? ? ? ? ? return item == judgeVal;
? ? ? ? }
? ? ? })
? ? }
map：對數組進行處理返回一個新數組
export const mapArr = (arr) => {
? return arr.map(item => item + 10;)//箭頭函數的{}如果省略,則會默認返回,不用寫return
}
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循環(huán)返回屬性
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循環(huán)返回屬性,默認為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
? ? }
? }).then(data=>{? ? ?
? ? ? //成功返回
? }).catch(err=>{? ? ?
? ? ? //錯誤返回
? })
}
4.2 axios的post方法
export const postAjax= function (getUrl,postAjaxData) {
? return axios.post(postUrl, {? ? ?
? ? ? 'postAjaxDataObj1': postAjaxData.obj1,//obj1為postAjaxData的一個屬性
? ? ? 'postAjaxDataObj2': postAjaxData.obj2
? }).then(data=>{? ? ?
? ? ? //成功返回
? }).catch(err=>{? ? ?
? ? ? //錯誤返回
? })
}
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(()=>{//錯誤執(zhí)行這個
? ? })
})
}
5.2 應用方法二
export const promiseDemo=()=>{
Promise.resolve([1,2,3]).then((data)=>{//直接初始化一個Promise并執(zhí)行resolve方法
? ? console.log(data)//data值為[1,2,3]
})
}
6. 文本框的判斷
6.1 全部為數字
方法一：(最簡單)
export const judgeNum1=(num1)=>{
? ? if(typeof num1=='number'){? ? ? ?
? ? ? ? return true;
? ? }else{? ? ? ?
? ? ? ? return false;
? ? }
}
方法二： isNaN
export const judgeNum1=(num1)=>{
? ? if(!isNaN(num1)){? ? ? ?
? ? ? ? return true;
? ? }else{? ? ? ?
? ? ? ? return false;
? ? }
}
注:當num1為[]（空數組）、“”（空字符串)和null會在過程中轉換為數字類型的0,所以也會返回false,從而判斷為數字,所以可以將用typeof將以上特殊情況剔除.
方法三：正則
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屬性來判斷
export const judgeNum1=(num1)=>{
? ? ? if(num1.length>16){? ? ? ?
? ? ? ? console.log('num1超過16位')
? ? ? }
}
6.5 去掉字符左右空格
export const trimLeOrRi=(str)=>{ //刪除左右兩端的空格
return str.replace(/(^s)|(s$)/g, "");
}
