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位'
)
}
}
结束
很开心你还能看到这里,这些类可能你现在用不到,但可以先收藏着.
推荐
-
-
QQ空间
-
新浪微博
-
人人网
-
豆瓣
