ES6缩略版

每个人心中都有一个无法妥协的自己。

前言

ES6的出现极大的方便了我们的编程,而且抛弃了许多ES5中不合理的地方。不久之后,浏览器器厂商也会不断支持ES6语法。

变量

在Es6中有六种变量的声明方式,有Es5的var和function,还有let和const,另外两种是import和class。延续es5的var将会逐渐被let取代,let声明变量会形成一个块级作用域,在作用域外面取不到作用域内的变量。const声明的变量是一个常量,一旦声明,就不能改变。和let一样,只在所在的作用域内有效。对于简单的数据类型,如数值、字符串、布尔值,值就保存在变量指向的内存地址,而对于复合类型的数据,如对象和数组,保存的只是一个指针,指针是固定的,但是它指向的数据结构是控制不了的,我们用const定义的对象,我们就可以为对象添加属性。同样的,如果我们不想改变这个对象,我们可以用Object.freeze方法来将对象冻结。es6建议我们多使用const,由于编译器内部的处理不同,使用const会有利于提高程序的运行效率。

解构赋值

解构赋值我们常用来声明变量,而且它只有两种形式,一种是以数组的形式;另一种是对象的形式。两者最大的不同就是数组是有次序的取值,变量的值由它的位置决定,而对象是没有次序的,取值的时候,变量必须与属性同名,才能取到正确的值。

同样解构赋值可以添加默认值;

对字符串的解构赋值,会把字符串转化为类似数组的对象,对数值和布尔值的解构赋值会先转化为对象,一般情况下这两种情况很少见。

函数参数也可以解构赋值,而且可以添加默认值,这在我们日常编程中帮助很大。

Symbol

Symbol是es6引进的一种新的数据类型,表示独一无二的值;这就直接导致js出现了第七种数据类型,undefined、null、Boolean、String、Number、Object;判断变量是不是Symbol数据类型我们可以用typeof,需要注意的是Symbol前面不能使用new,它不是对象。类似字符串的数据类型。如果在对象内部定义Symbol属性一定要加方括号。该属性是公开属性,不是私有属性。

Set和Map数据结构

Set是ES6新提供的数据的结构,类似数组,不同的是,成员的值是唯一的,没有重复的值,我们常用来数组去重;Set结构的实例又两个属性,一个是常见的constructor,另一个是size,返回实例的成员总数;实例的方法也很简单,分为两大类,

一类是操作方法:

1、add(),添加某个值,返回Set结构本身;

2、delete(),删除某个值,返回一个布尔值,表示删除是否成功;

3、has(),返回一个布尔值,表示该实例是否有此成员;

4、clear(),清除所有成员,没有返回值

另一类是遍历操作:

1、keys(),返回键名的遍历器;

2、values(),返回键值的遍历器;

3、entries(),返回键值对的遍历器;

4、forEach(),使用回调函数遍历每个成员;

Map类似对象,但与对象最大的区别就是,它的键可以是各种类型(包括对象),Map与Set的属性和方法都类似,但是Map可以调用get和set方法,来获取和修改值;

Map构造函数可以接受一个数组作为参数

Map还可以与其他数据结构转化;

Proxy

Proxy可以理解成拦截器,如果外界想要访问该对象,都必须先通过一层拦截,它接受两个参数,第一个参数为想要代理的目标;第二个参数为配置对象,对象中提供来一些处理函数,处理函数的方法有13种,不在这里一一列举来,常用的有

1、get拦截属性的读取操作,可以接受三个参数,依次为目标对象、属性名和 proxy 实例本身(严格地说,是操作行为所针对的对象),其中最后一个参数可选。

2、set拦截属性的赋值操作,可以接受四个参数,依次为目标对象、属性名、属性值和 Proxy 实例本身,其中最后一个参数可选。

3、apply方法拦截函数的调用以及call和apply的操作,可以接受三个参数,分别是目标对象、目标对象的上下文对象(this)和目标对象的参数数组。

4、has方法用来拦截HasProperty操作,即判断对象是否具有某个属性时,这个方法会生效。典型的操作就是in运算符。以接受两个参数,分别是目标对象、需查询的属性名。

5、construct方法用于拦截new命令。

6、deleteProperty方法用于拦截delete操作,如果这个方法抛出错误或者返回false,当前属性就无法被delete命令删除。

Reflect

Reflect更多的是弥补Object的不足,以及让Object的操作变成函数行为,它主要有以下特点:

1、从Reflect对象上可以拿到语言内部的方法。

2、修改某些Object方法的返回结果,让其变得更合理。比如,Object.defineProperty(obj, name, desc)在无法定义属性时,会抛出一个错误,而Reflect.defineProperty(obj, name, desc)则会返回false。

3、让Object操作都变成函数行为。某些Object操作是命令式,比如name in obj和delete obj[name],而Reflect.has(obj, name)和Reflect.deleteProperty(obj, name)让它们变成了函数行为。

4、Reflect对象的方法与Proxy对象的方法一一对应,只要是Proxy对象的方法,就能在Reflect对象上找到对应的方法。

同样Reflect也有13个静态方法,大部分与Object对象的同名方法的作用都是相同的,而且它与Proxy对象的方法是一一对应的。

Promise

对promise的了解,我想你们比我熟悉,异步编程的一种方案,对promise异步操作的三种状态,这里不在阐述。

Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。

当异步操作成功时,我们调用resolve()把异步操作的结果,作为参数传递出去,reject相反;

Promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数。then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用,第二个回调函数是Promise对象的状态变为rejected时调用。其中,第二个函数是可选的,不一定要提供。这两个函数都接受Promise对象传出的值作为参数。

实际上Promise还有许多方法,不是很常用,比如Promise.try就是模拟try代码块,就像promise.catch模拟的是catch代码块等等。

Generator

Genertor函数是es6提供的一种异步编程解决方案,他的语法区别于传统的函数,可以把它理解成,Generator 函数是一个状态机,封装了多个内部状态。

执行 Generator 函数会返回一个遍历器对象,也就是说,Generator 函数除了状态机,还是一个遍历器对象生成函数。返回的遍历器对象,可以依次遍历 Generator 函数内部的每一个状态。

形式上,Generator 函数是一个普通函数,但是有两个特征。一是,function关键字与函数名之间有一个星号;二是,函数体内部使用yield表达式,定义不同的内部状态(yield在英语里的意思就是“产出”)。

Generator的调用和普通函数一样,但是它不执行,而是指向内部的一个状态,我们需要调用next方法,使内部的指针移向下一个状态,Generator 函数是分段执行的,yield表达式是暂停执行的标记,而next方法可以恢复执行。done属性的值false,表示遍历还没有结束。为true时表示遍历结束。

Generator 函数可以暂停执行和恢复执行,这是它能封装异步任务的根本原因。除此之外,它还有两个特性,使它可以作为异步编程的完整解决方案:函数体内外的数据交换和错误处理机制。

next返回值的 value 属性,是 Generator 函数向外输出数据;next方法还可以接受参数,向 Generator 函数体内输入数据。

class

在以前我们通过构造函数生成实例,在构造函数上挂载方法,可以通过实例访问,而Es6提供来一种更合理的解决方案就是class类,类的内部默认是严格模式,类的内部不存在变量提升,与 ES5 一样,在“类”的内部可以使用get和set关键字,对某个属性设置存值函数和取值函数,拦截该属性的存取行为。

如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”。静态方法可以通过构造函数直接调用。

ES6 为new命令引入了一个new.target属性,该属性一般用在构造函数之中,返回new命令作用于的那个构造函数。如果构造函数不是通过new命令调用的,new.target会返回undefined,因此这个属性可以用来确定构造函数是怎么调用的。

Decorator

在许多语言中都有修饰器函数,python中也有修饰器函数,Decorator类似python中修饰器,用来修改类的行为,目前有一个提案将这项功能,引入了 ECMAScript,目前还不支持使用。它的用法很简单。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180615G1NL0D00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券