摘要:前言本文主要從日期數(shù)組對象和字符判斷這幾個(gè)方面講工作中常用的一些函數(shù)進(jìn)行了封裝確實(shí)可以在項(xiàng)目中直接引用提高開發(fā)效率日期日期在后臺管理系統(tǒng)還是用的很多的一般是作為數(shù)據(jù)存貯和管理的一個(gè)維度所以就會涉及到很多對日期的處理轉(zhuǎn)化為日期選擇器默認(rèn)獲
前言
本文主要從日期,數(shù)組,對象,axios,promise和字符判斷這幾個(gè)方面講工作中常用的一些函數(shù)進(jìn)行了封裝,確實(shí)可以在項(xiàng)目中直接引用,提高開發(fā)效率.
1.日期日期在后臺管理系統(tǒng)還是用的很多的,一般是作為數(shù)據(jù)存貯和管理的一個(gè)維度,所以就會涉及到很多對日期的處理
1.1 new Date轉(zhuǎn)化為yyyy-MM-dd HH:mm:ssDatePicker日期選擇器默認(rèn)獲取到的日期默認(rèn)是Date對象,但是我們后臺需要用到的是yyyy-MM-dd,所以需要我們進(jìn)行轉(zhuǎn)化
方法一:將Fri Mar 23 2018 12:19:48 GMT+0800 (國際時(shí)間)轉(zhuǎn)化為dd-MM-yyyy HH:mm:ss
export const dateToFormat=(date)=>{ date.toLocaleString("en-US", { hour12: false }).replace(/d/g, "0$&").replace(new RegExp("/","gm"),"-") }
方法二:
從element-UI的2.x版本提供了value-format屬性,可以直接設(shè)置選擇器返回的值
也就是轉(zhuǎn)化為日期控件可以接受的類型
export const forMatToDate=(date)=>{ let dateArr=date.split(":"); return new Date(2017,10,19,dateArr[0],dateArr[1],dateArr[2]); }
有個(gè)坑,日期中初始化默認(rèn)比實(shí)際設(shè)置的值大一1.3 獲取當(dāng)前的時(shí)間yyyy-MM-dd HH:mm:ss
沒有滿10就補(bǔ)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 將時(shí)間戳轉(zhuǎn)化為yyyy-MM-dd HH:mm:ss
export default const returnTimestamp=(strTime)=>{ let middleDate=new Date(strTime) return middleDate.toLocaleString("zh-CN",{hour12:false}).replace(/d/g, "0$&").replace(new RegExp("/","gm"),"-") })1.5 比較yyyy-MM-dd時(shí)間大小
如果單個(gè)比較會比較復(fù)雜,這里直接處理成Number比較
方法一:利用正則轉(zhuǎn)化成 Number
export default const compareTwo=(dateOne,dateTwo)=>{ return Number(dateOne.replace(/-/g,""))方法二:轉(zhuǎn)化成 Date 對象
export default const compareTwo=(dateOne,dateTwo)=>{ return new Date(dateOne)方法三:轉(zhuǎn)化成時(shí)間戳
export default const compareTwo=(dateOne,dateTwo)=>{ return new Date(dateOne).getTime()方法三:直接比較
export default const compareTwo=(dateOne,dateTwo)=>{ return dateOne1.6 計(jì)算兩個(gè)日期格式為(yyyy-MM-dd)相差幾個(gè)月"2007-2-2 6:30" //true "2007-02-02 7:30" > "2007-2-2 6:30" //false 所以直接比較不準(zhǔn)確不建議使用 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對象可接受的參數(shù)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)建的時(shí)間和 GMT時(shí)間1970年1月1日之間相差的毫秒數(shù);當(dāng)前時(shí)間與GMT1970.1.1之間的毫秒數(shù):var mills = new Date().getTime(); 注意:mth:用整數(shù)表示月份,從0(1月)到11(12月)1.8 獲取某年的某月的天數(shù)export default const monthDay=(year,month)=>{ return new Date(year, month, 0).getDate() }1.9 生成標(biāo)識id格式為時(shí)間戳的后8位加4位隨機(jī)數(shù)
export default const disparityFewMonth = (dateOne, dateTwo) => { let num=""; for (var i = 0; i < 4; i++) { num += Math.floor(Math.random() * 10); } return imgId = String(new Date().getTime()).slice(-8)+String(num);}
2.數(shù)組 2.1 檢測是否是數(shù)組export default const judgeArr=(arr)=>{ if(Array.isArray(arr)){ return true; } }2.2數(shù)組去重set方法1.常見利用循環(huán)和indexOf(ES5的數(shù)組方法,可以返回值在數(shù)組中第一次出現(xiàn)的位置)這里就不再詳寫,這里介紹一種利用ES6的set實(shí)現(xiàn)去重.
2.set是新怎數(shù)據(jù)結(jié)構(gòu),似于數(shù)組,但它的一大特性就是所有元素都是唯一的.
3.set常見操作
大家可以參照下面這個(gè):新增數(shù)據(jù)結(jié)構(gòu)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]轉(zhuǎn)化成set數(shù)據(jù),利用array from將set轉(zhuǎn)化成數(shù)組類型 } 或者 export const changeReArr=(arr)=>{ return [...new Set([1,2,2,3,5,4,5])]//利用...擴(kuò)展運(yùn)算符將set中的值遍歷出來重新定義一個(gè)數(shù)組,...是利用for...of遍歷的 }Array.from可以把帶有l(wèi)enght屬性類似數(shù)組的對象轉(zhuǎn)換為數(shù)組,也可以把字符串等可以遍歷的對象轉(zhuǎn)換為數(shù)組,它接收2個(gè)參數(shù),轉(zhuǎn)換對象與回調(diào)函數(shù),...和Array.from都是ES6的方法
2.3 純數(shù)組排序常見有冒泡和選擇,這里我寫一下利用sort排序
export const orderArr=(arr)=>{ arr.sort((a,b)=>{ return a-b //將arr升序排列,如果是倒序return -(a-b) }) }2.4 數(shù)組對象排序export const orderArr=(arr)=>{ arr.sort((a,b)=>{ let value1 = a[property]; let value2 = b[property]; return value1 - value2;//sort方法接收一個(gè)函數(shù)作為參數(shù),這里嵌套一層函數(shù)用 //來接收對象屬性名,其他部分代碼與正常使用sort方法相同 }) }2.5 數(shù)組中的最大值export const maxArr=(arr)=>{ return Math.max(...arr) } 或者export const maxArr=(arr)=>{ return Math.max.apply(null,arr) }2.6 數(shù)組的"短路運(yùn)算"every和some數(shù)組短路運(yùn)算這個(gè)名字是我自己加的,因?yàn)橐话阌羞@樣一種需求,一個(gè)數(shù)組里面某個(gè)或者全部滿足條件,就返回true
情況一:全部滿足 export const allTrueArr=(arrs)=>{ return arr.every((arr)=>{ return arr>20;//如果數(shù)組的每一項(xiàng)都滿足則返回true,如果有一項(xiàng)不滿足返回false,終止遍歷 }) } 情況二:有一個(gè)滿足 export default const OneTrueArr=(arrs)=>{ return arr.some((arr)=>{ return arr>20;//如果數(shù)組有一項(xiàng)滿足則返回true,終止遍歷,每一項(xiàng)都不滿足則返回false }) }以上兩種情景就和||和&&的短路運(yùn)算很相似,所以我就起了一個(gè)名字叫短路運(yùn)算,當(dāng)然兩種情況都可以通過遍歷去判斷每一項(xiàng)然后用break和return false 結(jié)束循環(huán)和函數(shù).
2.7 數(shù)組過濾filter和處理map方法filter:過濾滿足某一條件的數(shù)組值,并返回新數(shù)組
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:對數(shù)組進(jìn)行處理返回一個(gè)新數(shù)組
export const mapArr = (arr) => { return arr.map(item => item + 10;)//箭頭函數(shù)的{}如果省略,則會默認(rèn)返回,不用寫return }2.8將多維數(shù)組轉(zhuǎn)化為一維的類Array.prototype.flat = function() { var arr = []; this.forEach((item,idx) => { if(Array.isArray(item)) { arr = arr.concat(item.flat()); //遞歸去處理數(shù)組元素 } else { arr.push(item) //非數(shù)組直接push進(jìn)去 } }) return arr; //遞歸出口 } 測試用例: arr = [[2],[[2,3,[4,5,[7,8]]],[2]],3,4] console.log(arr.flat());3.對象 3.1 對象遍歷export const traverseObj=(obj)=>{ for(let variable in obj){ //For…in遍歷對象包括所有繼承的屬性,所以如果 //只是想使用對象本身的屬性需要做一個(gè)判斷 if(obj.hasOwnProperty(variable)){ console.log(variable,obj[variable]) } } }3.2 對象的數(shù)據(jù)屬性1.對象屬性分類:數(shù)據(jù)屬性和訪問器屬性;
2.數(shù)據(jù)屬性:包含數(shù)據(jù)值的位置,可讀寫,包含四個(gè)特性包含四個(gè)特性:
configurable:表示能否通過delete刪除屬性從而重新定義屬性,能否修改屬性的特性,或能否把屬性修改為訪問器屬性,默認(rèn)為true enumerable:表示能否通過for-in循環(huán)返回屬性 writable:表示能否修改屬性的值 value:包含該屬性的數(shù)據(jù)值。默認(rèn)為undefined3.修改數(shù)據(jù)屬性的默認(rèn)特性,利用Object.defineProperty()
export const modifyObjAttr=()=>{ let person={name:"張三",age:30}; Object.defineProperty(person,"name",{ writable:false, value:"李四", configurable:false,//設(shè)置false就不能對該屬性修改 enumerable:false }) }3.3 對象的訪問器屬性1.訪問器屬性的四個(gè)特性:
configurable:表示能否通過delete刪除屬性從而重新定義屬性,能否修改屬性的特性,或能否把屬性修改為訪問器屬性,默認(rèn)為false enumerable:表示能否通過for-in循環(huán)返回屬性,默認(rèn)為false Get:在讀取屬性時(shí)調(diào)用的函數(shù),默認(rèn)值為undefined Set:在寫入屬性時(shí)調(diào)用的函數(shù),默認(rèn)值為undefined2.定義:
訪問器屬性只能通過要通過Object.defineProperty()這個(gè)方法來定義export const defineObjAccess=()=>{ let personAccess={ _name:"張三",//_表示是內(nèi)部屬性,只能通過對象的方法修改 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中最核心的響應(yīng)式原理的核心就是通過defineProperty來劫持?jǐn)?shù)據(jù)的getters和setter屬性來改變數(shù)據(jù)的
3.4對象或?qū)ο髷?shù)組的深度拷貝原生方法一:
export const deepClone=function(origin,target){ var target = target || {}; //定義target for(var key in origin) { //遍歷原對象 if(origin.hasOwnProperty(key)) { if(Array.isArray(origin[key])) { //如果是數(shù)組 target[key] = []; deepClone(origin[key],target[key]) //遞歸 } else if (typeof origin[key] === "object" && origin[key] !== null) { target[key] = {}; deepClone(origin[key],target[key]) //遞歸 } target[key] = origin[key]; } } return target; }方法二:Object.assign
Object.assign(objOne,objTwo); //該方法是一個(gè)偽深度拷貝,如果改變對象里面的數(shù)組值還是會改變被拷貝的值方法三:JSON.stringify
3.5 找出字符中出現(xiàn)頻次最多的字符
let objNew=JSON.parse(JSON.stringify(obj)) ;
//可以實(shí)現(xiàn)深度拷貝export const findMaxStr=(str)=>>{ let o = {}; for (let char of str) { if (o[char]) { //char就是對象o的一個(gè)屬性,o[char]是屬性值,o[char]控制出現(xiàn)的次數(shù) o[char]++; //次數(shù)加1 } else { o[char] = 1; //若第一次出現(xiàn),次數(shù)記為1 } } console.log(o); //輸出的是完整的對象,記錄著每一個(gè)字符及其出現(xiàn)的次數(shù) //遍歷對象,找到出現(xiàn)次數(shù)最多的字符和次數(shù) let max = 0; let maxChar = null; for (let key in o) { if (max < o[key]) { max = o[key]; //max始終儲存次數(shù)最大的那個(gè) maxChar = key; //那么對應(yīng)的字符就是當(dāng)前的key } } console.log("最多的字符是" + maxChar); console.log("出現(xiàn)的次數(shù)是" + max); }3.6 連續(xù)的對象數(shù)組插入其他類型1.要求
一個(gè)對象數(shù)組objArr,類似[{type:"text",content:""},{type:"img",content:""},{type:"img",content:""},],
要求數(shù)據(jù)結(jié)構(gòu)是一個(gè)type為text和type為img的項(xiàng)交替出現(xiàn)2.算法思路:
定義一個(gè)新對象數(shù)組,比較最后一項(xiàng)的type是否和當(dāng)前項(xiàng)type相等,不等則push該項(xiàng)
如果相等就插入另一個(gè)類型export const alternateObj=(objChange)=>{ let objRule = []; objChange.map((item, index) => { //判斷是否有連續(xù)同類型數(shù)據(jù) if (!index) { objRule.push(item); } else { // console.log("objRule值為", objRule); // console.log("item值為", item); if (objRule[objRule.length - 1].type == item.type) { if (item.type == "IMG") { objRule.push({ type: "TEXT", content: "" }, item); } else { objRule.push({ type: "IMG", content: "" }, item); } } else { objRule.push(item); } } }); return objRule; }4.axios 4.1 axios的get方法export const getAjax= function (getUrl,getAjaxData) { return axios.get(getUrl, { params: { "getAjaxDataObj1": getAjaxData.obj1,//obj1為getAjaxData的一個(gè)屬性 "getAjaxDataObj2": getAjaxData.obj2 } }).then(data=>{ //成功返回 }).catch(err=>{ //錯(cuò)誤返回 }) }4.2 axios的post方法export const postAjax= function (getUrl,postAjaxData) { return axios.post(postUrl, { "postAjaxDataObj1": postAjaxData.obj1,//obj1為postAjaxData的一個(gè)屬性 "postAjaxDataObj2": postAjaxData.obj2 }).then(data=>{ //成功返回 }).catch(err=>{ //錯(cuò)誤返回 }) }4.3 axios的攔截器主要分為請求和響應(yīng)兩種攔截器,請求攔截一般就是配置對應(yīng)的請求頭信息(適用與常見請求方法,雖然ajax的get方法沒有請求頭,但是axios里面進(jìn)行啦封裝),響應(yīng)一般就是對reponse進(jìn)行攔截處理,如果返回結(jié)果為[]可以轉(zhuǎn)化為0
1.請求攔截:將當(dāng)前城市信息放入請求頭中
axios.interceptors.request.use(config => { config.headers.cityCode = window.sessionStorage.cityCode //jsCookie.get("cityCode") return config }),2.響應(yīng)攔截:處理reponse的結(jié)果
axios.interceptors.response.use((response) =>{ let data = response.data if(response.request.responseType === "arraybuffer"&&!data.length){ reponse.date=0 } })5.promisepromise是一種封裝未來值的易于復(fù)用的異步任務(wù)管理機(jī)制,主要解決地獄回調(diào)和控制異步的順序
5.1 應(yīng)用方法一export const promiseDemo=()=>{ new Promise((resolve,reject)=>{ resolve(()=>{ let a=1; return ++a; }).then((data)=>{ console.log(data)//data值為++a的值 }).catch(()=>{//錯(cuò)誤執(zhí)行這個(gè) }) }) }5.2 應(yīng)用方法二export const promiseDemo=()=>{ Promise.resolve([1,2,3]).then((data)=>{//直接初始化一個(gè)Promise并執(zhí)行resolve方法 console.log(data)//data值為[1,2,3] }) }6.文本框的判斷 6.1 全部為數(shù)字方法一(最簡單):
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; } }注:當(dāng)num1為[](空數(shù)組)、“”(空字符串)和null會在過程中轉(zhuǎn)換為數(shù)字類型的0,所以也會返回false,從而判斷為數(shù)字,所以可以將用typeof將以上特殊情況剔除.
方法三:正則
export const judgeNum1=(num1)=>{ let reg=/^[0-9]*$/ if(!reg.test(num1)){ console.log("num1是0-9") } }6.2 只能為數(shù)字或字母這個(gè)用正則判斷
6.3 只能為數(shù)字,字母和英文逗號
定義一個(gè)正則:let reg=/^[0-9a-zA-Z]*$/g因?yàn)榇嬖谳斎攵鄠€(gè)編號,以英文逗號分隔的情況
6.4 判斷輸入的位數(shù)不超過16位
定義一個(gè)正則:let reg=/^[0-9a-zA-Z,]*$/g直接利用字符串新加的length屬性來判斷
export const judgeNum1=(num1)=>{ if(num1.length>16){ console.log("num1超過16位") } }6.5 去掉字符左右空格export const trimLeOrRi=(str)=>{ //刪除左右兩端的空格
7. 檢測是瀏覽器還是客戶端
return str.replace(/(^s)|(s$)/g, "");
}其實(shí)本質(zhì)都是利用navigator對象的userAgent屬性
export const checkIosOrAndriod=(appMethod)=>{let ua_ios = window.navigator.userAgent.toLowerCase().match(/lan1.0_iOS/i), ua_android = window.navigator.userAgent.toLowerCase().match(/RRJC3.0_Android/i), isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //android終端或者uc瀏覽器 isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端 ios_browser= if(ua_ios || ua_android){ appMethod;//調(diào)用原生的方法 }else if(isAndroid){ return "安卓browser訪問" }else if(isIOS){ return "ios的browser訪問" } },8.數(shù)字的處理 8.1四舍五入取值export const getFloat=(molecular,denominator,n){//molecular是分子,denominator是分母,n是保留的小數(shù)位 let number=denominator==0?0:molecular/denominator; n = n ? parseInt(n) : 0; if (n <= 0) return Math.round(number); number = Math.round(number * Math.pow(10, n)) / Math.pow(10, n); return number; }9.客戶端類型 9.1 iPhoneX,iPhoneXSexport let checkIphoneX=(function judgeIphone(){ // iPhone X、iPhone XS let isIPhoneX = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 375 && window.screen.height === 812; // iPhone XS Max let isIPhoneXSMax = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 414 && window.screen.height === 896; // iPhone XR let isIPhoneXR = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 2 && window.screen.width === 414 && window.screen.height === 896; return isIPhoneX || isIPhoneXSMax || isIPhoneXR; })()9.2 IOS和Androidexport function checkAgent () { var u = navigator.userAgent, Agent = ""; var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //android終端或者uc瀏覽器 var isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端 if (isAndroid) { Agent = "Android"; } else if (isiOS) { Agent = "IOS"; } return Agent; }9.3 判斷是橫屏export function judgeHOrV() { if (window.orientation == 180 || window.orientation == 0) { return "landscape" } if (window.orientation == 90 || window.orientation == -90) { return "portraitScreen" } }10.路由相關(guān) 10.1 獲取?后指定 name 值export const getQueryString=(name)=> { let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i") let url = window.location.href let search = url.substring(url.lastIndexOf("?") + 1) let r = search.match(reg) if (r != null) return unescape(r[2]) return null }結(jié)束很開心你還能看到這里,這些類可能你現(xiàn)在用不到,但可以先收藏著.
大家可以一起交流,下次項(xiàng)目開發(fā)直接拿過去用,現(xiàn)在3月項(xiàng)目比較趕,這個(gè)真的可以提高開發(fā)效率哦!祝大家新年快樂噠.
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/51927.html
摘要:前言本文主要從日期數(shù)組對象和字符判斷這幾個(gè)方面講工作中常用的一些函數(shù)進(jìn)行了封裝確實(shí)可以在項(xiàng)目中直接引用提高開發(fā)效率日期日期在后臺管理系統(tǒng)還是用的很多的一般是作為數(shù)據(jù)存貯和管理的一個(gè)維度所以就會涉及到很多對日期的處理轉(zhuǎn)化為日期選擇器默認(rèn)獲 前言 本文主要從日期,數(shù)組,對象,axios,promise和字符判斷這幾個(gè)方面講工作中常用的一些函數(shù)進(jìn)行了封裝,確實(shí)可以在項(xiàng)目中直接引用,提高開發(fā)效...
摘要:也是一款優(yōu)秀的響應(yīng)式框架站點(diǎn)所使用的一套框架為微信服務(wù)量身設(shè)計(jì)的一套框架一組很小的,響應(yīng)式的組件,你可以在網(wǎng)頁的項(xiàng)目上到處使用一個(gè)可定制的文件,使瀏覽器呈現(xiàn)的所有元素,更一致和符合現(xiàn)代標(biāo)準(zhǔn)。 GitHub 值得收藏的前端項(xiàng)目 整理與收集的一些比較優(yōu)秀github項(xiàng)目,方便自己閱讀,順便分享出來,大家一起學(xué)習(xí),本篇文章會持續(xù)更新,版權(quán)歸原作者所有。歡迎github star與fork 預(yù)...
閱讀 848·2021-11-25 09:43
閱讀 3681·2021-11-19 09:40
閱讀 882·2021-09-29 09:34
閱讀 1784·2021-09-26 10:21
閱讀 870·2021-09-22 15:24
閱讀 4188·2021-09-22 15:08
閱讀 3266·2021-09-07 09:58
閱讀 2658·2019-08-30 15:55