ES6主要特性简介

ES6新特性

 

class 类 （extends继承）

@example:

class Player {

 constructor(x, y) {

   this.x = 0;

   this.y = 0;

 }

 

 getPosition() {

   return this.x + ',' + this.y;

 }

 

 jumpFoward() {

   this.x = this.x + 1;

 }

 

 jumpBackwards() {

   this.x = this.x - 1;

 }

}

 

import 引入外部模块

@example: import * as testClass from "./class";  // 从class模块中导出所有抛出的对象

@example: import {toString, foo, bar} from "./myModule";  // 从class模块中导出toString / foo / bar 属性或方法

 

 

export 抛出当前模块方法，供外部调用

@example: export default Archer;  // 抛出模块中定义的Archer对象，外部使用default属性来获取Archer对象

@example: export var foo = 'foo';  // 抛出模块中的属性

@example: export function testMethod(){ // 抛出当前所定义的方法，供外部调用

                  // ... 

         }

 

let  块作用域 － 定义

@desc: 

一般来说，JavaScript的作用域是“基于函数”的。就是说，为了包含一个私有变量，开发者必须声明一个函数。这点一直为许多使用过它语言的开发者所诟病。但现在，ES6提供了关键字let，使开发者可以声明块级变量，下面是一个例子：

@example: 

 

function foo2() {

 let bar = true;

 

 if (bar) {

   let baz = 'hi';

 }

 

 console.log(baz); // Uncaught ReferenceError: baz未定义

}

 

 

=>  箭头函数

@desc:

=>不只是关键字function的简写，它还带来了其它好处。箭头函数与包围它的代码共享同一个this。有经验的JavaScript开发者都熟悉诸如var self = this;或var that = this这种引用外围this的模式。但借助=>，就不需要这种模式了。

@example:

// ES5  (filter 数组过滤方法)

var selected = allJobs.filter(function (job) {  

 return job.isSelected();  

});  

 

// ES6  

var selected = allJobs.filter(job => job.isSelected()); 

 

当需要编写一个简单的单一参数函数时，可以采用箭头函数来书写，标识名=>表达式。这样就可以省却function和return的输入，还有括号，分号等。

 

当需要编写一个含有多个参数的函数时，只要把相关参数用括号包起来就好了。

var values = [1,2,3,4,5];

// ES5   （reduce 数组累积结果计算）

var total = values.reduce(function (a, b) {  

 return a + b;  

}, 0);  

 

// ES6  

var total = values.reduce((a, b) => a + b, 0);  

 

console.log(total); // 15

 

Generators 迭代器（生成器函数）

@desc:

这是一种新型的JavaScript函数，使开发者可以暂挂他们的函数，并在多次执行中返回不同的值。

迭代器是一个拥有 {value:{*}, done:{Boolean}} next([*])方法 和 {undefined} throw([*])方法 的对象，通过next函数不断执行以关键字yield分割的代码段，通过throw函数令yield分割的代码段抛出异常。

@example:

// 定义生成器函数

function *enumerable(msg){

 console.log(msg)

 var msg1 = yield msg + '  after '

 console.log(msg1)

 var msg2 = yield msg1 + ' after'

 console.log(msg2 + ' over')

}

 

// 上述代码最终会被解析为下面的代码：

var enumerable = function(msg){

 var state = -1

 

 return {

   next: function(val){

     switch(++state){

        case 0:

                 console.log(msg + ' after')

                 break

        case 1:

                 var msg1 = val

                 console.log(msg1 + ' after')

                 break

        case 2:

                 var msg2 = val

                 console.log(msg2 + ' over')

                 break

     }

   }

 }

}

 

// for...of语句

enumerator = enumerable('hello')

for(ret of enumerator)

 console.log(JSON.stringify(ret));

 

 // 初始化迭代器

var enumerator = enumerable('hello')

var ret = enumerator.next() // 控制台显示 hello，ret的值{value:'hello after',done:false}

ret =  enumerator.next('world') // 控制台显示 world，ret的值{value:'world after',done:false}

ret = enumerator.next('game') // 控制台显示game，ret的值{value:'game after',done:false}

// 抛出异常信息

ret = enumerator.throw(new Error('test')) // 控制台显示new Error('test')信息，然后显示game over。ret的值为{done:true}

 

// for...of语句

enumerator = enumerable('hello')

for(ret of enumerator)

 console.log(JSON.stringify(ret));

 

优化了“尾调用（Tail Calls）”

@desc:

一直到ES5，函数递归调用过多会导致栈溢出（到达内存上限），这是因为函数每次调用自己时都会调用一个新版本。但优化之后，每次调用会同上次调用共享同一个上下文，保证了内存使用率的稳定。 

 

安装babel-node，运行es6

 

 

sublime BuildSystem:

{

    "path": "/usr/local/bin",

    "working_dir": "${project_path:${folder}}",

    "selector": "source.js",

    "encoding": "utf-8",

    "shell": true,

    "windows": {

        "cmd": ["taskkill /f /im node.exe >nul 2>nul & babel-node $file"]

    },

    "osx": {

        "cmd": ["killall node >/dev/null 2>&1; babel-node $file"]

    },

    "linux": {

        "cmd": ["killall node >/dev/null 2>&1; babel-node $file"]

    }

}