前端简洁并实用的工具类

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

1.日期

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

1.1 element-UI 的日期格式化

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

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

exportconst dateReurn1=(date1)=>{
    date1.toLocaleString("en-US", { hour12: false }).replace(/\b\d\b/g, '0$&').replace(newRegExp('/','gm'),'-')
}

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

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

没有满 10 就补 0

exportdefaultconst obtainDate=()=>{
 let date = newDate();
      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();
      //判断是否满10let 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 检测是否是数组

exportdefaultconst judgeArr=(arr)=>{
        if(Array.isArray(arr)){
            returntrue;
        }
    }

2.2数组去重 set 方法

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

2.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 数组对象排序

exportconst 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,终止遍历
          })  
    }

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

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

3.对象

3.1 对象遍历

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

exportconst 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() 这个方法来定义

exportconst defineObjAccess=()=>{
let personAccess={
    _name:'张三',//_表示是内部属性,只能通过对象的方法修改
    editor:1
  }
  Object.defineProperty(personAccess,'name',{
    get:function(){
      returnthis._name;
    },
    set:function(newName){
      if(newName!==this._name){
        this._name=newName;
        this.editor++;
      }
    }
    //如果只定义了get方法则改对象只能读
  })
}

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

4.axios

4.1 axios 的 get 方法

exportconst getAjax= function (getUrl,getAjaxData) {
  return axios.get(getUrl, {
    params: {
      'getAjaxDataObj1': getAjaxData.obj1,
      //obj1 为 getAjaxData的一个属性 'getAjaxDataObj2': getAjaxData.obj2
    }
  })
}

4.2 axios 的 post 方法

exportconst 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) =>{
  letdata = response.dataif(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 应用方法二

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

6.文本框的判断

6.1 全部为数字

方法一（最简单）：

exportdefaultconst judgeNum1=(num1)=>{
    if(typeof num1==number){
        returntrue;
    }else{
        returnfalse;
    }
}

方法二：isNaN

exportdefaultconst judgeNum1=(num1)=>{
    if(!isNaN(num1)){
        returntrue;
    }else{
        returnfalse;
    }
}

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

方法三：正则

exportdefaultconst 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 属性来判断

exportdefault const judgeNum1=(num1)=>{
      if(num1.length>16){
        console.log('num1超过16位')
     }
 }