es6中的新特性

es6中最常用的当属箭头函数

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}

除了上面的简洁的写法以外,es6对于this的指向问题也发生了变化,this指向的是他的上下文对象

class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        setTimeout(function(){
            console.log(this.type + ' says ' + say)
        }, 1000)
    }
}

 var animal = new Animal()
 animal.says('hi')  //undefined says hi

由于定时器的调用,this的指向发生变换,(定时器的调用需要把里面的事件加载到异步执行的序列当中,当执行完代码,this的质就指向的是window,这里我们需要强制绑定一下this的指向,主要的方法有下面两种)

1.第一种是将this传值给self,再用self来代替this

says(say){
       var self = this;
       setTimeout(function(){
           console.log(self.type + ' says ' + say)
       }, 1000)

第二种使用bind(this)来绑定this的指向

   says(say){
       setTimeout(function(){
           console.log(this.type + ' says ' + say)
       }.bind(this), 1000)

现在我们可以使用箭头函数而不用处理thisd指向问题

class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        setTimeout( () => {
            console.log(this.type + ' says ' + say) //this的指向就是他的上下文对象就是实力话出来的animal对象
        }, 1000)
    }
}
 var animal = new Animal()
 animal.says('hi')  //animal says hi

当我们使用箭头函数时，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，它的this是继承外面的，因此内部的this就是外层代码块的this。

template string 模板字符串

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

传统的写法
$("#result").append(
 "There are <b>" + basket.count + "</b> " +
 "items in your basket, " +
 "<em>" + basket.onSale +
 "</em> are on sale!"
);

但是es6的新特性我们就可以这样写

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

用反引号（\）来标识起始，用${}`来引用变量，

destructuring

es6允许按照一定的模式,从数组和对象中提取值,对变量进行赋值
最常用的是数组和对象的解构

ea6中的模块化

假设我们有两个js文件: index.js和content.js,现在我们想要在index.js中使用content.js返回的结果，我们要怎么做呢？

//content.js
export default 'A cat'
//index.js
import animal from './content'

//index.js
import { say, type } from './content'  
let says = say()
console.log(`The ${type} says ${says}`)  //The dog says Hello

这里输入的时候要注意:大括号里面的变量名,必须与被导入模块（content.js）对外接口的名称相同。

终极秘籍

考虑下面的场景：上面的content.js一共输出了三个变量（default, say, type）,假如我们的实际项目当中只需要用到type这一个变量，其余两个我们暂时不需要。我们可以只输入一个变量：

 import { type } from './content'   

由于其他两个变量没有被使用，我们希望代码打包的时候也忽略它们，抛弃它们，这样在大项目中可以显著减少文件的体积。

ES6帮我们实现了！