前端简洁并实用的工具类 (推荐收藏)

作者: 一个敲代码的前端妹子 | 来源:发表于2018-05-22 09:16 被阅读0次

前言

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

1.日期

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

1.1 element-UI的日期格式化

image

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'),'-')
}

</pre>

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

image

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])
}

</pre>

2.数组

2.1 检测是否是数组

export default const judgeArr=(arr)=>{
if(Array.isArray(arr)){
return true;
}
}

</pre>

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遍历的
}

</pre>

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)
})
}

</pre>

2.4 数组对象排序

export const orderArr=(arr)=>{
arr.sort((a,b)=>{
let value1 = a[property];
let value2 = b[property];
return value1 - value2;//sort方法接收一个函数作为参数，这里嵌套一层函数用
//来接收对象属性名，其他部分代码与正常使用sort方法相同
})
}

</pre>

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

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

情况一:全部满足
export const allTrueArr=(arrs)=>{
arr.every((arr)=>{
return arr>20;//如果数组的没一项都满足则返回true,如果有一项不满足返回false,终止遍历
})
}
情况二:有一个满足
export default const OneTrueArr=(arrs)=>{
arr.some((arr)=>{
return arr>20;//如果数组的没一项都满足则返回false,如果有一项不满足返回true,终止遍历
})
}

</pre>

以上两种情景就和||和&&的短路运算很相似,所以我就起了一个名字叫短路运算,当然两种情况都可以通过遍历去判断每一项然后用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])
}
}
}

</pre>

3.2 对象的数据属性

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

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

configurable：表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或能否把属性修改为访问器属性，默认为true
enumerable:表示能否通过for-in循环返回属性
writable：表示能否修改属性的值
value：包含该属性的数据值。默认为undefined

</pre>

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

export const modifyObjAttr=()=>{
let person={name:'张三',age:30};
Object.defineProperty(person,'name',{
writable:false,
value:'李四',
configurable:false,//设置false就不能对该属性修改
enumerable:false
})
}

</pre>

3.3 对象的访问器属性

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

configurable：表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或能否把属性修改为访问器属性，默认为false
enumerable:表示能否通过for-in循环返回属性,默认为false
Get：在读取属性时调用的函数,默认值为undefined
Set：在写入属性时调用的函数,默认值为undefined

</pre>

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方法则改对象只能读
})
}

</pre>

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
}
})
}

</pre>

4.2 axios的post方法

export const postAjax= function (getUrl,postAjaxData) {
return axios.get(postUrl, {
'postAjaxDataObj1': postAjaxData.obj1,//obj1为postAjaxData的一个属性
'postAjaxDataObj2': postAjaxData.obj2
})
}

</pre>

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
},

</pre>

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

axios.interceptors.response.use((response) =>{
let data = response.data
if(response.request.responseType === 'arraybuffer'&&!data.length){
reponse.date=0
}
})

</pre>

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(()=>{//错误执行这个
})
})
}

</pre>

5.2 应用方法二

export const promiseDemo=()=>{
Promise.resolve([1,2,3]).then((data)=>{//直接初始化一个Promise并执行resolve方法
console.log(data)//data值为[1,2,3]
})
}

</pre>

6.文本框的判断

6.1 全部为数字

方法一(最简单):

export default const judgeNum1=(num1)=>{
if(typeof num1==number){
return true;
}else{
return false;
}
}

</pre>

方法二:isNaN

export default const judgeNum1=(num1)=>{
if(!isNaN(num1)){
return true;
}else{
return false;
}
}

</pre>

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

方法三:正则

export default const judgeNum1=(num1)=>{
let reg=/^[0-9]*$/
if(!reg.test(num1)){
console.log('num1是0-9')
}
}

</pre>

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位')
}
}

</pre>

网友评论

本文标题：前端简洁并实用的工具类 (推荐收藏)

本文链接：https://www.haomeiwen.com/subject/ueacjftx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

前端简洁并实用的工具类 (推荐收藏)

前言

1.日期

1.1 element-UI的日期格式化

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

2.数组

2.1 检测是否是数组

2.2数组去重set方法

2.3 纯数组排序

2.4 数组对象排序

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

3.对象

3.1 对象遍历

3.2 对象的数据属性

3.3 对象的访问器属性

4.axios

4.1 axios的get方法

4.2 axios的post方法

4.3 axios的拦截器

5.promise

5.1 应用方法一

5.2 应用方法二

6.文本框的判断

6.1 全部为数字

6.2 只能为数字或字母

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

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

程序员

让前端飞