1. 日 期
日期在后台管理系统还是用的很多的，一般是作为数据存贮和管理的一个维度，所以就会涉及到很多对日期的处理。
1.1 new Date转化为yyyy-MM-dd HH:mm:ss
DatePicker日期选择器默认获取到的日期默认是Date对象，但是我们后台需要用到的是yyyy-MM-dd，所以需要我们进行转化。
方法一:
将Fri Mar 23 2018 12:19:48 GMT+0800 (国际时间)转化为dd-MM-yyyy HH:mm:ss
export const dateToFormat=(date)=>{
date.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转化为new Date()
也就是转化为日期控件可以接受的类型
export const forMatToDate=(date)=>{
let dateArr=date.split(':');
return new Date(2017,10,19,dateArr[0],dateArr[1],dateArr[2]);
}
注意！日期中初始化默认比实际设置的值大一
1.3 获取当前的时间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;
})
return year+'-'+arr[0]+'-'+arr[1]+' '+arr[2]+':'+arr[3]+':'+arr[4]
}
1.4 将时间戳转化为yyyy-MM-dd HH:mm:ss
export default const returnTimestamp=(strTime)=>{
let middleDate=new Date(strTime)
return middleDate.toLocaleString('zh-CN',{hour12:false}).replace(/\b\d\b/g, '0$&').replace(new RegExp('/','gm'),'-')
})
1.5 比较yyyy-MM-dd时间大小
如果单个比较会比较复杂，这里直接处理成Number比较。
export default const compareTwo=(dateOne,dateTwo)=>{
return Number(dateOne.replace(/\-/g,""))<Number(dateTwo.replace(/\-/g,""))
}
1.6 计算两个日期格式为(yyyy-MM-dd)相差几个月
export default const disparityFewMonth = (dateOne, dateTwo) => {
let datesOne = dateOne.split('-').map(item => Number(item));
let datesTwo = dateTwo.split('-').map(item => Number(item));
const diff = [0, 0, 0].map((value, index) => {
return datesOne[index] - datesTwo[index]
});
return (diff[0] * 12 + diff[1]) + '月' + diff[2] + '天'
}
1.7 new Date对象可接受的参数
1、new Date("month dd,yyyy hh:mm:ss");
2、new Date("month dd,yyyy");
3、new Date(yyyy,mth,dd,hh,mm,ss); 注意：这种方式下，必须传递整型；4、new Date(yyyy,mth,dd);
5、new Date(ms); 注意：ms:是需要创建的时间和 GMT时间1970年1月1日之间相差的毫秒数；当前时间与GMT1970.1.1之间的毫秒数：var mills = new Date().getTime();
注意:mth:用整数表示月份，从0（1月）到11（12月）
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的用法（https://www.cnblogs.com/kongxianghai/p/7250248.html）
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 数组中的最大值
export const maxArr=(arr)=>{
return Math.max(...arr)
}
或者
export const maxArr=(arr)=>{
return Math.max.apply(null,arr)
}
2.6 数组的"短路运算"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 结束循环和函数。
2.7 数组过滤filter和处理map方法
filter:过滤满足某一条件的数组值，并返回新数组。
export const filterArr = (arr, operator, judgeVal) => {
return arr.filter(item => {
if (operator == '>') {
return item > judgeVal;
} else if (operator == '<') {
return item > judgeVal;
} else if (operator == '==') {
return item == judgeVal;
}
})
}
map：对数组进行处理返回一个新数组
export const mapArr = (arr) => {
return arr.map(item => item + 10;)//箭头函数的{}如果省略,则会默认返回,不用写return
}
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
}
}).then(data=>{
//成功返回
}).catch(err=>{
//错误返回
})
}
4.2 axios的post方法
export const postAjax= function (getUrl,postAjaxData) {
return axios.post(postUrl, {
'postAjaxDataObj1': postAjaxData.obj1,//obj1为postAjaxData的一个属性
'postAjaxDataObj2': postAjaxData.obj2
}).then(data=>{
//成功返回
}).catch(err=>{
//错误返回
})
}
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 const judgeNum1=(num1)=>{
if(typeof num1=='number'){
return true;
}else{
return false;
}
}
方法二： isNaN
export const judgeNum1=(num1)=>{
if(!isNaN(num1)){
return true;
}else{
return false;
}
}
注:当num1为[]（空数组）、“”（空字符串)和null会在过程中转换为数字类型的0,所以也会返回false,从而判断为数字,所以可以将用typeof将以上特殊情况剔除.
方法三：正则
export 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 const judgeNum1=(num1)=>{
if(num1.length>16){
console.log('num1超过16位')
}
}
6.5 去掉字符左右空格
export const trimLeOrRi=(str)=>{ //删除左右两端的空格
return str.replace(/(^s)|(s$)/g, "");
}
网友评论