教你学会常用的ES6语法
教你学会常用的ES6语法，不常用的遇到再手册，当然有时间还是整体看一遍官方文档。
let和const命令
let命令
不存在变量提升
console.log(ss); //undefined
console.log(xx); //报错
var ss = 'a';
let xx = 'b';
var存在变量提升，实际执行
var ss;
console.log(ss); //undefined
console.log(xx); //报错
ss = 'a';
let xx = 'b';
暂时性死区
ES6明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。
凡是在声明之前就使用这些变量，就会报错。
不允许重复声明
let不允许在相同作用域内，重复声明同一个变量。无论是使用var 或者 let
块级作用域与函数声明
ES6引入了块级作用域，明确允许在块级作用域之中声明函数。
并且ES6规定，块级作用域之中，函数声明语句的行为类似于let，在块级作用域之外不可引用。
const命令
依然存在以下属性
- 暂时性死区
- 不存在变量提升
- 块级作用域
- 不允许重复声明
新属性
- 后续不能进行赋值操作
- 一旦声明变量，就必须立即初始化
顶层对象的属性
ES6为了改变这一点，一方面规定，为了保持兼容性，var命令和function命令声明的全局变量，依旧是顶层对象的属性；另一方面规定，let命令、const命令、class命令声明的全局变量，不属于顶层对象的属性。也就是说，从ES6开始，全局变量将逐步与顶层对象的属性脱钩。
var a = 1;
// 如果在Node的REPL环境，可以写成global.a
// 或者采用通用方法，写成this.a
window.a // 1
let b = 1;
window.b // undefined
变量的解构赋值
ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
（个人理解就是对象、字符串、数组的取值和赋值），有需要看参考资料
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关键字实现继承
- super关键字，它指代父类的实例（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会报错。
- 子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。
ES6的继承机制，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。
arrow function
function(x, y) {
x++;
y--;
return x + y;
}
(x, y) => {x++; y--; return x+y}
ES5与ES6对比
ES5： function name(参数) { 运算表达式; return 表达式 }
ES6： (参数) => { 运算表达式; return 表达式 }
箭头函数解决this指向问题
class Animal {
constructor(){
this.type = 'animal'
}
says(say){
setTimeout( () => {
console.log(this.type + ' says ' + say)
}, 1000)
}
}
var animal = new Animal()
animal.says('hi') //animal says hi
当我们使用箭头函数时，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，它的this是继承外面的，因此内部的this就是外层代码块的this。
template string
这个东西也是非常有用，当我们要插入大段的html内容到文档中时，传统的写法非常麻烦，所以之前我们通常会引用一些模板工具库，比如mustache等等。
# ES5
$("#result").append(
"There are <b>" + basket.count + "</b> " +
"items in your basket, " +
"<em>" + basket.onSale +
"</em> are on sale!"
);
我们要用一堆的'+'号来连接文本与变量，而使用ES6的新特性模板字符串``后，我们可以直接这么来写：
# ES6
$("#result").append(`
There are <b>${basket.count}</b> items
in your basket, <em>${basket.onSale}</em>
are on sale!
`);
用反引号（``）来标识起始，用 ${ }来引用变量，而且所有的空格和缩进都会被保留在输出之中.
default, rest
default很简单，意思就是默认值。大家可以看下面的例子，调用animal()方法时忘了传参数，传统的做法就是加上这一句type = type || 'cat' 来指定默认值。
function animal(type = 'cat'){
console.log(type)
}
animal()
最后一个rest语法也很简单，直接看例子：
function animals(...types){
console.log(types)
}
animals('cat', 'dog', 'fish') //["cat", "dog", "fish"]
import export
es6的module模块功能主要由两个命令构成：export 和 import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。
在es6之前为解决上面提到的问题，我们得利用第三方提供的一些方案，主要有两种CommonJS(服务器端)和AMD（浏览器端，如require.js）。
ES6模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS和AMD模块，都只能在运行时确定这些东西。
对比CommonJs 、AMD和ES6
假设我们有两个js文件: index.js 和 content.js,现在我们想要在index.js中使用content.js返回的结果，我们要怎么做呢？
AMD写法
content.js define('content.js', function(){ return 'A cat'; }) index.js require(['./content.js'], function(animal){ console.log(animal); //A cat })
CommonJS写法
content.js module.exports = 'A cat' index.js var animal = require('./content.js')
ES6写法
content.js export default 'A cat' index.js import animal from './content'
export
一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用 export 关键字输出该变量。下面是一个JS文件，里面使用export命令输出变量。
// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
# 使用 as关键字 可以重命名对外接口export {firstName, lastName as ss, year};
注意
export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。
import
import命令具有提升效果，会提升到整个模块的头部，首先执行。
fu();
import { foo as fu} from 'my_module';
注意
export命令规定的是对外的接口，import接口需要与export对外接口对应。
ES6 module的其他用法
export default命令
import $ from 'jquery'; #写法是不是很常见？
使用 import 命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。
为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。
// 输出 content.js
function foo() {
console.log('foo');
}
export default foo;
// 输入
import aa form 'content.js';
注意
export default默认输出只有一个，对应import文件不用使用{}，由于默认输出只有一个，所以export default 只能使用一次
module的整体加载
除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。
# 输出 test.js
function a (){
console.log('a');
}
function b (){
console.log('b');
}
export {a,b};
# 输入
import * as obj from 'test.js'
obj.a();
obj.b();
ESLint
ESLint是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。
- 全局安装ESLint
$ npm install -g eslint
- 安装Airbnb语法规则
$ npm install -g eslint-conifg-airbnb
- 项目的根目录下创建.eslintrc 文件
{
"extends": "eslint-config-airbnb"
}
- 使用ESLint检查某个文件
$ eslint index.js
