ES6新特性

1.class类

在ES6中，class (类)作为对象的模板被引入，可以通过 class 关键字定义类。
class 的本质是 function。
它可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法

基本用法

class Point {
    constructor(name) {
        this.name = name;
    }
    
    showName() {
        console.log(this.name) 
    }
}

• 类的内部所有定义的方法，都是不可枚举的，除了在constructor内部的属性，其他定义的都在原型上
• constructor一定存在，没有显式添加，会自动添加
• 类必须用new调用，构造函数不用new也可以
• 类不存在变量提升

类继承

class ColorPoint extends Point {
    constructor(action,name) {
        super(name);//先调用super才能在后面使用this
        this.action = action;
        
    }
    
    showParentName(){
        console.log(super.name);
    }
}

子类必须调用super()，可以用作函数代表父类构造函数，也可以用作父类实例对象，但是父类实例上的属性和方法不能通过super调用

2.函数默认参，不定参数

function log(x, y = 'World') {
  console.log(x, y);
}

function f(...values){
    console.log(values.length);
}
f(1,2);      //2
f(1,2,3,4);  //4

3.箭头函数

一个参数，一条语句
var f = v => v;

没有参数或者多个参数
var f = （） => 5;
var f = （v,i)=> v+i;

• 如果返回一个对象，必须用大括号包裹
• 函数体内的this对象，就是定义时所在的对象
• 不可以当作构造函数
• 不可以使用arguments对象

4. async函数

async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。

async function helloAsync(){
    return "helloAsync";
  }
  
console.log(helloAsync())  // Promise {<resolved>: "helloAsync"}
 
helloAsync().then(v=>{
   console.log(v);         // helloAsync
})

await 操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用。

function testAwait (x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}
 
async function helloAsync() {
  var x = await testAwait ("hello world");
  console.log(x); 
}
helloAsync ();
// hello world

5.模块化

特点：

• 能导入导出各种类型的变量
• 每一个模块都是单例的，加载相同目录下的文件，只加载一次

export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

/** 定义模块 math.js **/
var basicNum = 0;
var add = function (a, b) {
    return a + b;
};
export { basicNum, add };
/** 引用模块 **/
import { basicNum, add } from './math';
function test(ele) {
    ele.textContent = add(99 + basicNum);
}


export default命令，为模块指定默认输出。
// export-default.js
export default function () {
  console.log('foo');

// import-default.js
import customName from './export-default';
customName(); // 'foo'

6数组扩展运算符

运算符将一个数组，变为参数序列
应用：

• 合并数组
• 字符串转数组[…‘hello’]
• 复制数组
• 类数组转换真数组

7.字符串模版

let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

• 模版字符串用反引号包裹
• 变量或者方法调用放在$()中
• 空格和换行会被保留，可以用trim()去除
• 如果需要显示反引号，需要转义

8.Promise

特点：
1.对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态
2.只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。
封装ajax实例

const getJSON = function(url) {
  const promise = new Promise(function(resolve, reject){
    const handler = function() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };
    const client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();

  });

  return promise;
};

getJSON("/posts.json").then(function(json) {
  console.log('Contents: ' + json);
}, function(error) {
  console.error('出错了', error);
});

9.变量解构赋值

对象解构赋

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
// foo = 'aaa'
// bar = 'bbb'
 
let { baz : foo } = { baz : 'ddd' };
// foo = 'ddd'

数组解构赋值

let [a, b, c] = [1, 2, 3];
// a = 1
// b = 2
// c = 3

10.let，const

• 块级作用域
• 不存在变量提升
• 暂时性死区（必须先声明再使用）
• 不允许重复声明