新浦京81707con > 首页 > 前端简洁并实用的工具类函数封装,关于ES6常用

原标题:前端简洁并实用的工具类函数封装,关于ES6常用

浏览次数:89 时间:2019-05-02

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

2018/03/06 · JavaScript · 函数

原来的文章出处: 火狼   

ES6语法跟babel:

前言

正文主要从日期,数组,对象,axios,promise和字符推断那多少个地方讲职业中常用的某些函数进行了包装,确实能够在品种中央直机关接引用,升高支付功能.

一、首先大家来解释一下什么是ES?

### 前言
*那两本书应该是日前ES陆荣辱与共的比较好的了,英特网有电子版本(文末有链接)。但是我买了书看,哈哈。那两篇摘录笔记分为上下两有的,本文是上半局地(1-六章),摘录了两本书里部分比较可行的知识点。*

1.日期

日期在后台管理种类可能用的大队人马的,一般是当做数据存贮和管制的3个维度,所以就能够涉嫌到不少对日期的管理

ES的全称是ECMAScript。1997 11

### 目录

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的二.x版本提供了value-format属性,能够从来设置选择器再次回到的值
图片 2

,JavaScript的创制者Netscape公司,决定将JavaScript提交给国际规则组织ECMA,希望那种语能够成为国际规范。

> #####1. 块级作用域绑定
> #####2. 字符串与正则表明式
> #####三. 函数的恢弘
> #####四. 数组的恢宏
> #####5. 目标的强大
  #####6. 集合(Set、Map)
> 7 . Symbol和Symbol属性

> 8 . Javascript中的类

> 9 . Promise、Generator函数、Async函数

> 10 . 代理(Proxy)和反射(Reflection)API

> 11 . 修饰器

> 12 . Module

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() 一; let day=date.getDate(); let hours=date.getHours(); let minu=date.getMinutes(); let second=date.getSeconds(); //决断是或不是满拾 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

2、什么是ES陆?为何这么火?

### 壹、块级成效域绑定

2.数组

ECMAScript 陆.0(以下简称ES6)是JavaScript语的下代专门的学业,已经在2015六业内揭露。它的标,是驱动JavaScript语能够来编排复杂的型应程序,成为公司级开拓语。

块级阐明用于注明在内定块级成效域之外无法访问的变量。块级成效域存在于:1、函数内部;2、块中(字符'{'和'}'之间的区域)。Es陆中设有的三种变量表明正是Let和Const注明。

二.一 检查测试是不是是数组

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版本了。因为这几个版本引进的语法作用太多,且制定进程在那之中,还有众多团体和个断提交新功效。事情非常快就变得通晓,恐怕在个版本包罗富有就要引的法力。常规的做法是先公布陆.0版,过段时间再发陆.1版,然后是陆.2版、陆.三版等等;

值得摘录的有以下陆点:

二.2数组去重set方法

一.广大利用循环和indexOf(ES5的数组方法,可以重回值在数组中第四回面世的职责)这里就不再详写,这里介绍1种选取ES6的set实现去重.

2.set是新怎数据结构,似于数组,但它的一大特色便是全体因素都以唯一的.

叁.set遍布操作
世家能够参照下边这一个:新添数据结构Set的用法

四.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属性类似数组的靶子转变为数组,也可以把字符串等能够遍历的目的转变为数组,它接受一个参数,调换对象与回调函数,…和Array.from都以ES陆的章程

三、ES陆以及ES7 增添了如何新特点?有如何好用的语法?实例:

##### 壹. 不可能再度表明

二.三 纯数组排序

常见有冒泡和挑选,这里小编写一下运用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)
        })
    }

大家在此以前扬言3个变量必要var,为啥要加进let、const;再去申明变量呢?//关于var、let、const关键字个性和选用办法;

    var count = 9; 
    //抛出语法错误
    let count = 7;

二.肆 数组对象排序

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都以只在和睦模块功效域内卓有功能{}内

##### 二. Const常量注解必须开始展览开始化

二.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,终止遍历,每1项都不满足则赶回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() {

    const age = 8;
    //语法错误:常量未初阶化
    const name;

3.对象

if (true) {

##### 3. 特殊的For循环
For循环设置循环变量的那有个别是一个父成效域,而循环体内部是3个独自的子功效域。

叁.一 对象遍历

export const traverseObj=(obj)=>{ for(let variable in obj){ //For…in遍历对象包罗持有继续的属性,所以若是//只是想使用对象自己的品质须求做1个料定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

    for(let i = 0;i< 3;i ){
        let i = 'can not change';
        console.log(i);//输出'can not change'
    }

3.二 对象的数量属性

一.对象属性分类:数据属性和做客器属性;

二.数目属性:包涵数据值的岗位,可读写,包罗几天性状包蕴六性景况:

configurable:表示是或不是通过delete删除属性从而再度定义属性,能还是不能够修改属性的表征,或是不是把品质修改为访问器属性,默感觉true enumerable:表示能还是无法通过for-in循环重回属性 writable:表示是或不是修改属性的值 value:包涵该属性的数据值。暗中同意为undefined

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

三.改变数据属性的暗中同意特性,利用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)

##### 四. 一时半刻死区
在区块中留存let和const命令,则那么些区块对那一个命令注解的变量从一初始就变成封闭的成效域。只要在表明在此以前就应用那几个变量,就能够报错。

叁.三 对象的访问器属性

一.造访器属性的八个性格:

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:壹 } 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属性来改变多少的

}

    情况一:
    var tmp = 123;
    if(true){
        tmp = 'abc';//ReferenceError
        let tmp;
    }
    
    情况二:
    function test(x = y,y = 2){
        return [x,y];
    }
    
    test();//报错

4.axios

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

    情况三:
    let x = x;//ReferenceError: x is not defined

4.1 axios的get方法

export const getAjax= function (getUrl,getAjaxData) { return axios.get(getUrl, { params: { 'getAjaxDataObj一': getAjaxData.obj1,//obj壹为getAjaxData的二脾质量 'getAjaxDataObj二': getAjaxData.obj二 } }) }

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

}

##### 5. Const评释对象,对象属性可变

4.2 axios的post方法

export const postAjax= function (getUrl,postAjaxData) { return axios.post(postUrl, { 'postAjaxDataObj1': postAjaxData.obj一,//obj1为postAjaxData的一性子质 'postAjaxDataObj二': postAjaxData.obj二 }) }

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

##### 陆. 深透冻结函数

四.三 axios的拦截器

首要分为请求和响应三种拦截器,请求拦截一般便是布署相应的乞请头消息(适用与广泛请求方法,即便ajax的get方法没有请求头,然而axios里面实行啦封装),响应一般便是对reponse举行拦阻管理,倘若回去结果为[]能够转账为0

一.请求拦截:将目前都会新闻放入请求头中

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

二.响应拦截:管理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的异同点

    constantize(obj) {//彻底冻结函数
        Object.freeze(obj);
        Object.keys(obj).forEach((key, i) => {
            if (typeof obj[key] === 'object') {
                constantize(obj[key]);
            }
        })
        obj.name = 777;//TypeError: Cannot add property name, object is not extensible
        return obj;
    }

5.promise

promise是一种封装未来值的轻松复用的异步任务管理机制,重要化解鬼世界回调护医治操纵异步的相继

// **相同点:**const和let都以在此时此刻块内有效,施行到块外会被销毁,也不设有变量进步(TDZ),不可能重复评释。

### 2、字符串与正则表达式
Es6进步了对Unicode的支撑,并且扩充了字符串对象。正则表明式则扩张了修饰符和总体性。

五.一 应用措施1

export const promise德姆o=()=>{ new Promise((resolve,reject)=>{ resolve(()=>{ let a=壹; 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声明的变量能够重新赋值。

值得摘录的有以下几点:

伍.二 应用措施二

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

##### 1. codePointAt()与String.fromCodePoint()方法
一同协助UTF-16,接受编码单元的地方而非字符地点作为参数,再次来到与字符串中加以地点对应的码位,即贰个整数值:

陆.文本框的决断

setTimeout(() => {

    var text = "

本文由新浦京81707con发布于首页,转载请注明出处:前端简洁并实用的工具类函数封装,关于ES6常用

关键词: 新浦京81707con javascript 前端开

上一篇:函数的性能,Array对象介绍

下一篇:没有了