ES6/ES2015的一些特性的简单使

1.一些常用的ES6的特性：

let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments，这些都是ES6常用的语法。

let, const

这两个的用途与var类似，都是用来声明变量的，但在实际运用中他俩都有各自的特殊用途。

Dome1：

var name = '张三'

while (true) {
    var name = '李四'
    console.log(name)  //李四
    break
}

console.log(name)  //李四

使用var两次输出都是李四，这是因为ES5只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。第一种场景就是你现在看到的内层变量覆盖外层变量。而let则实际上为JavaScript新增了块级作用域。用它所声明的变量，只在let命令所在的代码块内有效。

let name = '张三'

while (true) {
    let name = '李四'
    console.log(name)  //李四
    break
}

console.log(name)  //张三

const也用来声明变量，但是声明的是常量。一旦声明，常量的值就不能改变。

const pi=Math.PI;
pi=2;
console.log(pi);//SyntaxError: Identifier 'pi' has already been declared,当我们尝试去改变用const声明的常量时，浏览器就会报错。

class, extends, super

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 {
    constructor(){
        super()
        this.type = 'cat'
    }
}

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

上面代码首先用class定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。简单地说，constructor内定义的方法和属性是实例对象自己的，而constructor外定义的方法和属性则是所有实力对象可以共享的。

Class之间可以通过extends关键字实现继承，这比ES5的通过修改原型链实现继承，要清晰和方便很多。上面定义了一个Cat类，该类通过extends关键字，继承了Animal类的所有属性和方法。

super关键字，它指代父类的实例（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。

arrow function

用它来写function比原来的写法要简洁清晰很多:

function(i){ return i + 1; } //ES5
(i) => i + 1 //ES6

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

template string

这个东西也是非常有用，当我们要插入大段的html内容到文档中时，传统的写法非常麻烦，所以之前我们通常会引用一些模板工具库，比如art template等等。

我们传统的写法：

$("#result").append(
  " <p>" + data.count + "</p> " +
  "<em>" + data.onSale +
  "</em>"
);

我们要用一堆的'+'号来连接文本与变量，而使用ES6的新特性模板字符串``后，我们可以直接这么来写：

$("#result").append(`
  <p>${data.ID}</p><span>${data.Name}</span>
`);

用`${}`来引用变量，而且所有的空格和缩进都会被保留在输出之中

destructuring(解构)

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

//传统的写法
let cat = 'ken'
let dog = 'lili'
let zoo = {cat: cat, dog: dog}
console.log(zoo)  //Object {cat: "ken", dog: "lili"}

//用ES6完全可以像下面这么写：
let cat = 'ken'
let dog = 'lili'
let zoo = {cat, dog}
console.log(zoo)  //Object {cat: "ken", dog: "lili"}

//反过来可以这么写：
let dog = {type: 'animal', many: 2}
let { type, many} = dog
console.log(type, many)   //animal 2

default, rest

default很简单，意思就是默认值。在调用animal()方法时忘了传参数，传统的做法就是加上这一句type = type || 'cat'来指定默认值。

//传统做法：
function animal(type){
    type = type || 'cat'
    console.log(type)
}
animal()

//使用ES6的写法：
function animal(type='cat'){

    console.log(type)
}
animal()

rest

function animals(...types){
    console.log(types)
}
animals('cat', 'dog', 'fish') //["cat", "dog", "fish"]