文章插图
前言前端开发有时会处理一部分后台返回的数据,或者根据数据判断做一些处理; 这个时候就非常有必要将一些常用的工具类封装起来; 本文根据常用的一些工具类封装了 59 个方法,当然还有很多用的较少前期没有录入,后期持续跟新; 源码地址,utils-lan 源码地址:https://github.com/lanzhsh/react-vue-koa/tree/master/utils-lan,欢迎 star!
使用1.方法一
npm i -S utils-lanimport utils from 'utils-lan'console.log(utils.arrJudge(['1','2']))复制代码
2.方法二 git clone utils-lan 源码地址:https://github.com/lanzhsh/react-vue-koa/tree/master/utils-lan 下来导入项目;3.关于类名 是根据字面量来命名的,方法首个驼峰表示所属类型,后面是方法作用; 如 arrAndSet 一看就是数组的方法,是处理交集的; 如果实在难以忍受,可以采用方法 2,导入本地对项目进行更改.
arr1.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 = https://www.isolves.com/it/cxkf/yy/js/2020-05-11/(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判断是否是数组【手把手教你常用的59个JS类方法】
/** * 判断是否是数组 * @param {Array}} arr 数组 */export const arrJudge = arr => Array.isArray(arr)复制代码
check13.checkNum判断是否是数字/** *判断是否是数字 * @param {Number} data */export const checkNum = data =https://www.isolves.com/it/cxkf/yy/js/2020-05-11/> /^d{1,}$/g.test(data)复制代码
14.checkLetter判断是否是字母/** *判断是否是字母 * @param {Number} data */export const checkLetter = data =https://www.isolves.com/it/cxkf/yy/js/2020-05-11/> /^[a-zA-Z]+$/g.test(data)复制代码
推荐阅读
- 邻居家老蹭网,教你一招摆脱蹭网
- 中老年人怎样瘦肚子和腰?教你4个方法,消除腹部脂肪拥有好身材
- 教你如何识别我军3等10级的军官军衔,记住这3个要素就行了
- 花草茶常用有哪些,常用的花草茶有哪些
- 苦荞茶和黑苦荞哪个好,四大步骤教你如何简易而快速的冲泡百合花茶
- 膝盖疼就是关节炎吗?积水潭医生教你分辨
- 领导出现这几种行为,是逼员工主动离职,教你高情商反击
- 坚持长期喝茶有什么好处,教你九个喝茶的技巧
- 招聘|实用干货!20条HR常用的招聘问题!
- 怎样练习太极拳转腰跨 教你练习的小技巧