查看原文
其他

前端简洁并实用的工具类函数封装

前端大全 2022-06-29

(点击上方公众号,可快速关注)

作者:火狼

https://segmentfault.com/a/1190000013438501


前言

本文主要从日期,数组,对象,axios,promise和字符判断这几个方面讲工作中常用的一些函数进行了封装,确实可以在项目中直接引用,提高开发效率.

1.日期

日期在后台管理系统还是用的很多的,一般是作为数据存贮和管理的一个维度,所以就会涉及到很多对日期的处理.

1.1 element-UI的日期格式化

DatePicker日期选择器默认获取到的日期默认是Date对象,但是我们后台需要用到的是yyyy-MM-dd,所以需要我们进行转化.

方法一:转化为dd-MM-yyyy HH:mm:ss

  1.    export const dateReurn1=(date1)=>{

  2.        date1.toLocaleString("en-US", { hour12: false }).replace(/\b\d\b/g, '0$&').replace(new RegExp('/','gm'),'-')

  3.    }

方法二:从element-UI的2.x版本提供了value-format属性,可以直接设置选择器返回的值.

1.2 获取当前的时间yyyy-MM-dd HH:mm:ss

没有满10就补0.

  1.    export default const obtainDate=()=>{

  2.     let date = new Date();

  3.          let year = date.getFullYear();

  4.          let month = date.getMonth() + 1;

  5.          let day=date.getDate();

  6.          let hours=date.getHours();

  7.          let minu=date.getMinutes();

  8.          let second=date.getSeconds();

  9.          //判断是否满10

  10.          let arr=[month,day,hours,minu,second];

  11.          arr.forEach(item=>{

  12.            item< 10?"0"+item:item;

  13.          })

  14.          console.log(year+'-'+arr[0]+'-'+arr[1]+' '+arr[2]+':'+arr[3]+':'+arr[4])      

  15.    }

2.数组

2.1 检测是否是数组
  1.    export default const judgeArr=(arr)=>{

  2.            if(Array.isArray(arr)){

  3.                return true;

  4.            }

  5.        }

2.2数组去重set方法

1.常见利用循环和indexOf(ES5的数组方法,可以返回值在数组中第一次出现的位置)这里就不再详写,这里介绍一种利用ES6的set实现去重.

2.set是新怎数据结构,似于数组,但它的一大特性就是所有元素都是唯一的.

3.set常见操作

大家可以参照下面这个:新增数据结构Set的用法

4.set去重代码

  1.    export const changeReArr=(arr)=>{

  2.        return Array.from(new Set([1,2,2,3,5,4,5]))//利用set将[1,2,2,3,5,4,5]转化成set数据,利用array from将set转化成数组类型

  3.    }

或者

  1.    export const changeReArr=(arr)=>{

  2.        return [...new Set([1,2,2,3,5,4,5])]//利用...扩展运算符将set中的值遍历出来重新定义一个数组,...是利用for...of遍历的

  3.    }

Array.from可以把带有lenght属性类似数组的对象转换为数组,也可以把字符串等可以遍历的对象转换为数组,它接收2个参数,转换对象与回调函数,...和Array.from都是ES6的方法.

2.3 纯数组排序

常见有冒泡和选择,这里我写一下利用sort排序.

  1.     export const orderArr=(arr)=>{

  2.            arr.sort((a,b)=>{

  3.                return a-b //将arr升序排列,如果是倒序return -(a-b)

  4.            })

  5.        }

2.4 数组对象排序
  1.    export const orderArr=(arr)=>{

  2.            arr.sort((a,b)=>{

  3.                let value1 = a[property];

  4.                let value2 = b[property];

  5.                return value1 - value2;//sort方法接收一个函数作为参数,这里嵌套一层函数用

  6.                //来接收对象属性名,其他部分代码与正常使用sort方法相同

  7.            })

  8.        }      

  1.    

2.5 数组的"短路运算"every和some

数组短路运算这个名字是我自己加的,因为一般有这样一种需求,一个数组里面某个或者全部满足条件,就返回true.

情况一:全部满足

  1.        export const allTrueArr=(arrs)=>{

  2.              return arr.every((arr)=>{

  3.                 return arr>20;//如果数组的每一项都满足则返回true,如果有一项不满足返回false,终止遍历

  4.              })  

  5.        }

情况二:有一个满足

  1.    export default const OneTrueArr=(arrs)=>{

  2.          return arr.some((arr)=>{

  3.             return arr>20;//如果数组有一项满足则返回true,终止遍历,每一项都不满足则返回false

  4.          })  

  5.    }

以上两种情景就和||和&&的短路运算很相似,所以我就起了一个名字叫短路运算,当然两种情况都可以通过遍历去判断每一项然后用break和return false 结束循环和函数.

3.对象

3.1 对象遍历
  1.    export const traverseObj=(obj)=>{

  2.            for(let variable in obj){

  3.            //For…in遍历对象包括所有继承的属性,所以如果

  4.             //只是想使用对象本身的属性需要做一个判断

  5.            if(obj.hasOwnProperty(variable)){

  6.                console.log(variable,obj[variable])

  7.            }

  8.            }

  9.        }

  1.    

3.2 对象的数据属性

1.对象属性分类:数据属性和访问器属性;

2.数据属性:包含数据值的位置,可读写,包含四个特性包含四个特性:

  • configurable:表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或能否把属性修改为访问器属性,默认为true

  • enumerable:表示能否通过for-in循环返回属性

  • writable:表示能否修改属性的值

  • value:包含该属性的数据值。默认为undefined

3.修改数据属性的默认特性,利用Object.defineProperty()

  1.   export const modifyObjAttr=()=>{

  2.      let person={name:'张三',age:30};

  3.      Object.defineProperty(person,'name',{

  4.        writable:false,

  5.        value:'李四',

  6.        configurable:false,//设置false就不能对该属性修改

  7.        enumerable:false

  8.      })

  9.    }

3.3 对象的访问器属性

1.访问器属性的四个特性

  • configurable:表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或能否把属性修改为访问器属性,默认为false

  • enumerable:表示能否通过for-in循环返回属性,默认为false

  • Get:在读取属性时调用的函数,默认值为undefined

  • Set:在写入属性时调用的函数,默认值为undefined

2.定义

访问器属性只能通过要通过Object.defineProperty()这个方法来定义

  1.  export const defineObjAccess=()=>{

  2.    let personAccess={

  3.        _name:'张三',//_表示是内部属性,只能通过对象的方法修改

  4.        editor:1

  5.      }

  6.      Object.defineProperty(personAccess,'name',{

  7.        get:function(){

  8.          return this._name;

  9.        },

  10.        set:function(newName){

  11.          if(newName!==this._name){

  12.            this._name=newName;

  13.            this.editor++;

  14.          }

  15.        }

  16.        //如果只定义了get方法则改对象只能读

  17.      })

  18.    }

  1.  

vue中最核心的响应式原理的核心就是通过defineProperty来劫持数据的getters和setter属性来改变数据的

4.axios

4.1 axios的get方法
  1. export const getAjax= function (getUrl,getAjaxData) {

  2.      return axios.get(getUrl, {

  3.        params: {

  4.          'getAjaxDataObj1': getAjaxData.obj1,//obj1为getAjaxData的一个属性

  5.          'getAjaxDataObj2': getAjaxData.obj2

  6.        }

  7.      })

  8. }

4.2 axios的post方法
  1. export const postAjax= function (getUrl,postAjaxData) {

  2.      return axios.get(postUrl, {

  3.          'postAjaxDataObj1': postAjaxData.obj1,//obj1为postAjaxData的一个属性

  4.          'postAjaxDataObj2': postAjaxData.obj2

  5.      })

  6. }

4.3 axios的拦截器

主要分为请求和响应两种拦截器,请求拦截一般就是配置对应的请求头信息(适用与常见请求方法,虽然ajax的get方法没有请求头,但是axios里面进行啦封装),响应一般就是对reponse进行拦截处理,如果返回结果为[]可以转化为0.

1.请求拦截:将当前城市信息放入请求头中

  1. axios.interceptors.request.use(config => {

  2.      config.headers.cityCode = window.sessionStorage.cityCode //jsCookie.get('cityCode')

  3.      return config

  4. },

2.响应拦截:处理reponse的结果

  1. axios.interceptors.response.use((response) =>{

  2.      let data = response.data

  3.      if(response.request.responseType === 'arraybuffer'&&!data.length){

  4.        reponse.date=0

  5.      }

  6. })

5.promise

promise是一种封装未来值的易于复用的异步任务管理机制,主要解决地狱回调和控制异步的顺序.

5.1 应用方法一
  1. export const promiseDemo=()=>{

  2.    new Promise((resolve,reject)=>{

  3.        resolve(()=>{

  4.            let a=1;

  5.            return ++a;

  6.        }).then((data)=>{

  7.            console.log(data)//data值为++a的值

  8.        }).catch(()=>{//错误执行这个

  9.        })

  10.    })

  11. }

5.2 应用方法二
  1. export const promiseDemo=()=>{

  2.    Promise.resolve([1,2,3]).then((data)=>{//直接初始化一个Promise并执行resolve方法

  3.        console.log(data)//data值为[1,2,3]

  4.    })

  5. }

6.文本框的判断

6.1 全部为数字

方法一(最简单)

  1.    export default const judgeNum1=(num1)=>{

  2.        if(typeof num1==number){

  3.            return true;

  4.        }else{

  5.            return false;

  6.        }

  7.    }

方法二:isNaN

  1.    export default const judgeNum1=(num1)=>{

  2.        if(!isNaN(num1)){

  3.            return true;

  4.        }else{

  5.            return false;

  6.        }

  7.    }

注:当num1为[](空数组)、“”(空字符串)和null会在过程中转换为数字类型的0,所以也会返回false,从而判断为数字,所以可以将用typeof将以上特殊情况剔除.

方法三:正则

  1.    export default const judgeNum1=(num1)=>{

  2.      let reg=/^[0-9]*$/

  3.      if(!reg.test(num1)){

  4.        console.log('num1是0-9')

  5.      }

  6.    }

6.2 只能为数字或字母

这个用正则判断.定义一个正则:

  1. let reg=/^[0-9a-zA-Z]*$/g

6.3 只能为数字,字母和英文逗号

因为存在输入多个编号,以英文逗号分隔的情况,定义一个正则:

  1. let reg=/^[0-9a-zA-Z,]*$/g

6.4 判断输入的位数不超过16位

直接利用字符串新加的length属性来判断

  1.    export default const judgeNum1=(num1)=>{

  2.          if(num1.length>16){

  3.            console.log('num1超过16位')

  4.         }

  5.     }

结束

很开心你还能看到这里,这些类可能你现在用不到,但可以先收藏着.

大家可以一起交流,下次项目开发直接拿过去用,现在3月项目比较赶,这个真的可以提高开发效率哦!祝大家新年快乐哒.


觉得本文对你有帮助?请分享给更多人

关注「前端大全」,提升前端技能

淘口令复制以下红色内容,再打开手淘即可购买

范品社,使用¥极客T恤¥抢先预览(长按复制整段文案,打开手机淘宝即可进入活动内容)

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存