前端常用的 59 个工具类「终于解决」

前端常用的 59 个工具类「终于解决」前端开发有时会处理一部分后台返回的数据,或者根据数据判断做一些处理。这个时候就非常有必要将一些常用的工具类封装起来,今天老男孩老师就为大家分享工

欢迎大家来到IT世界,在知识的湖畔探索吧!

前端开发有时会处理一部分后台返回的数据,或者根据数据判断做一些处理。这个时候就非常有必要将一些常用的工具类封装起来,今天老男孩老师就为大家分享工具类封装的59 个方法,当然还有很多用的较少前期没有录入,后期持续跟新。感兴趣的小伙伴们别忘了关注!

前端常用的 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)))
}
复制代码

欢迎大家来到IT世界,在知识的湖畔探索吧!

2.arrIntersection

交集

欢迎大家来到IT世界,在知识的湖畔探索吧!/**
 * 数组交集,只支持一维数组
 * @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

两个数组合并成一个数组对象

欢迎大家来到IT世界,在知识的湖畔探索吧!/**
 * 两个数组合并成一个对象数组,考虑到复杂度,所以目前支持两个一维数组
 * @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
}

刚兴趣的朋友也可私信老男孩老师,领取~

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/17673.html

(0)

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

联系我们YX

mu99908888

在线咨询: 微信交谈

邮件:itzsgw@126.com

工作时间:时刻准备着!

关注微信