ES6新特性总结

首先关注一下阮一峰 - 编程风格。发现自己之前写了好多不符合要求的代码，罪过罪过……

一、let和const命令

1. let命令

• 不存在变量提升
• 暂时性死区
• 不允许重复声明

2. const命令

• 不存在变量提升
• 暂时性死区
• 不允许重复声明
• 声明常量，一旦声明其值就不能改变

二、解构赋值

1. 数组

var [a,b,c] = [1,2,3]
a  //1
b  //2
c  //3
var [x,y=2] = [1]
x  //1
y  //2

2. 对象

var {foo,bar} = {foo:"aaa",bar:"bbb"}
foo  //aaa
bar  //bbb
var {foo:zzy} = {foo:"aaa",bar:"bbb"}
zzy  //aaa

三、模板字符串

1. 一般用法

var name = "zzy"
var me = `my name is ${name}`
me  //my name is zzy

2. 换行

3. 表达式

四、函数的默认参数

function fc(x=1){
  console.log(x)
}  
fc()  //1
fc(2)  //2

五、箭头函数

function sum(a,b){
  return a+b
}
(a,b)=>{a+b}

1. 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
2. 不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
3. 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
4. 不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

六、扩展运算符

将一个数组转为用逗号分隔的参数序列

var a = [1,2,3]
var b = [...a,4,5,6]
b  //[1,2,3,4,5,6]
console.log(...[1,2,3])  //1 2 3

七、类和继承

（一）Class

1. 概述

ES5中，生成实例对象的方法是构造函数

function Point(a,b){
  this.a = a
  this.b = b
}
Point.prototype.join = function(){
  return this.a+" and "+this.b
}
var p = new Point(1,2)

ES6中，加入了类似其他面向对象编程语言的语法糖

class Point {
  constructor(x,y) {
    this.x = x
    this.y = y
  }
  join() {
    return this.x+" and "+this.y
  }
}

2. getter和setter

class Point {
  constructor(element) {
    this.element = x
  }
  get content(){
    return this.element
  }
  set content(value){
    return this.element = value
  }
}

3. 静态方法

static关键字用来定义一个类的一个静态方法。调用静态方法不需要实例化该类，但不能通过一个类实例调用静态方法。

（二）Extends

ES5利用原型链的写法，将子类的原型设置成父类的实例

function Student(name,age) {
  this.name = name
  this.age = age
}
Student.prototype.grow = function() {
  return `your age is ${this.age+1}`
}
//继承
function Zzy(name,age,height){
  this.height = height
  Student.call(this,name,age) 
}
Zzy.prototype = new Student()
Zzy.prototype.constructor = Zzy

var zzy = new Zzy("zzy",17,185)

ES6新写法

class Student{
  constructor(name,age){
    this.name = name
    this.age = age
  }
  grow(){
    return `your age is ${this.age+1}`
  }
}
class Zzy extends Student{
  constructor(name,age,height){
    super(name,age)
    this.height = height
  }
}

var zzy = new Zzy("zzy",17,185)

八、Promise

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。

1. 对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。

2. 一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。

基本用法（具体例子在手写ajax里）

//创造promise实例
var promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

//用then方法分别指定resolved状态和rejected状态的回调函数。
promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

九、async

这部分我要写在异步和回调里！

十、Module

1. export 命令

export命令用于规定模块的对外接口

// 写法一
export var m = 1

// 写法二
var m = 1
export {m}

// 写法三
var n = 1
export {n as m}

2. import 命令

// 写法一
import {firstName, lastName, year} from './profile.js'

// 写法二
import { lastName as surname } from './profile.js'

// 写法三
import * from './profile.js'

3. export default