教你学会常用的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;

// 输入
inport 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

参考资料

• ECMAScript6入门

• ES6在线编辑器

• ES6核心语法