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