249建站之家：前端简洁并实用的工具类函数封装

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

1.日期

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

1.1 element-UI的日期格式化

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

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

export

const

 dateReurn1=(date1)=>{

        date1.toLocaleString(

"en-US"

, { hour12: 

false

 }).replace(

/\b\d\b/

g, 

'0$&'

).replace(

new

RegExp

(

'/'

,

'gm'

),

'-'

)

    }

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

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

没有满10就补0.

export

default

const

 obtainDate=()=>{

let

 date = 

new

Date

();

let

 year = date.getFullYear();

let

 month = date.getMonth() + 

1

;

let

 day=date.getDate();

let

 hours=date.getHours();

let

 minu=date.getMinutes();

let

 second=date.getSeconds();

//判断是否满10

let

 arr=[month,day,hours,minu,second];

          arr.forEach(item=>{

            item< 

10

?

"0"

+item:item;

          })

          console.log(year+

'-'

+arr[

0

]+

'-'

+arr[

1

]+

' '

+arr[

2

]+

':'

+arr[

3

]+

':'

+arr[

4

])       

    }

2.数组

2.1 检测是否是数组

export

default

const

 judgeArr=(arr)=>{

if

(

Array

.isArray(arr)){

return

true

;

            }

        }

2.2数组去重set方法

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

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

3.set常见操作

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

4.set去重代码

export

const

 changeReArr=(arr)=>{

return

Array

.

from

(

new

Set

([

1

,

2

,

2

,

3

,

5

,

4

,

5

]))

//利用set将[1,2,2,3,5,4,5]转化成set数据,利用array from将set转化成数组类型

    }

或者

export

const

 changeReArr=(arr)=>{

return

 [...

new

Set

([

1

,

2

,

2

,

3

,

5

,

4

,

5

])]

//利用...扩展运算符将set中的值遍历出来重新定义一个数组,...是利用for...of遍历的

    }

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

2.3 纯数组排序

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

export

const

 orderArr=(arr)=>{

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

return

 a-b 

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

            })

        }

2.4 数组对象排序

export

const

 orderArr=(arr)=>{

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

let

 value1 = a[

property

];

let

 value2 = b[

property

];

return

 value1 - value2;

//sort方法接收一个函数作为参数，这里嵌套一层函数用

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

            })

        }      

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

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

情况一:全部满足

export

const

 allTrueArr=(arrs)=>{

return

 arr.every((arr)=>{

return

 arr>

20

;

//如果数组的每一项都满足则返回true,如果有一项不满足返回false,终止遍历

              })  

        }

情况二:有一个满足

export

default

const

OneTrueArr

=(arrs)=>{

return

 arr.some((arr)=>{

return

 arr>

20

;

//如果数组有一项满足则返回true,终止遍历,每一项都不满足则返回false

          })  

    }

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

3.对象

3.1 对象遍历

export

const

 traverseObj=(obj)=>{

for

(

let

 variable 

in

 obj){

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

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

if

(obj.hasOwnProperty(variable)){

                console.log(variable,obj[variable])

            }

            }

        }

3.2 对象的数据属性

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

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

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

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

writable：表示能否修改属性的值

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

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

export

const

 modifyObjAttr=()=>{

let

 person={name:

'张三'

,age:

30

};

Object

.defineProperty(person,

'name'

,{

        writable:

false

,

        value:

'李四'

,

        configurable:

false

,

//设置false就不能对该属性修改

        enumerable:

false

      })

    } 

3.3 对象的访问器属性

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

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

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

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

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

2.定义

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

export

const

 defineObjAccess=()=>{

let

 personAccess={

        _name:

'张三'

,

//_表示是内部属性,只能通过对象的方法修改

        editor:

1

      }

Object

.defineProperty(personAccess,

'name'

,{

get

:

function

(){

return

this

._name;

        },

set

:

function

(newName){

if

(newName!==

this

._name){

this

._name=newName;

this

.editor++;

          }

        }

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

      })

    }

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

4.axios

4.1 axios的get方法

export

const

 getAjax= 

function

 (getUrl,getAjaxData) {

return

 axios.

get

(getUrl, {

params

: {

'getAjaxDataObj1'

: getAjaxData.obj1,

//obj1为getAjaxData的一个属性

'getAjaxDataObj2'

: getAjaxData.obj2

        }

      })

}

4.2 axios的post方法

export

const

 postAjax= 

function

 (getUrl,postAjaxData) {

return

 axios.

get

(postUrl, {

'postAjaxDataObj1'

: postAjaxData.obj1,

//obj1为postAjaxData的一个属性

'postAjaxDataObj2'

: postAjaxData.obj2

      })

}

4.3 axios的拦截器

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

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

axios.interceptors.request.

use

(config => {

      config.headers.cityCode = window.sessionStorage.cityCode 

//jsCookie.get('cityCode')

return

 config

},

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

axios.interceptors.response.

use

((response) =>{

let

 data = response.data

if

(response.request.responseType === 

'arraybuffer'

&&!data.length){

        reponse.date=

0

      }

})

5.promise

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

5.1 应用方法一

export

const

 promiseDemo=()=>{

new

Promise

((resolve,reject)=>{

        resolve(()=>{

let

 a=

1

;

return

 ++a;

        }).

then

((data)=>{

            console.log(data)

//data值为++a的值

        }).

catch

(()=>{

//错误执行这个

        })

    })

}

5.2 应用方法二

export

const

 promiseDemo=()=>{

Promise

.resolve([

1

,

2

,

3

]).

then

((data)=>{

//直接初始化一个Promise并执行resolve方法

        console.log(data)

//data值为[1,2,3]

    })

}

6.文本框的判断

6.1 全部为数字

方法一(最简单)

export

default

const

 judgeNum1=(num1)=>{

if

(

typeof

 num1==number){

return

true

;

        }

else

{

return

false

;

        }

    }

方法二:isNaN

export

default

const

 judgeNum1=(num1)=>{

if

(!isNaN(num1)){

return

true

;

        }

else

{

return

false

;

        }

    }

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

方法三:正则

export

default

const

 judgeNum1=(num1)=>{

let

 reg=

/^[0-9]*$/

if

(!reg.test(num1)){

        console.log(

'num1是0-9'

)

      }

    }

6.2 只能为数字或字母

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

let

 reg=

/^[0-9a-zA-Z]*$/

g

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

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

let

 reg=

/^[0-9a-zA-Z,]*$/

g

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

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

export

default

const

 judgeNum1=(num1)=>{

if

(num1.length>

16

){

            console.log(

'num1超过16位'

)

         }

     }

结束

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