内容：

1.ES6介绍及基础

2.模块、类和继承

3.ES6高级特性

4.Generator和Iterator

5.异步编程

6.函数相关

 

内容参考：《ES6 标准入门》

ES6标准阅读链接：

 

 

 

一、ES6介绍及基础

1.什么是ES6

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言

 

 

2.JavaScript版本

JavaScript有很多版本，具体版本如下： 

 

 

3.let和const

(1)let

ES6 新增了let命令，用来声明变量。它的用法类似于var，let所声明的变量，只在let命令所在的代码块内有效，也就是说let创建块级作用域

let和var的区别：

1 { 2   let a = 10; 3   var b = 1; 4 } 5  6 console.log(a)  // ReferenceError: a is not defined. 7 console.log(b)  // 1 8 // 结果表明，let声明的变量只在它所在的代码块有效 9 10 11 // var和let的区别:12 // 下面的代码如果使用var，最后输出的是10:13 var a = [];14 for (var i = 0; i < 10; i++) {15   a[i] = function () {16     console.log(i);17   };18 }19 a[6]()  //  1020 21 22 // 如果使用let，声明的变量仅在块级作用域内有效，最后输出的是 6。23 var a = [];24 for (let i = 0; i < 10; i++) {25   a[i] = function () {26     console.log(i);27   };28 }29 a[6]()  // 6

 

for循环的特别之处：

1 // 设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域2 // 例如下面这段代码:3 for (let i = 0; i < 3; i++) {4   let i = 'abc';5   console.log(i);6 }7 // abc8 // abc9 // abc

 

另外，var命令会发生”变量提升“现象，即变量可以在声明之前使用，值为undefined。这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才可以使用。

为了纠正这种现象，let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错

1 // var 的情况2 console.log(foo); // 输出undefined3 var foo = 2;4 5 // let 的情况6 console.log(bar); // 报错ReferenceError7 let bar = 2;

 

(2)const

const声明一个只读常量；const一旦声明就必须立即初始化，不能留到以后赋值；const作用域与let相同：只在所在的块级作用域内有效

1 const PI = 3.1415; 2 PI  // 3.1415 3  4 PI = 3; 5 // TypeError: Assignment to constant variable. 6 // 改变常量的值会报错 7  8  9 const foo;10 // SyntaxError: Missing initializer in const declaration

// const 用来声明一个不可赋值的变量  变量的值只能在声明的时候赋予const a = 1a = 2 // 错误// 下面的不是赋值 是操作 所以是可以的const arr = [1, 2]arr.push(3)// [1, 2, 3]

 

 

 

二、模块、类和继承

1.模块module

历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍

在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案；ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性

 

ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入：

1 // export2 export function stat() {}3 export function exists() {}4 export function readFile () {}5 // import6 import { stat, exists, readFile } from 'fs';

上面代码的实质是从fs模块加载 3 个方法，其他方法不加载。这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高

 

模块详细内容：

 

 

2.类class

下面是ES5和ES6定义类的写法：

1 // ES5: 2 function Point(x, y) { 3   this.x = x; 4   this.y = y; 5 } 6  7 Point.prototype.toString = function () { 8   return '(' + this.x + ', ' + this.y + ')'; 9 };10 11 var p = new Point(1, 2);12 13 14 //ES6:15 class Point {16   constructor(x, y) {17     this.x = x;18     this.y = y;19   }20 21   toString() {22     return '(' + this.x + ', ' + this.y + ')';23   }24 }

 

类详细介绍：

 

 

3.继承inherit

ES6中Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多

1 class Point { 2     constructor(x, y) { 3         this.x = x; 4         this.y = y; 5     } 6 } 7  8  9 class ColorPoint extends Point {10   constructor(x, y, color) {11     super(x, y); // 调用父类的constructor(x, y)12     this.color = color;13   }14 15   toString() {16     return this.color + ' ' + super.toString(); // 调用父类的toString()17   }18 }

 

继承详细内容：

 

 

 

三、ES6高级特性

1.变量的解构赋值

ES6中允许这样的赋值方式：

1 let [a, b, c] = [1, 2, 3] 2  3 let [foo, [[bar], baz]] = [1, [[2], 3]]; 4 foo // 1 5 bar // 2 6 baz // 3 7  8 let [ , , third] = ["foo", "bar", "baz"]; 9 third // "baz"10 11 let [x, , y] = [1, 2, 3];12 x // 113 y // 314 15 let [head, ...tail] = [1, 2, 3, 4];16 head // 117 tail // [2, 3, 4]18 19 let [x, y, ...z] = ['a']; 20 x // "a" 21 y // undefined 22 z // []

另外如果解析不成功，值就为undefined，如下所示：

1 let [foo] = [];2 let [bar, foo] = [1];3 // 以上两种情况都属于解构不成功，foo的值都会等于undefined

更多细节：

 

 

2.spread 和 rest

(1)拓展运算符spread

spread运算符用于数组的构造，析构，以及在函数调用时使用数组填充参数列表

1 let arrs1 = ['aa', 'bb'] 2 let arrs2 = ['cc', 'dd'] 3  4 // 合并数组 5 let arrs = [...arrs1, ...arrs2] 6 console.log(arrs)  // ['aa', 'bb', 'cc', 'dd'] 7  8 // 析构数组 9 let param1, param210 [param1, ...param2] = arrs111 12 console.log(param1)  // aa13 console.log(param2)  // ['bb']

 

(2)剩余运算符rest

rest运算符用于获取函数调用时传入的参数

1 function testFunc(...args) {2    console.log(args);  // ['aa', 'bb', 'cc']3    console.log(args.length); // 34 }5 // 调用函数6 testFunc('aa', 'bb', 'cc');

剩余运算符rest实现多参数：

1 function callFriends(via, ...friends) {2   console.log('使用' + via + '通知: ' + friends.join(',') + '等' + friends.length + '个好友')3 }4 callFriends('QQ', '张三')5 callFriends('电话', '张三', '李四', '王五')6 7 // 输出结果:8 // 使用QQ通知: 张三等1个好友9 // 使用电话通知: 张三,李四,王五等3个好友

 

 

3.template

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量

1 // 传统的 JavaScript 语言，输出模板通常是这样写的（下面使用了 jQuery 的方法）。 2  3 $('#result').append( 4   'There are ' + basket.count + ' ' + 5   'items in your basket, ' + 6   '' + basket.onSale + 7   ' are on sale!' 8 ); 9 10 // 上面这种写法相当繁琐不方便，ES6 引入了模板字符串解决这个问题。11 $('#result').append(`12   There are ${basket.count} items13    in your basket, ${basket.onSale}14   are on sale!15 `);

 

 

4.set和map

JavaScript中set和map这两种数据结构详细介绍：

(1)set

Set 在其他语言里面称为集合，是一种和 Array 相似的数据结构，不同之处在于, Set 中的元素都是不重复的，set 类型的主要作用是去重

用法如下：

1 var s = new Set() 2  3 // add 方法添加元素, 和 push 一样 4 s.add(1) 5 s.add(2) 6  7 // has 方法检查元素是否在 set 中 8 s.has(1) // true 9 s.has(3) // false10 11 // size 属性相当于 length12 s.size  // 213 14 // delete 方法删除一个元素15 s.delete(1)16 s.has(1)17 18 s.size  // 1

注：JavaScript中的set不像python中的set那样提供了一系列的运算方法，这些运算方法需要自己去实现

 

(2)map

Map 和 Object 很相似，在其他语言中 通常会有 dict 和 object 两种数据结构

现在 js 也有独立的 dict 那就是 Map(其实没多好用)，其用法如下：

1 var m = new Map()2 3 // set 方法增加一个值4 m.set('name', 'gua')5 6 // get 属性得到一个值7 m.get('name')

 

 

 

四、Generator和Iterator和Decorator

1.generator 

(1)generator -> 类似python的生成器

Generator函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同

Generator函数有多种理解角度：

• 语法上，Generator 函数可以理解为是一个状态机，封装了多个内部状态
• 执行 Generator 函数会返回一个遍历器对象即Generator 函数还是一个遍历器对象生成函数。返回的遍历器对象可遍历Generator函数内部的每个状态
• 形式上Generator函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）

 

(2)generator函数语法

generator函数如下：

1 function* helloWorldGenerator() {2   yield 'hello'3   yield 'world'4   return 'ending'5 }6 7 var hw = helloWorldGenerator()

Generator 函数的调用方法与普通函数一样，也是在函数名后面加上一对圆括号。不同的是，调用 Generator 函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象，也就是上一章介绍的遍历器对象（Iterator Object）

下一步，必须调用遍历器对象的next方法，使得指针移向下一个状态。也就是说，每次调用next方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个yield表达式（或return语句）为止。换言之，Generator 函数是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行

1 hw.next() 2 // { value: 'hello', done: false } 3  4 hw.next() 5 // { value: 'world', done: false } 6  7 hw.next() 8 // { value: 'ending', done: true } 9 10 hw.next()11 // { value: undefined, done: true }

 

关于generator详细内容：

 

 

2.iterator

(1)iterator -> 类似python中的迭代器

JavaScript 原有的表示集合的数据结构，主要是数组和对象，ES6 又添加了Map和Set。这样就有了四种数据集合，需要一种统一的接口机制，来处理所有不同的数据结构。

遍历器（Iterator）就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作

Iterator 的作用有三个：

• 为各种数据结构，提供一个统一的、简便的访问接口
• 使得数据结构的成员能够按某种次序排列
• ES6 创造了一种新的遍历命令for...of循环，Iterator 接口主要供for...of消费

 

(2)Iterator 的遍历过程

• 创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。
• 第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。
• 第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。
• 不断调用指针对象的next方法，直到它指向数据结构的结束位置。

每一次调用next方法，都会返回数据结构的当前成员的信息。具体来说，就是返回一个包含value和done两个属性的对象。其中，value属性是当前成员的值，done属性是一个布尔值，表示遍历是否结束

下面是一个模拟next方法返回值的例子：

1 var it = makeIterator(['a', 'b']); 2  3 it.next() // { value: "a", done: false } 4 it.next() // { value: "b", done: false } 5 it.next() // { value: undefined, done: true } 6  7 function makeIterator(array) { 8   var nextIndex = 0; 9   return {10     next: function() {11       return nextIndex < array.length ?12         {value: array[nextIndex++], done: false} :13         {value: undefined, done: true};14     }15   };16 }

 

关于iterator详细内容：

 

 

3.Decorator

(1)decorator -> 类似python中的装饰器

许多面向对象的语言都有修饰器（Decorator）函数，用来修改类的行为；装饰器是一个对类进行处理的函数。装饰器函数的第一个参数，就是所要修饰的目标类，当然也可以不写成函数调用的方式(见下面的代码)

1 @testable  // 等同于testable = testable(MyTestableClass) 2 class MyTestableClass { 3   // ... 4 } 5  6 function testable(target) { 7   target.isTestable = true; 8 } 9 10 MyTestableClass.isTestable // true11 12 // 上面代码中，@testable就是一个修饰器13 // 它修改了MyTestableClass类的行为，为它加上静态属性isTestable。testable函数的参数target是MyTestableClass类本身

 

(2)decorator修饰类的属性

1 class Person { 2   @readonly 3   name() { return `${
   this.first} ${
   this.last}` } 4 } 5  6 function readonly(target, name, descriptor){ 7   // descriptor对象原来的值如下 8   // {
     9   //   value: specifiedFunction,10   //   enumerable: false,11   //   configurable: true,12   //   writable: true13   // };14   descriptor.writable = false;15   return descriptor;16 }17 18 readonly(Person.prototype, 'name', descriptor);19 // 类似于20 Object.defineProperty(Person.prototype, 'name', descriptor);

 

关于decorator的详细内容：

 

 

 

五、异步编程

1.JavaScript中的异步编程

至少在语言级别上，Javascript是单线程的，因此异步编程对其尤为重要。

拿nodejs来说，外壳是一层js语言，这是用户操作的层面，在这个层次上它是单线程运行的，也就是说我们不能像Java、Python这类语言在语言级别使用多线程能力。取而代之的是，nodejs编程中大量使用了异步编程技术，这是为了高效使用硬件，同时也可以不造成同步阻塞。不过nodejs在底层实现其实还是用了多线程技术，只是这一层用户对用户来说是透明的，nodejs帮我们做了几乎全部的管理工作，我们不用担心锁或者其他多线程编程会遇到的问题，只管写我们的异步代码就好

ES 6以前：

• 回调函数
• 事件监听(事件发布/订阅)
• Promise对象

ES 6之后：

• Generator函数(协程coroutine)
• async和await

 

 

2.callback(回调函数)

假定有两个函数f1和f2，后者等待前者的执行结果：

1 f1();2 f2();

如果f1是一个很耗时的任务，可以考虑改写f1，把f2写成f1的回调函数：

1 function f1(callback){2     setTimeout(function () {3         // f1的任务代码4         callback();5     }, 1000);6 }

执行代码就变成这样：f1(f2);

采用这种方式，我们把同步操作变成了异步操作，f1不会堵塞程序运行，相当于先执行程序的主要逻辑，将耗时的操作推迟执行。

回调函数的优点是简单、容易理解和部署，缺点是不利于代码的阅读和维护，各个部分之间高度耦合，流程会很混乱，而且每个任务只能指定一个回调函数

 

 

3.promise

ES 6中原生提供了Promise对象，Promise对象代表了某个未来才会知道结果的事件(一般是一个异步操作)，并且这个事件对外提供了统一的API，可供进一步处理。

使用Promise对象可以用同步操作的流程写法来表达异步操作，避免了层层嵌套的异步回调，代码也更加清晰易懂，方便维护。

 

 

4.async函数

ES2017 标准引入了 async 函数，使得异步操作变得更加方便。async 函数是什么？一句话，它就是 Generator 函数的语法糖

详细内容直接看这里：

 

 

 

六、函数相关

1.函数参数默认值(函数默认参数)

1 // ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面:2 function log(x, y = 'World') {3   console.log(x, y);4 }5 6 log('Hello') // Hello World7 log('Hello', 'China') // Hello China8 log('Hello', '') // Hello

 

 

2.箭头函数

箭头函数就是匿名函数定义的简化版, 宣称能使得代码更简洁，实际上就是纯粹的垃圾

箭头函数的 this 值是绑定了的，箭头函数没有 arguments 对象，如果要多参数, 必须用 ...

语法如下：

1 // (参数1, 参数2) => { 语句 } 2 // (参数1, 参数2) => 语句 3 // 上面两行相当于下面这函数 4 function(参数1, 参数2) { 5     return 语句 6 } 7  8 // 如果只有一个参数，圆括号可省略的 9 // (参数1) => { 语句 }10 // 参数1 => { 语句 }11 12 // 但是如果没有参数, 必须需要使用圆括号13 // () => { 语句 }14 15 // 例子16 var a1 = [1, 2, 3]17 // 下面两个等价18 var a2 = a1.map(function(n){19     return n * n20 })21 var a3 = a1.map( n => n * n )22 23 n => n * n24 // 上面 1 行等价于下面 3 行25 function(n) {26     return n * n27 }