1.ES6简介

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在2015年6月正式发布了。
它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 Jscript 和 ActionScript）。日常场合，这两个词是可以互换的。
ES6 从开始制定到最后发布，整整用了15年 2009年12月，ECMAScript 5.0版正式发布 2011年6月，ECMAscript5.1版发布，并且成为ISO国际标准（ISO/IEC 16262:2011）。 2013年3月，ECMAScript6草案冻结，不再添加新功能。新的功能设想将被放到ECMAScript 7。 2013年12月，ECMAScript6草案发布。然后是12个月的讨论期，听取各方反馈。 2015年6月，ECMAScript6正式通过，成为国际标准。从2000年算起，这时已经过去了15年。

附录： ECMA是“European Computer Manufacturers Association”的缩写，中文名称为欧洲计算机制造商协会。是1961年成立的旨在建立统一的电脑操作格式标准（包括程序语言和输入输出）的组织。

2.ES6基础编程

2.1.let命令

ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

2.1.1.let命令存在块级作用域

if (true) {
    var a = 10;
    let b = 20;
}
console.log(a); //10
console.log(b); //Uncaught ReferenceError: b is not defined

上面代码在代码块之中，分别用var和let声明了两个变量。然后在代码块之外调用这两个变量，结果let声明的变量报错，var声明的变量返回了正确的值。这表明，let声明的变量只在它所在的代码块有效。
那为什么需要块级作用域呢？ ES5只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。下面场景中，内层变量可能会覆盖外层变量。

var tmp = new Date();
function fn(){
    console.log(tmp);
    if(false){
        var tmp = 'hello world';
    }
}
fn();    //undefined

上面代码中，函数f执行后，输出结果为undefined，原因在于变量提升，导致内层的tmp变量覆盖了外层的tmp变量。

2.1.2.Let不存在变量提升

//var的情况
console.log(foo);
var foo = 2;   //undefined
//let的情况
console.log(bar);
let bar = 2;   //ReferenceError: Cannot access 'bar'

上面代码中，变量foo用var命令声明，会发生变量提升，即脚本开始运行时，变量foo已经存在了，但是没有值，所以会输出undefined。变量bar用let命令声明，不会发生变量提升。这表示在声明它之前，变量bar是不存在的，这时如果用到它，就会抛出一个错误。 因此，使用let声明变量，极大的消除了代码的潜在bug的隐患。

2.1.2.Let暂时性死区

只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。

var temp = 123;
if(true){
    temp = 'abc';  //ReferenceError: Cannot access 'temp' 
    let temp;
}

上面代码中，存在全局变量tmp，但是块级作用域内let又声明了一个局部变量tmp，导致后者绑定这个块级作用域，所以在let声明变量前，对tmp赋值会报错。

2.2.const 命令

const声明一个只读的常量。一旦声明，常量的值就不能改变。

const PI = 3.1415926;
PI = 3;  //TypeError: Assignment to constant variable.

上面代码表明改变常量的值会报错。

2.3.字符串的扩展-模板字符串

传统的JavaScript语言，输出模板通常是这样写的:

<p id="result"></p>
<script>
    let basket = {
        count: 100,
        onSale: 80
    }
    document.getElementById('result').innerHTML =
        'There are <b>' + basket.count + '</b> ' +
        'items in your basket, ' +
        '<em>' + basket.onSale +
        '</em> are on sale!';
</script>

前面这种写法相当繁琐不方便，ES6引入了模板字符串解决这个问题

<p id="result"></p>
<script>
    let basket = {
        count:100,
        onSale:80
    }
    document.getElementById('result').innerHTML =
        `There are <b>${basket.count}</b> items
         in your basket, <em>${basket.onSale}</em>
        are on sale!`;
</script>

注意：ES6模板字符串中必须要使用反引号。

2.4.函数的扩展rest参数

ES6 引入 rest 参数（形式为“…变量名”），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

function add(...values) {
    let sum = 0;
    for(var val of values) {
          sum += val;
    }
    return sum;
}
add(2, 5, 3) // 10

上面代码的add函数是一个求和函数，利用 rest 参数，可以向该函数传入任意数目的参数。
rest 参数中的变量代表一个数组，所以数组特有的方法都可以用于这个变量。下面是一个利用 rest 参数改写数组push方法的例子

function push(array, ...items) {
    items.forEach(function(item) {
        array.push(item);
        console.log(item);
    });
}
var a = [];
push(a, 1, 2, 3)

2.5. 函数的扩展-箭头函数

ES6允许使用“箭头”（=>）定义函数：

//ES5定义函数
var f = function(v) {
    return v;
};
//ES6定义箭头函数
var f = v => v

2.5.1.箭头函数的语法

如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分

let f = () => 5;
// 等同于
let f = function() { return 5 };
let sum = (num1, num2) => {
 return num1 + num2;
};
// 等同于
let sum = function(num1, num2) {
 return num1 + num2;
};

如果只有一个参数，那么圆括号就可以省略了
```
let f = str => {
 console.log(str);
}
f('hello');
```
如何函数体中的代码只有一句，那么大括号可以省略
```
let f = str => console.log(str);
f('hello');
```

但如果函数体中的代码只有一个return语句，那么return关键词也必须省略

//这是错误的
let sum = (num1, num2) => return num1 + num2;
//这是正确的
let sum = (num1, num2) => num1 + num2;

由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号。
```
let getTempItem = id => ({ id:id, name:'Temp' })
```
2.5.2.使用箭头函数的注意点
箭头函数有几个使用注意点。
函数体内的this对象。
函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
或者说：箭头函数当方法使用时没有定义this绑定，而是捕获所在上下文的 this ，作为自己的 this 。
```
<button id="one">one点击(使用function)</button>
<button id="two">two点击(使用箭头函数)</button>
<script>
 var one = document.getElementById('one');
 var two = document.getElementById('two');
 one.onclick = function (){
     console.log(this);   //<button id="one">one点击(使用function)</button>
 }
 two.onclick = ()=>{
     console.log(this);   //window
 }
</script>
```
注意：
- 箭头函数的this永远指向其上下文的 this，任何方法都改变不了其指向，如call(), bind()等。
- 普通函数的this指向调用它的那个对象。
不可以当作构造函数。
也就是说，不可以使用new命令，否则会抛出一个错误。

不可以使用arguments对象。
该对象在函数体内不存在。如果要用，可以用Rest参数代替。

2.5.3.this指向问题测试

<button>点击</button>
<script>
 //指向Window，因为处于Window作用域中(或者说console本身就是window对象的函数)
 window.console.log('script块：'+this);
 //指向Window，因为处于Window作用域中(或者说if是声明在window对象中的)
 if(true){
     console.log('if块：'+this);
 }
 //指向Window，因为处于Window作用域中(或者说此函数是在window对象中的)
 //注意：可以这样写：var fn = function(){}
 //     但不能这样写：let fn = function(){}
 var fn = function(){
     console.log('函数中：'+this);
 }
 window.fn();
 //指向Window，因为处于Window作用域中(或者说setTimeout本身就是window对象的函数)
 window.setTimeout(function(){
     console.log('setTimeout函数中：'+this);
 },1);
 //指向Button对象
 document.getElementsByTagName('button')[0].onclick=function(){
     console.log('button事件处理函数中：'+this);
 }
 /**
  * 测试：点击按钮后，结果为：
  * script块：[object Window]
  * if块：[object Window]
  * 函数中：[object Window]
  * setTimeout函数中：[object Window]
  * button事件处理函数中：[object HTMLButtonElement]
  */
</script>

2.5.4.使用箭头函数简化回调函数

箭头函数的一个用处是简化回调函数
实例1：

let arr = [1,2,3];
// function函数写法
arr = arr.map(function(x) {
 return x * x;
});
// 箭头函数写法
arr = arr.map(x => x * x);

实例2：

let values = [5,2,8];
// function函数写法
let result = values.sort(function(a, b) {
 return a - b;
});
// 箭头函数写法
let result = values.sort((a, b) => a - b);

2.5.5.rest参数与箭头函数结合

let numbers = (...nums) => nums;
numbers(1, 2, 3, 4, 5)     // [1,2,3,4,5]
let headAndTail = (head, ...tail) => [head, tail];
headAndTail(1, 2, 3, 4, 5)  // [1,[2,3,4,5]]

3.ES6中的类（Class）

3.1. 类的基本语法

ES6提供了更接近面向对象（注意：javascript本质上是基于对象的语言）语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。基本上，ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

//定义类
class Point {
 constructor(x, y) {
     this.x = x;
     this.y = y;
 }
 toString() {
     return '(' + this.x + ', ' + this.y + ')';
 }
}
//创建对象
let p = new Point(1,2);
console.log(p.toString());

上面代码定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。也就是说，ES5的构造函数Point，对应ES6的Point类的构造方法。
Point类除了构造方法，还定义了一个toString方法。注意，定义“类”的方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了。另外，方法之间不需要逗号分隔，加了会报错。

注意：生成类的实例对象的写法，要使用new命令。如果忘记加上new，像ES5函数那样调用Class，将会报错。

// 报错
let point = Point(2,3);
// 正确
let point = new Point(2,3);

3.2.constructor方法

constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。

constructor() {}

注意：constructor方法默认返回实例对象（即this）

扩展：constructor方法默认返回实例对象（即this），但也可以指定返回另外一个对象。

class Point {
    constructor(x, y) {
        return new Date();
        //return Object.create(null);
    }
}
let p = new Point();   //返回为Date对象
console.log(p);

Constructor与普通构造函数的区别： 类的构造函数，不使用new是没法调用的，会报错。这是它跟普通构造函数的一个主要区别，后者不用new也可以执行。

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    toString() {
        return '(' + this.x + ', ' + this.y + ')';
    }
}
let p = Point(); //TypeError: Class constructor Point cannot be invoked without 'new'

3.3.this与class（原型）

class：类，是对象的模板。（或者叫：原型） this：当前对象。以上定义，与java中的概念是相同的。但是，由于javascript语言自身的特点，关于class与this，还需要做进一步说明。

注意：在javascript中，在定义类完毕之后，还可以再添加属性和方法。

3.3.1.属性与方法添加到this上

class Point {
    constructor() { }
}
let p = new Point();
p.username = 'zhangsan';
console.log(p.username);    //zhangsan

上面代码中，Point类定义之后，给对象 p 又添加了一个username属性。这是完全可以的。但是要注意：此种方式，仅仅是给对象p添加一个属性，而不是给类添加一个属性。 或者说： 此种方式，仅仅是给对象p的this添加一个属性，而不是给类添加一个属性。

class Point {
    constructor() { }
}
let p1 = new Point();
p1.username = 'zhangsan';
console.log(p1.username);   //zhangsan
let p2 = new Point();
console.log(p2.username);   //undefined

上面例子中，只给对象p1添加了username属性，但没有给类添加属性。所以，p2对象中并没有username属性。

3.3.2.属性与方法添加到类上

class Point {
    constructor() { }
}
Point.prototype.username = 'zhangsan';
let p1 = new Point();
console.log(p1.username);   //zhangsan
let p2 = new Point();
console.log(p2.username);   //zhangsan

上面代码中，使用 Point.prototype方式，给类添加属性。这样，类的所有对象（p1、p2）就都有username属性了。

在javascript中，每一个类都有一个prototype，它就是类的原型，类的所有实例共享一个原型。如果想访问这个原型，可以使用proto指针

class Point {
 constructor() { }
}
let p = new Point();
console.log(p.__proto__);      //注意proto指针的写法
/**
 * 输出结果：
 * {constructor: ƒ}
 *  constructor: class Point  //这里证明：proto指针指向类的原型
 *  __proto__: Object
 */

class Point {
    constructor() { }
}
let p1 = new Point();
let p2 = new Point();
console.log(p1.__proto__===p2.__proto__); //这里证明：类的所有实例共享一个原型

实际上，由于ES5历史原因，程序员更喜欢称之为：属性与方法添加到原型上。

3.3.3.类的静态成员

class Point {
    constructor() { }
}
Point.username = 'zhangsan';
let p = new Point();
console.log(p.username);       //undefined
console.log(Point.username);   //zhangsan

上面代码中，直接使用 Point.username 方式给类添加一个属性，此种方式只是添加了一个静态属性，访问时，只能通过类名才能访问。

4.ES6中的模块化编程

4.1.为什么使用模块化

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

<script src="module1.js"></script>
<script src="module2.js"></script>
<script src="libraryA.js"></script>

上面是最原始的 JavaScript 文件加载方式，如果把每一个文件看做是一个模块，那么他们的接口通常是暴露在全局作用域下，也就是定义在 window 对象中，不同模块的接口调用都是一个作用域中，一些复杂的框架，会使用命名空间的概念来组织这些模块的接口。
这种原始的加载方式暴露了一些显而易见的弊端

全局作用域下容易造成变量冲突
文件只能按照javaScripe的书写顺序进行加载
开发人员必须主观解决模块和代码库的依赖关系
在大型项目中各种资源难以管理，长期积累的问题导致代码库混乱不堪

在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。
在 ES6 之后，ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

4.2.ES6模块化实现

模块功能主要由两个命令构成：export和import。 export命令用于规定模块的对外接口 import命令用于输入其他模块提供的功能

4.2.1.export 命令

export let firstName = 'Michael';
export let lastName = 'Jackson';
export let year = 1958;

上面代码中，使用export命令对外部输出了三个模块。

let firstName = 'Michael';
let lastName = 'Jackson';
let year = 1958;
export { 
    firstName as f,   //可以使用as关键字，重命名对外接口
    lastName, 
    year 
};

上面代码是export命令的另外一种写法。在export命令后面，使用大括号指定所要输出的一组变量。它与前一种写法（直接放置在let语句前）是等价的，但是应该优先考虑使用这种写法。因为这样就可以在脚本尾部，一眼看清楚输出了哪些变量。

export function multiply(x, y) {
    return x * y;
};
export class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    toString() {
        return this.x + ',' + this.y;
    }
};

export命令除了输出变量，还可以输出函数、类（class）。

4.2.2.import命令

使用export命令定义模块对外接口后，其他 JS 文件就可以通过import命令加载这个模块。
```
import { name, age, sex } from './module1.js‘
console.log(name + '\t' + age + '\t' + sex);
```
上面代码的import命令，用于加载module1.js文件，并从中输入变量。import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（ module1.js）对外接口的名称相同。
import命令可以使用as关键字，将输入的变量重命名。
```
import { lastName as surname } from './profile.js';
```
import命令具有提升效果，会提升到整个模块的头部，首先执行
```
foo();
import { foo } from ‘./my_module.js';
```
上面的代码不会报错，因为import的执行早于foo的调用。这种行为的本质是，import命令是编译阶段执行的，在代码运行之前。

import是静态执行，所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构。

// 报错
import { 'f' + 'oo' } from ‘./my_module.js';
// 报错
let module = ‘./my_module.js';
import { foo } from module;
// 报错
if (x === 1) {
import { foo } from './module1.js';
} else {
import { foo } from './module2.js';
}

如果多次重复执行同一句import语句，那么只会执行一次，而不会执行多次
```
import './lodash.js';
import './lodash.js';
```
上面代码加载了两次lodash，但是只会执行一次。

import语句是 Singleton 模式

import { foo } from './my_module.js';
import { bar } from './my_module.js';
// 等同于
import { foo, bar } from './my_module.js';

上面代码中，虽然foo和bar在两个语句中加载，但是它们对应的是同一个my_module实例。也就是说，import语句是 Singleton 模式。

4.2.3.完整实例

profile.js文件

export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;
export function jia(x, y) {
 return x + y;
}
export function jian(x, y) {
 return x - y;
}
export class Point {
 constructor(x, y) {
     this.x = x;
     this.y = y;
 }
 toString() {
     return this.x + '\t' + this.y;
 }
}

app.js文件：

import {firstName,lastName,year,jia,jian,Point} from './profile.js'
console.log(firstName + '\t' + lastName + '\t' + year);
console.log(jia(1,2));
console.log(jian(1,2));
let obj = new Point(1,2)
console.log(obj.toString());

注意： from ‘./profile.js’ 即使是在同一个文件夹中，也必须要写 ./

index.html文件：
```
<script src="js/app.js" type="module"></script>
```
4.3.模块的整体加载
除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。
```
// circle.js文件
export function area(radius) {
 return Math.PI * radius * radius;
}
export function circumference(radius) {
 return 2 * Math.PI * radius;
}
```
```
//main.js整体加载
import * as circle from './circle.js';
console.log('圆面积：' + circle.area(4));
console.log('圆周长：' + circle.circumference(14));
```
4.4.export default 命令
使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。
为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。
```
// export-default.js
export default function  () {
 console.log('foo');
}
```
上面代码是一个模块文件export-default.js，它的默认输出是一个函数。
```
// import-default.js
import customName from './export-default.js';
customName(); // 'foo'
```
上面代码的import命令，可以用任意名称指向export-default.js输出的方法，这时就不需要知道原模块输出的函数名。
注意：
1. 一个js文件中，不能有两个export default命令。
2. import命令后面，不使用大括号。因为只能写一个模块名。

export default命令用在非匿名函数前，也是可以的：

// export-default.js
export default function foo() {
    console.log('foo');
}
// 或者写成
function foo() {
    console.log('foo');
}
export default foo;

上面代码中，foo函数的函数名foo，在模块外部是无效的。加载的时候，视同匿名函数加载。

Java 互联网架构课件（网络）

ES6.0核心技术课件