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