ES6核心

以下为ES6特性20%的语法，但是日常使用中基本占了80%  附：参考前辈总结

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

a、var 和 let

都是用来声明变量的，区别是let是块级作用域，对var做一些不合理场景补充，场景一：内层变量覆盖外层变量；场景二：用来计数的循环变量泄露为全局变量，可用块级作用域或者闭包解决，ES5只有全局作用域和函数作用域

b、const用来声明常量，而且一旦声明不可更改

c、class 、extends 、super

` 新的class写法让对象原型的写法更加清晰，更像面向对象编程的写法，也更加通俗易懂

//定义了类，constructor是构造方法，里面定义的属性和方法是实例对象自己的，外面的属性和方法是实例对象可以共享的

class Animal { 

              constructor(){ 

//this关键字代表实例对象

 this.type = 'animal' 

    } 

 says(say){

 console.log(this.type + ' says ' + say) 

 } 

} 

 let animal = new Animal() 

animal.says('hello') //animal says hello 

//class之间通过extends关键字实现继承，而ES5要通过修改原型链实现继承

 class Cat extends Animal {

 constructor(){ 

//super关键字指代父类的实例（即父类的this对象），子类没有自己的this对象，而是继承父类的this对象，然后对其加工，所以必须调用，否则新建实例报错

 super() 

 this.type = 'cat' 

 }

 }

 let cat = new Cat() 

 cat.says('hello') //cat says hello

d、arrow function

比原来写function要清晰很多，

function (i){  return i + 1   } //ES5

(I) => i + 1  //ES6  如果比较复杂，则要用{}把代码包起来

关于this的问题，可以 var self = this, 可以在function(){}.bind(this)，也可以使用箭头函数，体内的this对象就是定义时所在的对象，而不是使用时所在对象

 

e、template String

插入大段HTML到文档中，传统的写法是用+，ES6使用反引号（'）来标识起始，用${}来引用变量，而且所有的空格和缩进都会保留在输出之中

 

f、destructuring  

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

//传统

let cat = 'ken'

let dog = 'lili'

let zoo = { cat: cat , dog: dog}

//ES6

let cat = 'ken'

let dog = 'lili'

let zoo = { cat , dog}

//ES6或者

let dog = { type : 'animal' , many : 2}

let { type, many} = dog

console.log( type, many) //animal 2

 

g、default , rest

//传统

function (type){

type = type || 'cat'

console.log(type)

}

//ES6 default

function (type = 'cat'){

console.log(type)

}

//ES6  rest

function animal(...types){

console.log(type)

}

animal( 'cat' , 'dog' , 'fish' ) // [ 'cat' , 'dog' , 'fist']