摘要：前言本文主要從日期數組對象和字符判斷這幾個方面講工作中常用的一些函數進行了封裝確實可以在項目中直接引用提高開發效率日期日期在后臺管理系統還是用的很多的一般是作為數據存貯和管理的一個維度所以就會涉及到很多對日期的處理轉化為日期選擇器默認獲

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

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

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(/d/g, "0$&").replace(new RegExp("/","gm"),"-")
}

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

也就是轉化為日期控件可以接受的類型

export const forMatToDate=(date)=>{
       let dateArr=date.split(":");
  return new Date(2017,10,19,dateArr[0],dateArr[1],dateArr[2]);
    }

有個坑,日期中初始化默認比實際設置的值大一

沒有滿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]      
}

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"),"-")
})   

如果單個比較會比較復雜,這里直接處理成Number比較

方法一:利用正則轉化成 Number

export default const compareTwo=(dateOne,dateTwo)=>{
    return Number(dateOne.replace(/-/g,""))
方法二:轉化成 Date 對象
export default const compareTwo=(dateOne,dateTwo)=>{
    return new Date(dateOne)
方法三:轉化成時間戳
export default const compareTwo=(dateOne,dateTwo)=>{
    return new Date(dateOne).getTime()
方法三:直接比較
export default const compareTwo=(dateOne,dateTwo)=>{
    return dateOne "2007-2-2 6:30" //true
"2007-02-02 7:30" > "2007-2-2 6:30" //false
所以直接比較不準確不建議使用
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:是需要創建的時間和 GMT時間1970年1月1日之間相差的毫秒數；當前時間與GMT1970.1.1之間的毫秒數：var mills = new Date().getTime();
注意:mth:用整數表示月份，從0（1月）到11（12月）
1.8 獲取某年的某月的天數
export default const monthDay=(year,month)=>{
    return new Date(year, month, 0).getDate()
}
1.9 生成標識id
格式為時間戳的后8位加4位隨機數
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.數組
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 數組中的最大值
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 結束循環和函數.
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
 }

2.8將多維數組轉化為一維的類
Array.prototype.flat = function() {
    var arr = [];
    this.forEach((item,idx) => {
        if(Array.isArray(item)) {
            arr = arr.concat(item.flat()); //遞歸去處理數組元素
        } else {
            arr.push(item)   //非數組直接push進去
        }
    })
    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遍歷對象包括所有繼承的屬性,所以如果
         //只是想使用對象本身的屬性需要做一個判斷
        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屬性來改變數據的
3.4對象或對象數組的深度拷貝
原生方法一：
export const deepClone=function(origin,target){
    var target = target || {}; //定義target
    for(var key in origin) {  //遍歷原對象
        if(origin.hasOwnProperty(key)) {
            if(Array.isArray(origin[key])) { //如果是數組
                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);
//該方法是一個偽深度拷貝，如果改變對象里面的數組值還是會改變被拷貝的值

方法三：JSON.stringify
 let objNew=JSON.parse(JSON.stringify(obj)) ;
  //可以實現深度拷貝
3.5 找出字符中出現頻次最多的字符
export const findMaxStr=(str)=>>{
    let o = {};
    for (let char of str) {
      if (o[char]) { //char就是對象o的一個屬性，o[char]是屬性值，o[char]控制出現的次數
        o[char]++; //次數加1
      } else {
        o[char] = 1; //若第一次出現，次數記為1
      }
    }
    console.log(o); //輸出的是完整的對象，記錄著每一個字符及其出現的次數
    //遍歷對象，找到出現次數最多的字符和次數
    let max = 0;
    let maxChar = null;
    for (let key in o) {
      if (max < o[key]) {
        max = o[key]; //max始終儲存次數最大的那個
        maxChar = key; //那么對應的字符就是當前的key
      }
    }
    console.log("最多的字符是" + maxChar);
    console.log("出現的次數是" + max);
}

3.6 連續的對象數組插入其他類型
1.要求
一個對象數組objArr,類似[{type:"text",content:""},{type:"img",content:""},{type:"img",content:""},],
要求數據結構是一個type為text和type為img的項交替出現
2.算法思路:
定義一個新對象數組,比較最后一項的type是否和當前項type相等,不等則push該項
如果相等就插入另一個類型
export const alternateObj=(objChange)=>{
    let objRule = [];
    objChange.map((item, index) => {
      //判斷是否有連續同類型數據
      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的一個屬性
      "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(()=>{//錯誤執行這個

    })
})
}

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 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, "");
}
7. 檢測是瀏覽器還是客戶端
其實本質都是利用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;//調用原生的方法
  }else if(isAndroid){      
    return "安卓browser訪問"
  }else if(isIOS){      
    return "ios的browser訪問"
  }
},

8.數字的處理
8.1四舍五入取值
export const getFloat=(molecular,denominator,n){//molecular是分子，denominator是分母，n是保留的小數位
   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,iPhoneXS
export 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和Android
export 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.路由相關
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
}
結束
很開心你還能看到這里,這些類可能你現在用不到,但可以先收藏著.
大家可以一起交流,下次項目開發直接拿過去用,現在3月項目比較趕,這個真的可以提高開發效率哦!祝大家新年快樂噠.