来自 前端知识 2019-10-04 20:55 的文章
当前位置: 金沙澳门官网网址 > 前端知识 > 正文

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

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

2018/03/06 · JavaScript · 函数

初稿出处: 火狼   

ES6语法跟babel:

前言

本文主要从日期,数组,对象,axios,promise和字符判定那多少个地点讲专门的学问中常用的部分函数进行了包装,确实能够在项目中平素援用,升高开垦效用.

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

1.日期

日期在后台管理种类恐怕用的浩大的,日常是充当数据存贮和管制的一个维度,所以就能涉嫌到不菲对日期的管理

ES的全称是ECMAScript。壹玖玖捌 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语的下代正规,已经在二零一六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;
        }
    }

二〇〇八年始于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 promise德姆o=()=>{ 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 剖断输入的位数不超越十四位

直白接纳字符串新加的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跳出循环体污染外界函数

结束

很欢腾你还是能够来看此间,那一个类大概您未来用不到,但能够先收藏着.
我们可以一同沟通,后一次项目开辟直接拿过去用,以后四月项目相比赶,这几个实在能够加强开垦功能哦!祝大家新岁欢欣哒.

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哦

本文由金沙澳门官网网址发布于前端知识,转载请注明出处:关于ES6常用语法,前端简洁并实用的工具类函数

关键词: