ES6简介
主要内容 Javascript、ES5、ES6的关系 let和const关键字 解构赋值 模板字符串 函数的扩展 对象和类的扩展 新增数据结构Set,Map,WeakMap 遍历器Iterator和for…of循环 Generator函数 Promise对象和async函数 模块化Module ES6的部署和转换实现
Javascript、ES5、ES6的关系
let和const关键字
let和const关键字——let *let跟var类似,但let关键字使变量只在块级作用域内有。 *函数本身的作用域在其所在的块级作用域内。
let和const关键字——const 定义常量 重新赋值不会报错,只会默默失败。 作用域跟let相同。
解构赋值 数组的解构赋值 对象的解构赋值 解构赋值的用途
解构赋值——数组的解构赋值 *定义变量形式的改变。 解构赋值就是模式匹配。 *一些嵌套数组的例子。 *解构不成功时,值为undefinded 对undefined、null解构会报错,因为undefined和null不能转换成对象。 *解构允许指定默认值。
解构赋值——对象的解构赋值 *定义变量形式的改变。 也能嵌套。 *也能默认。 *对声明的变量赋值要非常小心。
解构赋值——实际应用 *函数可返回多个值。 *函数参数定义及默认参数。
模板字符串 使用`(左撇号)声明。 可当做普通字符串使用。 也可来定义多长字符串。 在字符串中可嵌入变量。
函数的扩展 函数参数的默认值 rest参数 扩展运算符 箭头函数
函数的扩展——函数参数的默认值
函数的扩展——rest参数 rest参数用于数组的解构赋值和函数的参数中,指代一个数组,多余的值都将存放于这个数组中。 注意点: *在解构赋值中的应用 *在函数参数中的应用 注意点: 它是一个数组 rest参数之后不能再有其他参数,否则会报错。
函数的扩展——扩展操作符 rest操作符的反运算符,将一个数组转换为用逗号分隔的参数序列。
函数的扩展——箭头函数 *使用箭头(=>)来定义函数。 如果不需要参数或多个参数,使用圆括号()代表参数部分。 如果代码部分多余一条,使用大括号括起来,并用return语句返回。 *若返回的值为一个对象该怎么办? 注意点: 函数体内的this对象,绑定的是定义时所在的对象,而非运行时所在的对象。 因为this被强制绑定为定义时所在的对象,因此无法使用call(), apply(), bind()来改变this的指向。 不可作为构造函数,跟new一起会报错。 函数体内没有arguments对象。
对象的扩展 增强对象的写法。 Symbol数据类型。 Proxy方法。 新增class关键字。
对象的扩展——增强对象的写法 *允许直接写入变量和方法,作为对象的属性和方法。 *常用于函数的返回值,非常方便。 *属性名表达式写法。
对象的扩展——Symbol *新的原始数据类型。 *最大的特点,每个Symbol都不相等。 *适用于作为标识符,用于对象属性,保证属性名之间不会发生冲突。 通过symbol函数生成,结构一个字符串作为指定生成symbol的名称,该名称可通过name属性获取。 Typeof的结果表明,symbol是一种新的原始类型。 Symbol初始化不使用new命令。 防止属性被覆写。
对象的扩展——Proxy 对象的属性代理 使用proxy作为构造函数,接受两参数,一为目标对象,二为代理的属性get/set方法。
对象的扩展——class关键字 *传统使用构造函数来定义生成新的对象。 *ES6引入class关键字,可定义类。 *类的继承——extends关键字。 跟传统的面向对象语言差异很大,不容易理解,容易对新学习这门语言的程序造成困惑。 并无新的功能,只不过语法更清晰,它是一个语法糖。 Constructor即为构造方法,类在实例化的时候会自动调用此方法。 this代表实例化的对象。 属性、方法的声明不需要使用逗号分隔。 Class之间通过extends关键字实现继承。 super指向父类。 必须在constructor方法中调用一次super()方法,否则会报错。
新增数据结构 Set Map WeakMap
新增数据结构——Set *新增数组结构Set,它类似于数组,但成员都是唯一的,不重复的。 *Set的属性和方法。 Set.prototype.constructor Set.prototype.size add() delete() has() clear()
新增数据结构——Map *新增数组结构Map Map的属性和方法。 Map.prototype.constructor Map.prototype.size add() delete() has() clear() 对象本身是键值对集合的,但只能用字符串作为键名。 Map结构允许非字符串也能作为键值。
新增数据结构——WeakMap 与Map类似,但只接受对象作为键名。(null除外)
遍历器和for…of循环
遍历器和for…of循环——Iterator Iterator(遍历器)是一种协议,对象只要部署了这个协议,就可以完成遍历操作,es6中,遍历操作特指for…of循环。 协议规定,部署了next方法的对象,就具备了遍历器的功能。 next方法须返回一个包含value和done两个属性的对象。value是当前遍历位置的值,done属性表示遍历是否结束,是一个布尔值。
遍历器和for…of循环——for…of循环 一个对象部署了next方法,就被视为具备了Iterator接口,就可用for…of循环遍历其值。 在ES6中,有三类数据结构原生具备Iterator接口:数组、某些类似数组的对象、Set和Map结构。
ES6中很多数据结构都支持遍历:数组、set、map、对象,那么函数呢?
Generator函数 Generator函数具有遍历器的特征,即具有next()方法,返回具有value和done属性的对象。 *next方法参数:yield语句本身返回undefined,next方法可带一个参数,作为上一条yeild语句返回的值。 如果yield语句返回的是一个遍历器,则yeild关键字后面要加一个星号(*)。 *在for…of中的应用。 具有两个特点: function关键字后跟一个星号(*) 函数体内通过yeild关键字定义遍历的值。 每次调用比那里器next()方法时,就从函数头部或上一次停下来的地方开始执行,直到下一条yeild语句位置。 当遍历结束时返回undefined yeild语句跟return有点像,都是返回紧跟后面表达式的值。区别在于,yield使函数暂停执行,下次再从改位置继续执行,而return不具备这些能力。
js中要如何才能使异步操作变成同步操作?
Promise对象和async函数
Promise对象和async函数——Promise Promise是一个构造函数,生成promise实例,该实例具备上述规范。 Promise构造函数接受一个函数作为参数,该函数有resolve方法和reject方法两个参数,这两个方法都是js内核生成的。 如果异步操作成功,则运行resolve函数,promise对象状态由pending变为resolved。 如果异步操作失败,则运行reject函数,promise对象由pending变为rejected。 Promise对象生成后,可以使用then方法分别指定resolve方法和reject回调。 Promise规范了异步操作的状态和方法。 状态:pending(进行中),resolved(已完成),rejected(已失败)。 方法:resolve(成功),reject(失败) *如何实现这个接口。 *链式操作。如果then返回的是一个新的promise对象,可采用链式写法。 *cathch方法捕获错误。 promise的错误具有“冒泡”性质,错误会一致传下去,知道捕获为止。 若最终都没有捕获错误,则在实例结束抛出错误。实例化过程中遇到的错误则不进行抛出。
Promise对象和async函数——Promise *Promise.all()方法 将多个异步包装成一个新的Promise对象 当这些对象都操作成功后,状态才变成resolved,只要其中一个失败,状态就变成rejected。 Promise.race()方法 只要其中一个完成就完成。 *Promise.resolve() 将对象转换成Promise对象。 如果对象不具备then方法,则返回一个新的Promise对象,其状态为resolved。 Promise.reject() 返回一个新的promise对象,该实例状态为rejected。
Promise对象和async函数——async函数 有了统一的接口,那么就能使原本异步的操作变成同步操作。 async关键字表明函数内部有异步操作。 该异步操作应为promise对象,并用await关键字注明。
模块化Module
模块化Module 用户在import模块的时候,必须精确的知道模块中属性和方法的名称,使用default关键字,用户无需查询手册,可给属性、方法任意指定名称。 类的解构赋值。 如果想为输入的属性方法更改一个名字,可使用as关键字。 ES6实现了模块功能,试图解决js在代码依赖和部署上的问题,取代现有的AMD和CommonJs规范,成为浏览器和服务器端通过的模块化解决方案。 模块功能有两个关键词:export和import。 export用于定义模块的对外接口。 Import用于引入其他模块的功能。 ES6规定一个独立的js文件即为一个模块。 各个模块间作用域屏蔽。 允许一个文件调用另一个文件。 *一个简单的模块就是一个js文件,里面用export输出接口。 *使用export定义模块后,其他js文件可使用import关键字加载文件。 *通过export default指定默认方法。 *模块的继承。 另一种写法:
ES6的部署和转换实现