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

1、let 、const命令

一、let用法相似于var，可是所声明的变量，只在let命令所在的代码块内有效
二、不存在变量提高，let不像var那样会发生“变量提高”现象。因此，变量必定要在声明后使用，不然报错。

console.log(foo); // 输出undefined
console.log(bar); // 报错ReferenceError
var foo =2;let bar =2;

三、在let和const之间，建议优先使用const，尤为是在全局环境，不该该设置变量，只应设置常量。

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

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

2、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";。

一、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()

二、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文件

三、模块总体加载

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));

3、class类

一、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"

二、constructor构造方法

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

三、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(); // "张三"

四、class类继承

经过extends关键字实现继承

class ColorPoint extends Point{}

4、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。

5、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!
); ``` 用反引号（\）来标识起始，用${}来引用变量，并且全部的空格和缩进都会被保留在输出之中

6、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/