ES6/ES2015核心内容

最常用的ES6特性

let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments

let、const

let、const 的用途和 var 相似，都是用来声明变量，但各自特性并不相同。

let 的特性：

只在 let 所在代码块有效
创建块级作用域，并只在块级作用域内有效
没有变量提升
不允许在相同作用域重复声明

const 的特性：

声明一个只读常量，声明后就初始化，无法更改，以后也无法赋值
创建块级作用域，并只在块级作用域内有效
声明的常量不提升
不允许在相同作用域重复声明

const 实际保证的是声明的变量的内存地址不可改变。

class、extends、super

ES6 提供了更接近传统语言的写法，引入了 Class 这个概念。 ES6 的类可以看作构造函数的另一种写法。

//创建对象
// ES5
// 构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 原型方法
Person.prototype.getName = function() {
  return this.name
}

// ES6
class Person {
  constructor(name, age) {  // 构造函数
    this.name = name;
    this.age = age;
  }

  getName() {  // 原型方法
    return this.name
  }
}

//继承
class Animal {
    constructor(){
        this.type = 'animal';
    }
    says(say){
        console.log(this.type + ' says ' + say);
    }
}

let animal = new Animal();
animal.says('hello'); // animal says hello

class Cat extends Animal {
    construtor(){
        super(); // 继承
        this.type = 'cat';
    }
}

let cat = new Cat();
cat.says('hello'); // cat says hello

上面代码首先定义了一个类，拥有一个默认的方法 constructor ，这是构造方法，constructor 内定义的方法和属性是实例对象自己的，而constructor 外定义的方法和属性是所有实例对象可以共享的。

Class 之间通过 extends 继承，继承父类的所有属性和方法。

super 指代父类的实例，也就是父类的 this 对象，子类必须在 constructor 方法类调用 super 方法，否则报错。因为子类没有自己的 this 对象，如果不调用，子类得不到 this 对象。

Class 注意点：

类的内部定义的方法，都是不可枚举的（和 ES5 不同）
必须有 constructor 方法，没有显式定义，则默认添加空的 constructor 方法
类的构造函数，必须使用 new 调用，普通构造函数不适用也可执行
不存在变量提升
类的方法内部，this 默认指向类的实例
类的内部，默认是严格模式

arrow function箭头函数

//ES5
function(x,y) {
    x++;
    y--;
    return x + y;
}
//ES6
(x,y) => {x++; y-- ; return x+y}

在箭头函数中，函数体内的 this 对象，就是定义时所在的对象，而不是在调用时的对象。

因为箭头函数内部没有自己的 this 对象，它的 this 对象继承外面的，因此内部的 this 就是外层代码块的 this。

template string 模板字符串

插入大段的 html 内容时使用：

$('#app').append(`
    There are <b>${basket.count}</b> items
    in your basket, <em>${basket.onSale}</em>
    are on sale!
`);

用反引号 (``) 来标识起始，用 ${} 来引用变量，并且所有空格和输出都会保存在爱输出之中。

变量的解构赋值

1.数组的解构赋值

完全解构

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

解构不成功

let [x, y] = [1];   // x = 1; y = undefined;

不完全解构

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

2.对象的解构赋值

对象的解构不同于数组的解构，对象的解构赋值是先找到同名变量，然后赋值给对应的变量。赋值的是后者，前者用于匹配。

let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

let { baz } = { foo: "aaa", bar: "bbb" };
baz// undefined

3.字符串的解构赋值

const [a, b, c, d, e] = "hello";
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

default、rest、扩展运算符

default是默认值，在 ES6 之中可以指定默认值，可以在解构、函数参数之中传入默认值。

//ES5
function animal(type){
    type = type || 'cat';  
    console.log(type);
}
animal()

//ES6
function animal(type = 'cat') {
    console.log(type);
}

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

function add(...values) {
    let sum = 0;
    for (var val of values) {   //for...of是遍历值；for...in是遍历下标
        sum += val;
    }
    retutn sum;
}

add(2, 3, 5) // 10

rest 注意点：

rest 参数后不能有其他参数，只能是最后一个参数
函数的 length 属性，不包括 rest 参数

扩展运算符（spread）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

console.log(...[1, 2, 3])
// 1 2 3
console.log(1, ...[2, 3, 4], 4)
// 1 2 3 4 5
[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 10, 20, 30];

// 这样，arr2 就变成了[1, 2, 3, 10, 20, 30];

Promises

Promise 用于更优雅地处理异步请求。比如发起异步请求：

fetch('/api/todos')
  .then(res => res.json())
  .then(data => ({ data }))
  .catch(err => ({ err }));

定义 Promise ：

const delay = (timeout) => {
  return new Promise(resolve => {
    setTimeout(resolve, timeout);
  });
};

delay(1000).then(_ => {
  console.log('executed');
});