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"]

    }

}

 

你可能感兴趣的:(ES6主要特性简介)