ECMAScript 6

ECMAScript 6 简介

2011 年，ECMAScript 5.1 版发布后，就开始制定 6.0 版了。因此，ES6 这个词的原意，就是指 JavaScript 语言的下一个版本。

但是，因为这个版本引入的语法功能太多，而且制定过程当中，还有很多组织和个人不断提交新功能。事情很快就变得清楚了，不可能在一个版本里面包括所有将要引入的功能。常规的做法是先发布 6.0 版，过一段时间再发 6.1 版，然后是 6.2 版、6.3 版等等。

但是，标准的制定者不想这样做。他们想让标准的升级成为常规流程：任何人在任何时候，都可以向标准委员会提交新语法的提案，然后标准委员会每个月开一次会，评估这些提案是否可以接受，需要哪些改进。如果经过多次会议以后，一个提案足够成熟了，就可以正式进入标准了。这就是说，标准的版本升级成为了一个不断滚动的流程，每个月都会有变动。

标准委员会最终决定，标准在每年的 6 月份正式发布一次，作为当年的正式版本。接下来的时间，就在这个版本的基础上做改动，直到下一年的 6 月份，草案就自然变成了新一年的版本。这样一来，就不需要以前的版本号了，只要用年份标记就可以了。

ES6 的第一个版本，就这样在 2015 年 6 月发布了，正式名称就是《ECMAScript 2015 标准》（简称 ES2015）。2016 年 6 月，小幅修订的《ECMAScript 2016 标准》（简称 ES2016）如期发布，这个版本可以看作是 ES6.1 版，因为两者的差异非常小（只新增了数组实例的includes方法和指数运算符），基本上是同一个标准。根据计划，2017 年 6 月发布 ES2017 标准。

因此，ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等，而 ES2015 则是正式名称，特指该年发布的正式版本的语言标准。

-- 摘自https://es6.ruanyifeng.com/#docs/intro

附录：

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

ES6基础编程

let命令

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

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 只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。下面场景中，内层变量可能会覆盖外层变量。

javascript

var tmp = new Date();

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

fn(); //undefined

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

Let不存在变量提升

javascript

// 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的隐患。

Let暂时性死区

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

javascript

var temp = 123;

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

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

const 命令

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

javascript

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

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

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

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

html

<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 引入了模板字符串解决这个问题

html

<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 模板字符串中必须要使用反引号。

函数的扩展rest参数

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

javascript

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 方法的例子

javascript

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

函数的扩展-箭头函数

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

javascript

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

//ES6定义箭头函数
var f = v => v

箭头函数的语法

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

javascript

let f = () => 5;

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

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

如果只有一个参数，那么圆括号就可以省略了
javascript
```
let f = str => {
   console.log(str);
}

f('hello');
```
1
2
3
4
5
如何函数体中的代码只有一句，那么大括号可以省略
javascript
```
let f = str => console.log(str);
f('hello');
```
1
2

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

javascript

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

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

由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号。
javascript
```
let getTempItem = id => ({ id:id, name:'Temp' })
```
1

使用箭头函数的注意点

箭头函数有几个使用注意点。

函数体内的 this 对象。
函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
或者说：箭头函数当方法使用时没有定义 this 绑定，而是捕获所在上下文的 this ，作为自己的 this 。

html

<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 参数代替。

this指向问题测试

javascript

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

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

箭头函数的一个用处是简化回调函数

实例 1：

javascript

let arr = [1,2,3];

// function函数写法
arr = arr.map(function(x) {
    return x * x;
});

// 箭头函数写法
arr = arr.map(x => x * x);

实例 2：

javascript

let values = [5,2,8];

// function函数写法
let result = values.sort(function(a, b) {
    return a - b;
});

// 箭头函数写法
let result = values.sort((a, b) => a - b);

rest参数与箭头函数结合

javascript

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]]

ES6中的类(Class)

类的基本语法

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

javascript

//定义类
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，将会报错。

javascript

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

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

constructor方法

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

javascript

constructor() {}

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

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

javascript

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

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

javascript

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'

this与class（原型）

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

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

属性与方法添加到this上

javascript

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

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

javascript

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 属性。

属性与方法添加到类上

javascript

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 指针

javascript

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历史原因，程序员更喜欢称之为：属性与方法添加到原型上。

类的静态成员

javascript

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

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

课后作业

1、声明一个表示人的对象，该对象有年龄和姓名两个属性，尝试使用 ES6 模板字符串语法将该对象信息显示在页面上。

2、尝试将以下函数改造成箭头函数

javascript

function m1(){
  return 1;
}
function m2(arg){
  return 2;
}
function m4(arg1,arg2){
  console.log("不带返回值的方法，输出："+(arg1+arg2));
}
function m5(...args){
  return {
    pname:'li'
  }
}

3、建立名为 exdemo.js 的文件，在其中利用 export 关键字声明字符串型变量 x、函数 sum(x,y)（实现求和功能）、表示产品的 default 对象（具备 pname 和 price 两个属性）。在 indemo.js 里导入 exdemo.js 里的全部变量、函数和对象并运行。建立一个 html 文档，导入 indemo.js 并查看运行结果。

4、建立一个 Person 类，该类具备年龄 age 和姓名 name 两个属性，以及一个输出人员信息的方法 toString()。声明两个人员对象并输出人员信息，尝试利用原型追加属性爱好 hobby 并赋值为“棋类”，重写 toString()方法并输出两个对象的年龄、姓名和爱好信息。

ECMAScript 6 ​

ECMAScript 6 简介 ​

ES6基础编程 ​

let命令 ​

let命令存在块级作用域 ​

Let不存在变量提升 ​

Let暂时性死区 ​

const 命令 ​

字符串的扩展-模板字符串 ​

函数的扩展rest参数 ​

函数的扩展-箭头函数 ​

箭头函数的语法 ​

使用箭头函数的注意点 ​

this指向问题测试 ​

使用箭头函数简化回调函数 ​

rest参数与箭头函数结合 ​

ES6中的类(Class) ​

类的基本语法 ​

constructor方法 ​

this与class（原型） ​

属性与方法添加到this上 ​

属性与方法添加到类上 ​

类的静态成员 ​

课后作业 ​

参考资料 ​

ECMAScript 6

ECMAScript 6 简介

ES6基础编程

let命令

let命令存在块级作用域

Let不存在变量提升

Let暂时性死区

const 命令

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

函数的扩展rest参数

函数的扩展-箭头函数

箭头函数的语法

使用箭头函数的注意点

this指向问题测试

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

rest参数与箭头函数结合

ES6中的类(Class)

类的基本语法

constructor方法

this与class（原型）

属性与方法添加到this上

属性与方法添加到类上

类的静态成员

课后作业

参考资料