前端簡潔並實用的工具類

時間 2019-11-24

標籤前端簡潔實用工具简体版

原文原文鏈接

前言

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

1.日期

日期在後臺管理系統仍是用的不少的,通常是做爲數據存貯和管理的一個維度,因此就會涉及到不少對日期的處理ios

1.1 new Date轉化爲yyyy-MM-dd HH:mm:ss

DatePicker日期選擇器默認獲取到的日期默認是Date對象,可是咱們後臺須要用到的是yyyy-MM-dd,因此須要咱們進行轉化ajax

方法一:將Fri Mar 23 2018 12:19:48 GMT+0800 (國際時間)轉化爲dd-MM-yyyy HH:mm:ssaxios

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()

也就是轉化爲日期控件能夠接受的類型直接初始化promise

export const forMatToDate=(date)=>
  return new Date('2018-04-16 19:43:00');
    }
複製代碼

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

沒有滿10就補0session

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對象可接受的參數

一、new Date("month dd,yyyy hh:mm:ss"); 
二、new Date("month dd,yyyy"); 
三、new Date(yyyy,mth,dd,hh,mm,ss); 注意：這種方式下，必須傳遞整型；
四、new Date(yyyy,mth,dd); 
五、new Date(ms); 注意：ms:是須要建立的時間和
6.new Date(yyyy-MM-dd hh:mm:ss)
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.常見利用循環和indexOf(ES5的數組方法,能夠返回值在數組中第一次出現的位置)這裏就再也不詳寫,這裏介紹一種利用ES6的set實現去重.app

2.set是新怎數據結構,似於數組，但它的一大特性就是全部元素都是惟一的.異步

3.set常見操做你們能夠參照下面這個:[新增數據結構Set的用法][3]

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
 }
複製代碼

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

結束

很開心你還能看到這裏,這些類可能你如今用不到,但能夠先收藏着. 你們能夠一塊兒交流,下次項目開發直接拿過去用,如今3月項目比較趕,這個真的能夠提升開發效率哦!祝你們新年快樂噠.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。