初級前端看了撓頭，高級工程師笑笑不說話，你會寫多少？

前端開發有時會處理一部分後臺返回的數據，或者根據數據判斷做一些處理。

這個時候就非常有必要將一些常用的工具類封裝起來。

本文根據常用的一些工具類封裝了 59 個方法,當然還有很多用的較少前期沒有錄入，後面會繼續補充。

arr

1.arrAndSet：並集

/**
 * 數組並集,只支持一維數組
 * @param {Array} arrOne
 * @param {Array} arrTwo
 */
export const arrAndSet = (arrOne, arrTwo) => {
  return arrOne.concat(arrTwo.filter(v => !arrOne.includes(v)))
}

2.arrIntersection：交集

/**
 * 數組交集,只支持一維數組
 * @param {Array} arrOne
 * @param {Array} arrTwo
 */
export const arrIntersection = (arrOne, arrTwo) => {
  return arrOne.filter(v => arrTwo.includes(v))
}

3.arrDifference：差集

/**
 * 數組差集,只支持一維數組
 * @param {Array} arrOne
 * @param {Array} arrTwo
 * eg: [1, 2, 3] [2, 4, 5] 差集爲[1,3,4,5]
 */
export const arrDifference = (arrOne, arrTwo) => {
  return arrOne.concat(arrTwo).filter(v => !arrOne.includes(v) || !arrTwo.includes(v))
}

4.arrTwoToArrObj:兩個數組合併成一個數組對象

/**
 * 兩個數組合併成一個對象數組,考慮到複雜度,所以目前支持兩個一維數組
 * @param {Array} arrOne
 * @param {Array} arrTwo
 * @param {oneKey} oneKey 選填,如果兩個都未傳,直接以 arrOne 的值作爲 key,arrTwo 作爲 value
 * @param {twoKey} twoKey
 */
export const arrTwoToArrObj = (arrOne, arrTwo, oneKey, twoKey) => {
  if(!oneKey&&!twoKey){
    return arrOne.map((oneKey, i) => ({ [oneKey]:arrTwo[i] }))
    // 或者,此方法針對將 arrTwo 的索引作爲 key 的情況,arrTwo 值會覆蓋 arrOne
   // return Object.assign({}, arrOne, arrTwo)
  }else{
    return arrOne.map((oneKey, i) => ({ oneKey, twoKey: arrTwo[i] }))
  }
}

5.arrObjSum：數組對象求和

/**
 * 數組對象求和
 * @param {Object} arrObj 數組對象
 * @param {String} key 數組對應的 key 值
 */
export const arrObjSum = (obj, key) => {
  return obj.reduce((prev, cur) => prev + cur.key, 0)
}

6.arrConcat：數組合並

/**
 * 數組合並,目前合併一維
 * @param {Array} arrOne 數組
 * @param {Array} arrTwo 數組
 */
export const arrConcat = (arrOne, arrTwo) => {
  return [...arrOne, ...arrTwo]
}

7.arrSum：數組求和

/**
 * 數組求和
 * @param {Array} arr 數組
 */
export const arrSum = arr => {
  return arr.reduce((prev, cur)=> {
    return prev + cur
  }, 0)
}

8.arrIncludeValue：數組是否包含某值

/**
 * 數組是否包含某值
 * @param {Array} arr 數組
 * @param {}  value 值,目前只支持 String,Number,Boolean
 */
export const arrIncludeValue = (arr,  value) => {
  return arr.includes( value)
}

9.arrMax：數組最大值

/**
 * 數組最大值
 * @param {Array} arr  數組
 */
export const arrMax = arr => {
  return Math.max(...arr)
}

10.arrRemoveRepeat：數組去重

/**
 * 數組去重
 * @param {Array} arr  數組
 */
export const arrRemoveRepeat = arr => {
  return Array.from(new Set(arr))
}

11.arrOrderAscend：數組排序

/**
 * 數組排序
 * @param {Array} arr  數組
 * @param {Boolean} ascendFlag   升序,默認爲 true
 */
export const arrOrderAscend = (arr, ascendFlag=true) => {
  return arr.sort((a, b) => {
    return ascendFlag ? a - b : b - a
  })
}

12.arrJudge：判斷是否是數組

/**
 * 判斷是否是數組
 * @param {Array}} arr 數組
 */
export const arrJudge = arr => Array.isArray(arr)

check

13.checkNum：判斷是否是數字

/**
 *  判斷是否是數字
 * @param {Number} data
 */
export const checkNum = data => /^\d{1,}$/g.test(data)

14.checkLetter：判斷是否是字母

/**
 *  判斷是否是字母
 * @param {Number} data
 */
export const checkLetter = data => /^[a-zA-Z]+$/g.test(data)

15.checkLowercaseLetter：判斷是否全部是小寫字母

/**
 *  判斷是否全部是小寫字母
 * @param {Number} data
 */
export const checkLowercaseLetter = data => /^[a-z]+$/g.test(data)

16.checkCapitalLetter：判斷是否是大寫字母

/**
 *  判斷是否是大寫字母
 * @param {Number} data
 */
export const checkCapitalLetter = data => /^[A-Z]+$/g.test(data)

17.checkNumOrLetter：判斷是否是字母或數字

/**
 * 判斷是否是字母或數字
 * @param {Number || String} data  字符或數字
 */
export const checkNumOrLetter = data => /^[0-9a-zA-Z]*$/g.test(data)

18.checkChinese：判斷是否是中文

/**
 * 判斷是否是中文
 * @param {String} data  中文
 */
export const checkChinese = data => /^[\u4E00-\u9FA5]+$/g.test(data)

19.checkChineseNumberLettter：判斷是否是中文，數字或字母

export const checkChineseNumberLettter = data => /^[a-zA-Z0-9\u4e00-\u9fa5]+$/g.test(data)

20.checkEmail：判斷是否是郵箱地址

/**
 * 判斷是否是郵箱地址
 * @param {String} data
 */
export const checkEmail = data => {
  const reg = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/g
  if (reg.test(data)) return true
}

21.checkTelphone：判斷是否是手機號

/**
 * 判斷是否是手機號，只要是13,14,15,16,17,18,19開頭即可
 * @param {String} data
 */
export const checkTelphone = data => {
  const reg = /^((\+|00)86)?1[3-9]\d{9}$/g
  if (reg.test(data)) return true
}

22.checkUrl：判斷是否是正確的網址

/**
 * 判斷是否是正確的網址
 * @param {String} url 網址
 */
export const checkUrl = url => {
  const a = document.createElement('a')
  a.href = url
  return [
    /^(http|https):$/.test(a.protocol),
    a.host,
    a.pathname !== url,
    a.pathname !== `/${url}`
  ].find(x => !x) === undefined
}