前端常用的 59 个工具类(已封装，推荐收藏)

前端开发有时会处理一部分后台返回的数据,或者根据数据判断做一些处理;

这个时候就非常有必要将一些常用的工具类封装起来;

本文根据常用的一些工具类封装了 59 个方法,当然还有很多用的较少前期没有录入,后期持续跟新;

源码地址：

https://github.com/lanzhsh/react-vue-koa/tree/master/utils-lan

欢迎 star!

使 用

方法一

npm i -S utils-lan  
import utils from 'utils-lan'  
console.log(utils.arrJudge(['1','2']))

方法二，git clone utils-lan 源码地址下来导入项目;

（https://github.com/lanzhsh/react-vue-koa/tree/master/utils-lan）

关于类名

是根据字面量来命名的,方法首个驼峰表示所属类型,后面是方法作用;

如 arrAndSet 一看就是数组的方法,是处理交集的;

如果实在难以忍受,可以采用方法 2,导入本地对项目进行更改.

arr

arrAndSet

并集

/**
 * 数组并集,只支持一维数组
 * @param {Array} arrOne
 * @param {Array} arrTwo
 */
export const arrAndSet = (arrOne, arrTwo) => {
   
  return arrOne.concat(arrTwo.filter(v => !arrOne.includes(v)))
}

arrIntersection

交集

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

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

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] }))
  }
}

arrObjSum

数组对象求和

/**
 * 数组对象求和
 * @param {Object} arrObj 数组对象
 * @param {String} key 数组对应的 key 值
 */
export const arrObjSum = (obj, key) => {
   
  return obj.reduce((prev, cur) => prev + cur.key, 0)
}

arrConcat

数组合并

/**
 * 数组合并,目前合并一维
 * @param {Array} arrOne 数组
 * @param {Array} arrTwo 数组
 */
export const arrConcat = (arrOne, arrTwo) => {
   
  return [...arrOne, ...arrTwo]
}

arrSum

数组求和

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

arrIncludeValue

数组是否包含某值

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

arrMax

数组最大值

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

arrRemoveRepeat

数组去重

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

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

arrJudge

判断是否是数组

/**
 * 判断是否是数组
 * @param {Array}} arr 数组
 */
export const arrJudge = arr => Array.isArray(arr)

check

checkNum

判断是否是数字

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

checkLetter

判断是否是字母

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

checkLowercaseLetter

判断是否全部是小写字母

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

checkCapitalLetter

判断是否是大写字母

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

checkNumOrLetter

判断是否是字母或数字

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

判断是否是字母和数字的组合

/**
 * 判断是否是字母或数字
 * @param {Number || String} data  字符或数字
 */
export const checkNumAndLetter = data => /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,15}$/g.test(data)

checkChinese

判断是否是中文

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

checkChineseNumberLettter

判断是否是中文，数字或字母

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

checkEmail

判断是否是邮箱地址

/**
 * 判断是否是邮箱地址
 * @param {String} data
 */
export const checkEmail = data => {
   
  const reg =