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帮我们实现了！
