您的位置:澳门新葡8455最新网站 > Web前端 > 前端简洁并实用的工具类函数装进,关于ES6常用

前端简洁并实用的工具类函数装进,关于ES6常用

发布时间:2019-12-09 15:19编辑:Web前端浏览(80)

    前端简洁并实用的工具类函数封装

    2018/03/06 · JavaScript · 函数

    原文出处: 火狼   

    ES6语法跟babel:

    前言

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

    一、首先我们来解释一下什么是ES?

    1.日期

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

    ES的全称是ECMAScript。1996 11

    1.1 element-UI的日期格式化

    图片 1

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

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

    export const dateReurn1=(date1)=>{ date1.toLocaleString("en-US", { hour12: false }).replace(/bdb/g, '0$&').replace(new RegExp('/','gm'),'-') }

    1
    2
    3
    export const dateReurn1=(date1)=>{
        date1.toLocaleString("en-US", { hour12: false }).replace(/bdb/g, '0$&').replace(new RegExp('/','gm'),'-')
    }

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

    ,JavaScript的创造者Netscape公司,决定将JavaScript提交给国际标准化组织ECMA,希望这种语能够成为国际标准。

    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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    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

    二、什么是ES6?为什么这么火?

    2.数组

    ECMAScript 6.0(以下简称ES6)是JavaScript语的下代标准,已经在2015 6正式发布。它的标,是使得JavaScript语可以来编写复杂的型应程序,成为企业级开发语。

    2.1 检测是否是数组

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

    1
    2
    3
    4
    5
    export default const judgeArr=(arr)=>{
            if(Array.isArray(arr)){
                return true;
            }
        }

    2009年开始ECMAScript 5.1版本发布后,其实就开始定制6.0版本了。因为这个版本引入的语法功能太多,且制定过程当中,还有很多组织和个断提交新功能。事情很快就变得清楚,可能在个版本包括所有将要引的功能。常规的做法是先发布6.0版,过段时间再发6.1版,然后是6.2版、6.3版等等;

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

    1
    2
    3
    4
    5
    6
    7
    8
    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的方法

    三、ES6以及ES7+增加了哪些新特性?有哪些好用的语法?实例:

    2.3 纯数组排序

    常见有冒泡和选择,这里我写一下利用sort排序

    export const orderArr=(arr)=>{ arr.sort((a,b)=>{ return a-b //将arr升序排列,如果是倒序return -(a-b) }) }

    1
    2
    3
    4
    5
    export const orderArr=(arr)=>{
            arr.sort((a,b)=>{
                return a-b //将arr升序排列,如果是倒序return -(a-b)
            })
        }

    我们之前声明一个变量需要var,为什么要增加let、const;再去声明变量呢?//关于var、let、const关键字特性和使用方法;

    2.4 数组对象排序

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

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

    // let和const都是只在自己模块作用域内有效{}内

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    情况一:全部满足
     
        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 结束循环和函数.

    function test() {

    3.对象

    if (true) {

    3.1 对象遍历

    export const traverseObj=(obj)=>{ for(let variable in obj){ //For…in遍历对象包括所有继承的属性,所以如果 //只是想使用对象本身的属性需要做一个判断 if(obj.hasOwnProperty(variable)){ console.log(variable,obj[variable]) } } }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    export const traverseObj=(obj)=>{
            for(let variable in obj){
            //For…in遍历对象包括所有继承的属性,所以如果
             //只是想使用对象本身的属性需要做一个判断
            if(obj.hasOwnProperty(variable)){
                console.log(variable,obj[variable])
            }
            }
        }

    let a = 1

    3.2 对象的数据属性

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

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

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

    1
    2
    3
    4
    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 }) }

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

    console.log(a)

    3.3 对象的访问器属性

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

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

    1
    2
    3
    4
    5
    6
    7
    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方法则改对象只能读 }) }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    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

    console.log(a) //a is not defined;

    4.1 axios的get方法

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

    1
    2
    3
    4
    5
    6
    7
    8
    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.post(postUrl, { 'postAjaxDataObj1': postAjaxData.obj1,//obj1为postAjaxData的一个属性 'postAjaxDataObj2': postAjaxData.obj2 }) }

    1
    2
    3
    4
    5
    6
    export const postAjax= function (getUrl,postAjaxData) {
      return axios.post(postUrl, {
          'postAjaxDataObj1': postAjaxData.obj1,//obj1为postAjaxData的一个属性
          'postAjaxDataObj2': postAjaxData.obj2
      })
    }

    test()

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

    1
    2
    3
    4
    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 } })

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

    // const和let的异同点

    5.promise

    promise是一种封装未来值的易于复用的异步任务管理机制,主要解决地狱回调和控制异步的顺序

    // **相同点:**const和let都是在当前块内有效,执行到块外会被销毁,也不存在变量提升(TDZ),不能重复声明。

    5.1 应用方法一

    export const promiseDemo=()=>{ new Promise((resolve,reject)=>{ resolve(()=>{ let a=1; return ++a; }).then((data)=>{ console.log(data)//data值为++a的值 }).catch(()=>{//错误执行这个 }) }) }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    export const promiseDemo=()=>{
    new Promise((resolve,reject)=>{
        resolve(()=>{
            let a=1;
            return ++a;
        }).then((data)=>{
            console.log(data)//data值为++a的值
        }).catch(()=>{//错误执行这个
     
        })
    })
    }

    // **不同点:**const不能再赋值,let声明的变量可以重复赋值。

    5.2 应用方法二

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

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

    for (var i = 0; i < 5; i++) {

    6.文本框的判断

    setTimeout(() => {

    6.1 全部为数字

    方法一(最简单):

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

    1
    2
    3
    4
    5
    6
    7
    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; } }

    1
    2
    3
    4
    5
    6
    7
    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') } }

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

    console.log(i) //5, 5, 5, 5, 5

    6.2 只能为数字或字母

    这个用正则判断
    定义一个正则:let reg=/^[0-9a-zA-Z]*$/g

    }, 0)

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

    1
    2
    3
    4
    5
    export const judgeNum1=(num1)=>{
          if(num1.length>16){
            console.log('num1超过16位')
         }
    }

    console.log(i) //5 i跳出循环体污染外部函数

    结束

    很开心你还能看到这里,这些类可能你现在用不到,但可以先收藏着.
    大家可以一起交流,下次项目开发直接拿过去用,现在3月项目比较赶,这个真的可以提高开发效率哦!祝大家新年快乐哒.

    1 赞 收藏 评论

    图片 3

    //将var改成let之后

    for (let i = 0; i < 5; i++) {

    setTimeout(() => {

    console.log(i) // 0,1,2,3,4

    }, 0)

    console.log(’22’);

    }

    console.log(i)//i is not defined i无法污染外部函数

    四、字符串操作

    let t = 'abcdefg';

    if (t.indexOf('abc') > -1) {

    console.log('yes有abc哦

    本文由澳门新葡8455最新网站发布于Web前端,转载请注明出处:前端简洁并实用的工具类函数装进,关于ES6常用

    关键词: