es6涉及的那点东西

前言

ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript
2015。
也就是说，ES6就是ES2015。
目前并不是所有浏览器都能兼容ES6全部特性，我们可以使用Babel工具来转换成es5
Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码

最常用的ES6特性
let, const, class, extends, super, arrow functions, template string,
destructuring, default, rest arguments

一、let 、const命令

1、let用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效
2、不存在变量提升，let不像var那样会发生“变量提升”现象。所以，变量一定要在声明后使用，否则报错。
console.log(foo); // 输出undefined console.log(bar); // 报错ReferenceError var foo
=2;let bar =2;
3、在let和const之间，建议优先使用const，尤其是在全局环境，不应该设置变量，只应设置常量。

const声明常量还有两个好处，一是阅读代码的人立刻会意识到不应该修改这个值，二是防止了无意间修改变量值所导致的错误。

4、ES6明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。
总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的。也就是“暂时性死区”。

二、es6模块（module）


JavaScript一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如Ruby的require、Python的import，甚至就连CSS都有@import，但是JavaScript任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。

这有可能导致两个问题：

* 一方面js代码变得很臃肿，难以维护
* 另一方面我们常常得很注意每个script标签在html中的位置，因为它们通常有依赖关系，顺序错了可能就会出bug
* 在es6之前为解决上面提到的问题，我们得利用第三方提供的一些方案，主要有两种CommonJS(服务器端)和AMD（浏览器端，如require.js）。

在ES6之前，社区制定了一些模块加载方案，最主要的有CommonJS和AMD两种。前者用于服务器，后者用于浏览器。ES6在语言规格的层面上，实现了模块功能，而且实现得相当简单，完全可以取代现有的CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。

传统的写法
首先我们回顾下require.js的写法。假设我们有两个js文件:
index.js和content.js,现在我们想要在index.js中使用content.js返回的结果，我们要怎么做呢？
首先定义：
//content.js define('content.js', function(){ return'A cat'; })
然后require：
//index.js require(['./content.js'], function(animal){ console.log(animal);
//A cat })
CommonJS写法
//index.js var animal = require('./content.js') //content.js module.exports =
'A cat'
ES6的写法
//index.js import animal from'./content'//content.js export default'A cat'
// ES6模块
import { stat, exists, readFile } from 'fs';

上面代码的实质是从fs模块加载3个方法，其他方法不加载。这种加载称为“编译时加载”，即ES6可以在编译时就完成模块加载，效率要比CommonJS模块的加载方式高。当然，这也导致了没法引用ES6模块本身，因为它不是对象。

浏览器使用ES6模块的语法如下。
<script type="module" src="foo.js"></script>
上面代码在网页中插入一个模块foo.js，由于type属性设为module，所以浏览器知道这是一个ES6模块。

Node的默认模块格式是CommonJS，目前还没决定怎么支持ES6模块。所以，只能通过Babel这样的转码器，在Node里面使用ES6模块。

ES6的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";。

1、export命令

模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。
一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。例如，
// profile.js export var firstName ='Michael'; export var lastName ='Jackson';
export var year =1958;
也可以是下面这种写法（优先考虑使用），
// profile.js var firstName ='Michael';var lastName ='Jackson';var year =1958;
export {firstName, lastName, year};
export命令除了输出变量，还可以输出函数或类（class）。
export function multiply(x, y){return x * y;};
可以使用as关键字重命名
function v1(){...} function v2(){...} export { v1 as streamV1, v2 as streamV2,
v2 as streamLatestVersion };

注意：export命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错，import命令也是如此，这是因为处于条件代码块之中，就没法做静态优化了，违背了ES6模块的设计初衷。下面代码中，export语句放在函数之中，结果报错。
function foo(){ export default 'bar' // SyntaxError } foo()
2、import命令

使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）。
import {firstName, lastName, year} from './profile';
上面代码的import命令，就用于加载profile.js文件，并从中输入变量。import命令接受一个对象（用大括号表示），里面指定要从其他模块导入的变量名

使用as关键字将输入的变量重新命名
import { lastName as surname } from './profile';
import命令具有提升效果，会提升到整个模块的头部，首先执行。
foo(); import { foo } from 'my_module';
上面的代码不会报错，因为import的执行早于foo的调用。

import语句会执行所加载的模块，但是不输入任何值。
import 'lodash';
import 也可以引用文件夹/目录
如import router from './router'
这里router是个目录 里面有个index.js文件

3、模块整体加载

circle模块有2个方法
// circle.js export function area(radius){return Math.PI * radius * radius;}
export function circumference(radius){return2* Math.PI * radius;} 通过使用*号加载整个模块
import * as circle from './circle'; console.log('圆面积：'+ circle.area(4));
console.log('圆周长：'+ circle.circumference(14));
三、class类

1、class的基本用法
ES6提供了更接近传统语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类
//定义类 class Point{ constructor(x, y){ this.x = x; this.y = y; } toString(){
return'('+this.x +', '+this.y +')'; } }
constructor这就是构造方法，而this关键字则代表实例对象
定义“类”的方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了。另外，方法之间不需要逗号分隔，加了会报错。

使用时直接对类使用new命令
class Bar{ doStuff(){ console.log('stuff'); } } var b =new Bar(); b.doStuff()
// "stuff"
2、constructor构造方法


constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。
constructor(){}

3、class表达式

与函数一样，类也可以使用表达式的形式定义。
const MyClass = class Me{ getClassName(){ return Me.name; } };
这个类的名字是MyClass而不是Me，Me只在Class的内部代码可用，指代当前类。

如果类的内部没用到的话，可以省略Me
const MyClass = class {/* ... */};
采用Class表达式，可以写出立即执行的Class。
let person =newclass{ constructor(name){ this.name = name; } sayName(){
console.log(this.name); } }('张三'); person.sayName(); // "张三"
4、class类继承

通过extends关键字实现继承
class ColorPoint extends Point{}
四、arrow function箭头函数
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 }
在对象方法中使用this

传统的写法需要将this传给self,再用self来指代this
says(say){ var self = this; setTimeout(function(){ console.log(self.type + '
says ' + say) }, 1000)
使用es6的写法
classAnimal { 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等等
$("#result").append( "There are <b>" + basket.count + "</b> " + "items in your
basket, " + "<em>" + basket.onSale + "</em> are on sale!" );
我们要用一堆的'+'号来连接文本与变量，而使用ES6的新特性模板字符串`后 ``` $("#result").append(
There are ${basket.count} items
in your basket, ${basket.onSale}
are on sale!
); ``` 用反引号（\）来标识起始，用${}来引用变量，而且所有的空格和缩进都会被保留在输出之中

六、default, rest

default很简单，意思就是默认值，调用animal()方法时忘了传参数，传统的做法就是加上这一句type = type || 'cat' 来指定默认值
function animal(type){ type = type || 'cat' console.log(type) } animal()
用ES6我们而已直接这么写：
function animal(type = 'cat'){ console.log(type) } animal()
rest语法也很简单，看例子：
function animals(...types){ console.log(types) } animals('cat', 'dog', 'fish')
//["cat", "dog", "fish"]
参考阅读

https://segmentfault.com/a/1190000004365693#articleHeader7
http://es6.ruanyifeng.com/

• « 上一篇：Tensorflow的迭代次数到底应该设为多少？
• » 下一篇：Docker搭建LNMP开发环境（基础篇）