前端开发有时会处理一部分后台返回的数据,或者根据数据判断做一些处理。
这个时候就非常有必要将一些常用的工具类封装起来。
本文根据常用的一些工具类封装了 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
}