最近开始在项目中使用 Babel,利用十一的假期,将官方文档 Learn ES2015 翻译成中文,欢迎大家批评指正。
原文链接:https://babeljs.io/docs/learn-es2015/
简介
ECMAScript 6是目前最新的ECMAScript标准,于2015年6月被批准。ES2015是该语言的一个显著更新,也是自2009年ES5标准确定后的第一个重大更新。现在,这些功能正在逐渐主要的JavaScript引擎实现。
查看ECMAScript 6语言ES2015版本的完整规范
ECMAScript 6 的新特性
箭头函数
箭头函数是使用=>
符号对函数定义的简写,语法上类似于C#,Java8和CoffeeScript中的相关特性。他支持两种写法:表达式(Expression bodies)和函数体(Statement bodies)。值得注意的是,与一般的函数不同,函数体内的this
对象,绑定定义时所在的对象,而不是使用时所在的对象。
// 使用表达式(Expression bodies)
var odds = evens.map(v => v + 1);
var nums = evens.map((v, i) => v + i);
// 使用函数体(Statement bodies)
nums.forEach(v => {
if (v % 5 === 0)
fives.push(v);
});
// this 对象
var bob = {
_name: "Bob",
_friends: [],
printFriends() {
this._friends.forEach(f =>
console.log(this._name + " knows " + f)
);
},
// _printFriend 为译者添加 是使用function时的等价写法
_printFriends() {
this._friends.forEach(function(f){
console.log(this._name + " knows " + f)
}.bind(this))
}
};
类
ES2015的类只是一个语法糖,通过class关键字让语法更接近传统的面向对象模式,本质上还是基于原型的。使用单一便捷的声明格式,使得类使用起来更方便,也更具互操作性。类支持基于原型的继承,调用父类的构造函数,生成实例,静态方法和构造函数。
class SkinnedMesh extends THREE.Mesh {
constructor(geometry, materials) {
// 调用父类的构造函数 super是父类的实例
super(geometry, materials);
this.idMatrix = SkinnedMesh.defaultMatrix();
this.bones = [];
this.boneMatrices = [];
//...
}
update(camera) {
//...
super.update();
}
// 静态方法
static defaultMatrix() {
return new THREE.Matrix4();
}
}
增强的对象字面量
经扩展后的对象字面量,允许在结构中设置原型,简化了foo: foo
这样的赋值,定义方法和父级调用。这使对象字面量更接近类的声明,并使得基于对象的设计更加方便。
var obj = {
// __proto__
__proto__: theProtoObj,
// 不要设置内部原型
'__proto__': somethingElse, //SyntaxError: Redefinition of __proto__ property
// ‘handler: handler’的简写
handler,
// 声明方法
toString() {
// 调用父级
return "d " + super.toString();
},
// 计算(动态)属性名
[ "prop_" + (() => 42)() ]: 42
};
该__proto__
需要原生支持,并在之前的ECMAScript版本中被弃用。目前大多数引擎支持该属性,但仍有一些不支持。同样注意到,仅web浏览器需要支持该属性,参见附录B。该属性在Node环境中被支持。
模板字符串(Template Strings)
模板字符串提供了构建字符串的语法糖,类似于像Perl,Python等语言中的字符串插值。你也可以构建一个自定义标签,避免注入攻击或用字符串内容构建更高层次的数据结构。
// 创建基本的模板字符串
`This is a pretty little template string.`
// 多行字符串
`In ES5 this is
not legal.`
// 插入变量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
// 在模板字符串中不使用转义
String.raw`In ES5 "\n" is a line-feed.`
// 创建一个HTTP请求头的模板字符串,通过替换内容来构建请求
GET`http://foo.org/bar?a=${a}&b=${b}
Content-Type: application/json
X-Credentials: ${credentials}
{ "foo": ${foo},
"bar": ${bar}}`(myOnReadyStateChangeHandler);
解构(Destructuring)
解构允许数组和对象使用模式匹配进行绑定。解构是故障弱化的,类似于标准对象以foo['foo']
方式查找变量,当没有找到时返回undefined
。
// 列表(数组)匹配
var [a, , b] = [1,2,3];
// 对象匹配
var { op: a, lhs: { op: b }, rhs: c }
= getASTNode()
// 对象匹配的简写
// 绑定当前作用域的 `op`, `lhs` 和 `rhs`
var {op, lhs, rhs} = getASTNode()
// 可以用在函数的参数中
function g({name: x}) {
console.log(x);
}
g({name: 5})
// 弱化解构
var [a] = [];
a === undefined;
// Fail-soft destructuring with defaults
var [a = 1] = [];
a === 1;
默认参数(Default) + 不定参数(Rest) + 扩展运算符(Spread)
调用具有默认参数的函数,将数组转换为连续的函数参数,将连续的函数参数转换为数组。Rest让我们不再需要arguments
,并且更直接地解决了一些常见的问题。
function f(x, y=12) {
// y is 12 if not passed (or passed as undefined)
return x + y;
}
f(3) == 15
function f(x, ...y) {
// ...运算符将x之后的参数转换为名为y的数组
return x * y.length;
}
f(3, "hello", true) == 6
function f(x, y, z) {
return x + y + z;
}
// ...运算符将数组转换为连续的参数
f(...[1,2,3]) == 6
Let(局部变量) + Const(常量)
新增块级作用域。let
是新的var
。const
是单赋值(仅允许被赋值一次)。静态限制(Static restrictions )阻止变量在赋值前被使用。
function f() {
{
let x;
{
// 可以执行,因为是在块级作用域内
const x = "sneaky";
// 错误,常量不允许被赋值
x = "foo";
}
// 可以执行,因为是使用let声明
x = "bar";
// 错误,在当前块级作用域内已经被声明了一次
let x = "inner";
}
}
迭代器(Iterators) + For..Of循环
迭代器对象允许像 CLR IEnumerable 或者 Java Iterable 一样自定义迭代器。将for..in转换为自定义的基于迭代器的形如for..of的迭代,不需要实现一个数组,支持像 LINQ 一样的惰性设计模式。
// 实现斐波那契数列的迭代器
let fibonacci = {
[Symbol.iterator]() {
let pre = 0, cur = 1;
return {
next() {
[pre, cur] = [cur, pre + cur];
return { done: false, value: cur }
}
}
}
}
for (var n of fibonacci) {
// 循环将在n > 1000 时结束
if (n > 1000)
break;
console.log(n);
}
迭代器基于如下的鸭子类型的借口(使用TypeScript类型的语法来解析):
interface IteratorResult {
done: boolean;
value: any;
}
interface Iterator {
next(): IteratorResult;
}
interface Iterable {
[Symbol.iterator](): Iterator
}
要使用迭代器,你需要在项目中包含Babel的polyfill。
Generator
Generator通过使用function*
和yield
关键字简化了迭代器的编写。一个通过function*声明的函数会返回一个Generators实例。Generator是迭代器包含额外的next
和throw
方法的子类型。这些特性使得值可以流回Generator,故yield
是一个可以返回(或抛出)值的表达式。
标注:也可以用于使用‘await’这样的异步编程,详见ES7await
协议。
// 实现斐波那契数列
var fibonacci = {
[Symbol.iterator]: function*() {
var pre = 0, cur = 1;
for (;;) {
var temp = pre;
pre = cur;
cur += temp;
yield cur;
}
}
}
for (var n of fibonacci) {
// truncate the sequence at 1000
if (n > 1000)
break;
console.log(n);
}
Generator同样(使用TypeScript类型的语法来解析):
interface Generator extends Iterator {
next(value?: any): IteratorResult;
throw(exception: any);
}
要使用Generator,你需要在项目中包含Babel的polyfill。
Comprehensions
在此页面了解详情。该功能目前属于ES7 Strawman 协议。
该功能在Babel中默认是关闭的,只有当你在开启实验选项的时候才可以使用。详见实验选项。
Unicode 编码
新增了一系列的扩展来支持完整的unicode编码,其中包括字符串中新的unicode语法格式,正则表达式的u
模式来处理代码点,新的API也让字符串可以处理21位的代码点(code points)。这些新特性允许我们使用JavaScript构建国际化的应用。
// 和ES5.1相同
"?".length == 2
// 正则表达式新的u模式
"?".match(/./u)[0].length == 2
// 新的unicode格式
"\u{20BB7}" == "?" == "\uD842\uDFB7"
// 新的字符串方法
"?".codePointAt(0) == 0x20BB7
// for of迭代代码点
for(var c of "?") {
console.log(c);
}
模块(Modules)
为了定义组件,从语言层面对模块进行了支持。编写方式借鉴了流行的JavaScript模块加载器(AMD, CommonJS)。由主机定义的默认加载器定义运行时的行为。使用隐式异步模式——在模块可以被获取和加载前不会有代码执行。
// lib/math.js
export function sum(x, y) {
return x + y;
}
export var pi = 3.141593;
// app.js
import * as math from "lib/math";
alert("2π = " + math.sum(math.pi, math.pi));
// otherApp.js
import {sum, pi} from "lib/math";
alert("2π = " + sum(pi, pi));
以及一些额外的功能:export default
和export *
// lib/mathplusplus.js
export * from "lib/math";
export var e = 2.71828182846;
export default function(x) {
return Math.exp(x);
}
// app.js
import exp, {pi, e} from "lib/mathplusplus";
alert("2π = " + exp(pi, e));
模块的格式:Babel可以将ES2015的模块转换为一下几种格式:Common.js,AMD,System,以及UMD。你甚至可以创建你自己的方式。详见模块文档。
模块加载器(Module Loaders)
并不是ES2015的一部分:这部分ECMAScript 2015规范是由实现定义(implementation-defined)的。最终的标准将在WHATWG的Loader(加载器)规范中确定。下面的内容来自于之前的ES2015草稿。
模块加载器支持以下功能:
- 动态加载(Dynamic loading)
- 状态一致性(State isolation)
- 全局空间一致性(Global namespace isolation)
- 编译钩子(Compilation hooks)
- 嵌套虚拟化(Nested virtualization)
你可以对默认的加载器进行配置,新的加载器能构建评估并在独立或受限的上下文中加载代码。
// 动态加载 – ‘System’ 是默认的加载器
System.import("lib/math").then(function(m) {
alert("2π = " + m.sum(m.pi, m.pi));
});
// 创建执行沙箱 – new Loaders
var loader = new Loader({
global: fixup(window) // replace ‘console.log’
});
loader.eval("console.log(\"hello world!\");");
// 直接操作模块的缓存
System.get("jquery");
System.set("jquery", Module({$: $})); // WARNING: not yet finalized
需要额外的polyfill:由于Babel默认使用common.js的模块,你需要一个polyfill来使用加载器API。点击获取。
使用模块加载器:为了使用此功能,你需要告诉Babel使用System
模块格式化工具。在此查看System.js。
Map + Set + WeakMap + WeakSet
为常见算法的实现提供了更有效的数据结构。WeakMaps提供了对对象的弱引用(不会被垃圾回收计数)。
// Sets
var s = new Set();
s.add("hello").add("goodbye").add("hello");
s.size === 2;
s.has("hello") === true;
// Maps
var m = new Map();
m.set("hello", 42);
m.set(s, 34);
m.get(s) == 34;
// Weak Maps
var wm = new WeakMap();
wm.set(s, { extra: 42 });
wm.size === undefined
// Weak Sets
var ws = new WeakSet();
ws.add({ data: 42 });
// 由于传入的对象没有其他引用,故将不会被set保存。
需要polyfill支持:为了在所有环境下使用Maps,Sets,WeakMaps和WeakSets,你需要使用Babel的polyfill。
Proxies(代理对象)
代理对象可以创建一个具有目标对象全部行为的对象。可用于拦截,对象的虚拟化,记录/分析等。
// 代理普通对象
var target = {};
var handler = {
get: function (receiver, name) {
return `Hello, ${name}!`;
}
};
var p = new Proxy(target, handler);
p.world === "Hello, world!";
// 代理函数对象
var target = function () { return "I am the target"; };
var handler = {
apply: function (receiver, ...args) {
return "I am the proxy";
}
};
var p = new Proxy(target, handler);
p() === "I am the proxy";
下面是所有运行级别元操作(meta-operations)中可能出现的traps:
var handler =
{
// target.prop
get: ...,
// target.prop = value
set: ...,
// 'prop' in target
has: ...,
// delete target.prop
deleteProperty: ...,
// target(...args)
apply: ...,
// new target(...args)
construct: ...,
// Object.getOwnPropertyDescriptor(target, 'prop')
getOwnPropertyDescriptor: ...,
// Object.defineProperty(target, 'prop', descriptor)
defineProperty: ...,
// Object.getPrototypeOf(target), Reflect.getPrototypeOf(target),
// target.__proto__, object.isPrototypeOf(target), object instanceof target
getPrototypeOf: ...,
// Object.setPrototypeOf(target), Reflect.setPrototypeOf(target)
setPrototypeOf: ...,
// for (let i in target) {}
enumerate: ...,
// Object.keys(target)
ownKeys: ...,
// Object.preventExtensions(target)
preventExtensions: ...,
// Object.isExtensible(target)
isExtensible :...
}
不支持的特性:由于ES5的局限性,Proxies无法被转换或者通过polyfill兼容,查看不同JavaScript引擎对该功能的支持。
Symbols
Symbol对对象的状态进行访问控制。Symbol允许对象的属性不仅可以通过string
(ES5)命名,还可以通过symbol
命名。symbol是一种基本数据类型。可选的name
参数用于调试——但并不是他本身的一部分。Symbol是唯一的,但不是私有的,因为他们使用诸如Object.getOwnPropertySymbols
这样的方法来使用。
(function() {
// 模块内的symbol
var key = Symbol("key");
function MyClass(privateData) {
this[key] = privateData;
}
MyClass.prototype = {
doStuff: function() {
... this[key] ...
}
};
// 被Babel部分支持,原生环境可以完全实现。
typeof key === "symbol"
})();
var c = new MyClass("hello")
c["key"] === undefined
通过polyfill部分实现:通过Babel的polyfill部分实现。由于语言的限制,部分功能不能转换或通过polyfill兼容。您可以查看code.js的注意事项获取更多信息。
可继承内建对象
在ES2015中,可以创建内建对象如Array
,Date
以及DOMElement
的子类。
// 创建Array的子类
class MyArray extends Array {
constructor(...args) { super(...args); }
}
var arr = new MyArray();
arr[1] = 12;
arr.length == 2
部分支持:由于ES5引擎的限制,可以创建HTMLElement
的子类,但不能创建诸如Array
,Date
和Error
等对象的子类。
Math + Number + String + Object APIs
新增很多功能,如核心的Math库,数组转换和用于对象复制的Object.assign()。
Number.EPSILON
Number.isInteger(Infinity) // false
Number.isNaN("NaN") // false
Math.acosh(3) // 1.762747174039086
Math.hypot(3, 4) // 5
Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2
"abcde".includes("cd") // true
"abc".repeat(3) // "abcabcabc"
Array.from(document.querySelectorAll("*")) // 将类似数组的对象转换为真正的数组
Array.of(1, 2, 3) // 类似与new Array(),但是当仅有一个参数时,两者表现不同
[0, 0, 0].fill(7, 1) // [0,7,7]
[1,2,3].findIndex(x => x == 2) // 1
["a", "b", "c"].entries() // 迭代结果 [0, "a"], [1,"b"], [2,"c"]
["a", "b", "c"].keys() // 迭代结果 0, 1, 2
["a", "b", "c"].values() // 迭代结果 "a", "b", "c"
Object.assign(Point, { origin: new Point(0,0) })
通过polyfill有限的支持:上述许多API都通过polyfill进行了支持,但是部分特性由于多种原因没有被实现(如,String.prototype.normalize
需要编写大量额外的代码来实现),你可以在这里找到更多的polyfill。
二进制和八进制字面量
新增两种数字字面量:二进制b
和八进制o
。
0b111110111 === 503 // true
0o767 === 503 // true
仅支持字面模式:Babel仅可以转换0o767
,并不能转换Number("0o767")
。
Promises
Promises是一种异步编程的方式。Promises在将来可能会得到支持。目前很多的JavaScript库都使用了Promises。
function timeout(duration = 0) {
return new Promise((resolve, reject) => {
setTimeout(resolve, duration);
})
}
var p = timeout(1000).then(() => {
return timeout(2000);
}).then(() => {
throw new Error("hmm");
}).catch(err => {
return Promise.all([timeout(100), timeout(200)]);
})
通过polyfill支持:要使用Promises,你需要引入Babel的polyfill。
Reflect API
完整的Reflect API使得可以在运行级别对对象进行元操作。它相当与是Proxy API的逆,并允许调用对应的元操作,如proxy traps。这使得它在实现Proxy时非常有用。
var O = {a: 1};
Object.defineProperty(O, 'b', {value: 2});
O[Symbol('c')] = 3;
Reflect.ownKeys(O); // ['a', 'b', Symbol(c)]
function C(a, b){
this.c = a + b;
}
var instance = Reflect.construct(C, [20, 22]);
instance.c; // 42
通过polyfill支持:要使用Reflect API,你需要引入Babel的polyfill。
Tail Calls
现在递归调用函数不用担心栈无限增长,使得递归算法在面对无限的输入时更加安全。
function factorial(n, acc = 1) {
"use strict";
if (n <= 1) return acc;
return factorial(n - 1, n * acc);
}
// 如今运行这段代码会导致栈溢出
// 但是在ES2015中,即便输入很随意也可以安全运行
factorial(100000)
部分支持:该特性仅支持直接对自身引用的递归。由于功能本身的复杂性和表现冲突,使得该特性无法在全局下支持。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。