ES6语言特性，如何在低版本浏览器运行它

Introduction

ECMAScript 6 于今年6月正式成为了标准，关于ES6，我们最大的疑虑可能是客户端浏览器还没有完全支持它，也就node.js用用。
有很多种手段可以解决这个问题，比如：通过webpack(请参考博主webpack系列的文章)与babel-loader.
如下图，浏览器借助它们就能跑ES6语法了，也没有增加js负荷(1.6KB)。以下的ES6特性，都可以放心的使用。

BABEL官网链接

Arrows and Lexical This
Classes
Enhanced Object Literals
Template Strings
Destructuring
Default + Rest + Spread
Let + Const
Iterators + For..Of
Map + Set + WeakMap + WeakSet
Binary and Octal Literals
Promises
Reflect API
Tail Calls

Arrows and Lexical This

Arrows are a function shorthand using the => syntax. They are syntactically similar to the related feature in C#, Java 8 and CoffeeScript. They support both expression and statement bodies. Unlike functions, arrows share the same lexical this as their surrounding code. =>语法已经加入到js啦，用过java c# 或者CoffeeScript的同学可能对它很熟悉。与函数不同的是，=>里面的语句是与父级共享作用域的(不像function自己再开个)。 ``` // 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);
});

// Lexical this
var bob = {
_name: "Bob",
_friends: [],
printFriends() {
this._friends.forEach(f =>
console.log(this._name + " knows " + f));
}
};


<h2 id="classes">Classes</h2>
ES2015 classes are a simple sugar over the prototype-based OO pattern. Having a single convenient declarative form makes class patterns easier to use, and encourages interoperability. Classes support prototype-based inheritance, super calls, instance and static methods and constructors.    
Classes支持属性的继承，调用父级的函数，静态方法，构造器。

class SkinnedMesh extends THREE.Mesh {
constructor(geometry, materials) {
super(geometry, materials);

this.idMatrix = SkinnedMesh.defaultMatrix();
this.bones = [];
this.boneMatrices = [];
//...

}
update(camera) {
//...
super.update();
}
static defaultMatrix() {
return new THREE.Matrix4();
}
}


<h2 id="enhanced-object-literals">Enhanced Object Literals</h2>
Object literals are extended to support setting the prototype at construction, shorthand for foo: foo assignments, defining methods and making super calls. Together, these also bring object literals and class declarations closer together, and let object-based design benefit from some of the same conveniences.    
对象在语法方面的扩展：现在可以在构造阶段就配prototype，以前的foo:foo现在可以简写为foo。

var obj = {
// proto
proto: theProtoObj,
// Does not set internal prototype
'proto': somethingElse,
// Shorthand for ‘handler: handler’
handler,
// Methods
toString() {
// Super calls
return "d " + super.toString();
},
// Computed (dynamic) property names
[ "prop_" + (() => 42)() ]: 42
};

> 部分浏览器不支持 `__proto__`，[参考这里](http://kangax.github.io/compat-table/es6/#__proto___in_object_literals)     

<h2 id="template-strings">Template Strings</h2>
Template strings provide syntactic sugar for constructing strings. This is similar to string interpolation features in Perl, Python and more. Optionally, a tag can be added to allow the string construction to be customized, avoiding injection attacks or constructing higher level data structures from string contents.   
ES6引入了Perl,Python中的模版字符串语法，支持了多行字符串。

// Basic literal string creation
This is a pretty little template string.

// Multiline strings
In ES5 this is not legal.

// Interpolate variable bindings
var name = "Bob", time = "today";
Hello ${name}, how are you ${time}?


<h2 id="destructuring">Destructuring</h2>
Destructuring allows binding using pattern matching, with support for matching arrays and objects. Destructuring is fail-soft, similar to standard object lookup foo["bar"], producing undefined values when not found.   
Destructuring 使得我们可以引入更多的匹配式的代码

// list matching
var [a, , b] = [1,2,3];

// object matching
var { op: a, lhs: { op: b }, rhs: c }
= getASTNode()

// object matching shorthand
// binds op, lhs and rhs in scope
var {op, lhs, rhs} = getASTNode()

// Can be used in parameter position
function g({name: x}) {
console.log(x);
}
g({name: 5})

// Fail-soft destructuring
var [a] = [];
a === undefined;

// Fail-soft destructuring with defaults
var [a = 1] = [];
a === 1;

这里插一句，BABEL会把以上代码转换成如下

"use strict";

var _ref = [1, 2, 3];
var a = _ref[0];
var b = _ref[2];

var _getASTNode = getASTNode();

var a = _getASTNode.op;
var b = _getASTNode.lhs.op;
var c = _getASTNode.rhs;

var _getASTNode2 = getASTNode();

var op = _getASTNode2.op;
var lhs = _getASTNode2.lhs;
var rhs = _getASTNode2.rhs;

function g(_ref2) {
var x = _ref2.name;

console.log(x);
}
g({ name: 5 });

var _ref3 = [];
var a = _ref3[0];

a === undefined;

var _ref4 = [];
var _ref4$0 = _ref4[0];
var a = _ref4$0 === undefined ? 1 : _ref4$0;

a === 1;

<h2 id="default-rest-spread">Default + Rest + Spread</h2>
Callee-evaluated default parameter values. Turn an array into consecutive arguments in a function call. Bind trailing parameters to an array. Rest replaces the need for arguments and addresses common cases more directly.   
默认参数已经得到支持，借助...我们可以将数组延展成参数，可以用来替代arguments，也可以用来传参。

<h2 id="let-const">Let + Const</h2>
块级作用域，博主 [这篇文章](http://www.cnblogs.com/E-WALKER/p/4782475.html)说的更详细点。

<h2 id="iterators-for-of">Iterators + For..Of</h2>
terator objects enable custom iteration like CLR IEnumerable or Java Iterable. Generalize for..in to custom iterator-based iteration with for..of. Don’t require realizing an array, enabling lazy design patterns like LINQ.   
C#中的IEnumerable或者说JAVA中的Iterable在ES6中亦有实现，注意，使用for..of而非for..in

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) {
// truncate the sequence at 1000
if (n > 1000)
break;
console.log(n);
}

> 需要引入[polyfill](http://babeljs.io/docs/usage/polyfill/)   

<h2 id="map-set-weak-map-weak-set">Map + Set + WeakMap + WeakSet</h2>
Efficient data structures for common algorithms. WeakMaps provides leak-free object-key’d side tables.   
新的WeakXXX解决了内存泄漏问题.

// 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 });
// Because the added object has no other references, it will not be held in the set

> 需要引入[polyfill](http://babeljs.io/docs/usage/polyfill/)   

<h2 id="binary-and-octal-literals">Binary and Octal Literals</h2>   
Two new numeric literal forms are added for binary (b) and octal (o).   
现在可以使用二进制与八进制了。

0b111110111 === 503 // true
0o767 === 503 // true


>  目前babel还不支持Number("0o767").    

<h2 id="promises">Promises</h2>
Promises are a library for asynchronous programming. Promises are a first class representation of a value that may be made available in the future. Promises are used in many existing JavaScript libraries.   
关于Promises的资料有很多，现在js已经原生支持了。

> 需要引入[polyfill](http://babeljs.io/docs/usage/polyfill/)   

<h2 id="reflect-api">Reflect API</h2>
Full reflection API exposing the runtime-level meta-operations on objects. This is effectively the inverse of the Proxy API, and allows making calls corresponding to the same meta-operations as the proxy traps. Especially useful for implementing proxies.   
没错。。。支持反射了。

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](http://babeljs.io/docs/usage/polyfill/)   

<h2 id="tail-calls">Tail Calls</h2>
Calls in tail-position are guaranteed to not grow the stack unboundedly. Makes recursive algorithms safe in the face of unbounded inputs.  
调用堆栈的深度无限制了。

function factorial(n, acc = 1) {
"use strict";
if (n <= 1) return acc;
return factorial(n - 1, n * acc);
}

// Stack overflow in most implementations today,
// but safe on arbitrary inputs in ES2015
factorial(100000)

posted @ 2015-09-05 13:33 官文祥阅读(2546) 评论(1) 编辑收藏举报

刷新页面返回顶部

David Guan

Coder, Blog writer, Books lover.

ES6语言特性，如何在低版本浏览器运行它

Introduction

Arrows and Lexical This