前端開發有時會處理一部分後臺返回的數據，或者根據數據判斷做一些處理。這個時候就非常有必要將一些常用的工具類封裝起來，今天老男孩老師就為大家分享工具類封裝的59 個方法，當然還有很多用的較少前期沒有錄入，後期持續跟新。感興趣的小夥伴們別忘了關注！
使用
1.方法一
npm i -S utils-lan
import utils from 'utils-lan'
console.log(utils.arrJudge(['1','2']))
3.關於類名
是根據字面量來命名的,方法首個駝峰表示所屬類型,後面是方法作用;
如 arrAndSet 一看就是數組的方法,是處理交集的;
如果實在難以忍受,可以採用方法 2,導入本地對項目進行更改.
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] }))
}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 arrObj.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 => {
if (Array.isArray(arr)) {
return true
}
}
複製代碼
check
13.checkNum
判斷是否是數字
/**
* 判斷是否是數字
* @param {Number} data
*/
export const checkNum = data => {
const reg = /^\\d{1,}$/g
if (reg.test(data)) return true
}
複製代碼
14.checkLetter
判斷是否是字母
/**
* 判斷是否是字母
* @param {Number} data
*/
export const checkLetter = data => {
const reg = /^[a-zA-Z]+$/g
if (reg.test(data)) return true
}
複製代碼
15.checkLowercaseLetter
判斷是否全部是小寫字母
/**
* 判斷是否全部是小寫字母
* @param {Number} data
*/
export const checkLowercaseLetter = data => {
const reg = /^[a-z]+$/g
if (reg.test(data)) return true
}
複製代碼
16.checkCapitalLetter
判斷是否是大寫字母
/**
* 判斷是否是大寫字母
* @param {Number} data
*/
export const checkCapitalLetter = data => {
const reg = /^[A-Z]+$/g
if (reg.test(data)) return true
}
複製代碼
17.checkNumOrLetter
判斷是否是字母或數字
/**
* 判斷是否是字母或數字
* @param {Number || String} data 字符或數字
*/
export const checkNumOrLetter = data => {
const reg = /^[0-9a-zA-Z]*$/g
if (reg.test(data)) return true
}
複製代碼
18.checkChinese
判斷是否是中文
/**
* 判斷是否是中文
* @param {String} data 中文
*/
export const checkChinese = data => {
const reg = /^[\\\\u4E00-\\\\u9FA5]+$/g
if (reg.test(data)) return true
}
複製代碼
19.checkChineseNumberLettter
判斷是否是中文，數字或字母
export const checkChineseNumberLettter = data => {
const reg = /^[a-zA-Z0-9\\\\u4e00-\\\\u9fa5]+$/g
if (reg.test(data)) return true
}
複製代碼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
}
剛興趣的朋友也可私信老男孩老師，領取~
分享到:
閱讀更多 老男孩IT教育 的文章
