前端简洁并实用的工具类

前言

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

1.日期

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

1.1 element-UI的日期格式化

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

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

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

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

没有满10就补0

1.3 比较yyyy-MM-dd时间大小

如果单个比较会比较复杂,这里直接处理成Number比较

2.数组

2.1 检测是否是数组

2.2数组去重set方法

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

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

3.set常见操作 大家可以参照下面这个:新增数据结构Set的用法

4.set去重代码

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

2.3 纯数组排序

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

2.4 数组对象排序

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

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

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

3.对象

3.1 对象遍历

3.2 对象的数据属性

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

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

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

3.3 对象的访问器属性

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

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

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

4.axios

4.1 axios的get方法

4.2 axios的post方法

4.3 axios的拦截器

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

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

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

5.promise

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

5.1 应用方法一

5.2 应用方法二

6.文本框的判断

6.1 全部为数字

方法一(最简单):

方法二:isNaN

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

方法三:正则

6.2 只能为数字或字母

这个用正则判断 定义一个正则:let reg=/^[0-9a-zA-Z]*$/g

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

因为存在输入多个编号,以英文逗号分隔的情况 定义一个正则:let reg=/^[0-9a-zA-Z,]*$/g

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

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

6.5 去掉字符左右空格

export const trimLeOrRi=trimLeftOrRight(str){ //删除左右两端的空格
　　 return str.replace(/(^s)|(s$)/g, "");
　　 }, 
}

结束

很开心你还能看到这里,这些类可能你现在用不到,但可以先收藏着。这个真的可以提高开发效率哦！

原文作者：火狼

原文链接：https://segmentfault.com/a/1190000013438501