前端简洁并实用的工具类

时间 2019-11-24

标签前端简洁实用工具繁體版

原文原文链接

前言

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

1.日期

日期在后台管理系统仍是用的不少的,通常是做为数据存贮和管理的一个维度,因此就会涉及到不少对日期的处理ios

1.1 new Date转化为yyyy-MM-dd HH:mm:ss

DatePicker日期选择器默认获取到的日期默认是Date对象,可是咱们后台须要用到的是yyyy-MM-dd,因此须要咱们进行转化ajax

方法一:将Fri Mar 23 2018 12:19:48 GMT+0800 (国际时间)转化为dd-MM-yyyy HH:mm:ssaxios

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

也就是转化为日期控件能够接受的类型直接初始化promise

export const forMatToDate=(date)=>
  return new Date('2018-04-16 19:43:00');
    }
复制代码

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

没有满10就补0session

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对象可接受的参数

一、new Date("month dd,yyyy hh:mm:ss"); 
二、new Date("month dd,yyyy"); 
三、new Date(yyyy,mth,dd,hh,mm,ss); 注意：这种方式下，必须传递整型；
四、new Date(yyyy,mth,dd); 
五、new Date(ms); 注意：ms:是须要建立的时间和
6.new Date(yyyy-MM-dd hh:mm:ss)
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实现去重.app

2.set是新怎数据结构,似于数组，但它的一大特性就是全部元素都是惟一的.异步

3.set常见操做你们能够参照下面这个:[新增数据结构Set的用法][3]

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, ""); }

结束

很开心你还能看到这里,这些类可能你如今用不到,但能够先收藏着. 你们能够一块儿交流,下次项目开发直接拿过去用,如今3月项目比较赶,这个真的能够提升开发效率哦!祝你们新年快乐哒.