学习 ES2015 新特性

es6features

这份文档最初取自Luke Hoban 优秀的es6features。 在GitHub,去给它一个star吧!

REPL

请务必在在线的REPL中尝试这些功能。
愚人码头注:你可以将示例代码复制到在线的REPL中,查看Babel转译结果。“读取-求值-输出”循环(英语:Read-Eval-Print Loop,简称REPL)是一个简单的,交互式编程环境。

介绍

ECMAScript 2015是一个ECMAScript标准,于2015年6月批准。

ES2015对于该语言来说是一次重要的更新,自2009年ES5标准化以来的第一个重大更新。自从ES5于2009年标准化以来,该语言的第一次重大更新。现在,主要的JavaScript引擎正在逐渐实现这些功能。

有关ECMAScript 2015语言的完整规范,请参阅ES2015标准。

ECMAScript 2015 新特性

箭头函数和词法this

箭头函数是使用=>语法对函数定义的简写。它们在语法上类似于 C#,Java 8 和 CoffeeScript 中的相关特性。它们支持表达式(Expression bodies)和函数体(Statement bodies)。与函数不同,箭头函数与其上下文代码共享相同的词法this(愚人码头注:箭头函数并没有自己的this,它的this是派生而来的,根据“词法作用域”派生而来)。如果箭头函数在另一个函数体内,它共享其父函数的 arguments 变量。

 // 使用表达式(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));   } };  // 词法 arguments function square() {   let example = () => {     let numbers = [];     for (let number of arguments) {       numbers.push(number * number);     }      return numbers;   };    return example(); }  square(2, 4, 7.5, 8, 11.5, 21); // returns: [4, 16, 56.25, 64, 132.25, 441]

更多信息:
– ES2015 中的箭头函数和词法 this

ES2015的类是一个基于原型的OO模式的简单语法糖。有一个方便的声明形式,使类模式更容易使用,并更具互操作性。类支持基于原型的继承,调用父类的构造函数,生成实例,静态方法和构造函数。

 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();   } }

增强对象字面量

扩展对象字面量支持在构造时设置原型,简化了foo: foo这样的赋值,定义方法和父级调用。这些也使得对象字面量和类声明更接近,并使得基于对象的设计更加方便。

 var obj = {     // 设置原型 "__proto__" 或 '__proto__' 同样可以正常使用     __proto__: theProtoObj,     // 计算属性名称不设置原型或     // 为重复的__proto__属性触发早期错误。     ['__proto__']: somethingElse,     // ‘handler: handler’的简写     handler,     // 方法     toString() {      // 调用父级      return "d " + super.toString();     },     // 计算(动态)属性名     [ "prop_" + (() => 42)() ]: 42 };

__proto__属性需要原生支持,并且在以前的ECMAScript版本中已被弃用。现在大多数引擎支持该属性,但有些仍不支持。此外,请注意,只需要Web浏览器来实现它,如附件B所示。该属性在Node中可用。

模板字符串

模板字符串提供了用于构造字符串的语法糖。这类似于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);

解构

解构允许使用模式匹配进行绑定,它支持匹配数组和对象。解构是故障弱化的,类似于标准对象以foo[‘foo’]方式查找属性,当没有找到时返回undefined

 // 列表匹配 var [a, ,b] = [1,2,3]; a === 1; b === 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;  // 带默认值的弱化解构 var [a = 1] = []; a === 1;  // 非结构化 + 默认参数 function r({x, y, w = 10, h = 10}) {   return x + y + w + h; } r({x:1, y:2}) === 23

默认参数(Default) + 不定参数(Rest) + 扩展运算符(Spread)

调用具有默认参数的函数,将数组转换为连续的函数参数,将连续的函数参数转换为数组。Rest让我们不再需要`arguments,并且更直接地解决了一些常见的问题。

 function f(x, y=12) {   // 如果不传递(或传递 undefined )y 为 12    return x + y; } f(3) == 15
 function f(x, ...y) {   // y 是一个 Array(数组);愚人码头注:...运算符将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是新的varconst是单赋值(仅允许被赋值一次)。静态限制(Static restrictions )阻止变量在赋值前被使用。

 function f() {   {     let x;     {       // 可以执行,因为是在块级作用域内       const x = "sneaky";       // 错误,常量不允许被赋值       x = "foo";     }     // 可以执行,因为是使用let声明     x = "bar";     // 错误,在当前块级作用域内已经被声明了一次     let x = "inner";   } }

迭代器(Iterators) + For..Of

Iterator对象像 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 }

通过polyfill支持

要使用迭代器,你需要在项目中包含Babel的polyfill。

生成器(Generators)

生成器使用function*yield简化迭代器的编写。一个通过function*声明的函数会返回一个生成器实例。生成器是迭代器的子类型,包括额外的nextthrow方法。这些使得值能够流回生成器,所以yield是一个返回值(或throw)的表达式。

注意:也可以用于使用‘await’这样的异步编程,另见 ES7 await 提案。

 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) {   // 循环将在n > 1000 时结束   if (n > 1000)     break;   console.log(n); }

生成器接口(仅使用TypeScript类型语法阐述):

 interface Generator extends Iterator {     next(value?: any): IteratorResult;     throw(exception: any); }

通过polyfill支持

要使用生成器,你需要在项目中包含Babel的polyfill。

Comprehensions

在 Babel 6.0 中已经移除

Unicode 编码

新增了一系列的扩展来支持完整的unicode编码,其中包括字符串中新的unicode语法格式,正则表达式的u模式来处理代码点,新的API也让字符串可以处理21位的代码点(code points)。这些新特性允许我们使用JavaScript构建国际化的应用。

 // 和ES5.1相同 "".length == 2  // 正则表达式新的u模式 "".match(/./u)[0].length == 2  // 新形式 "/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"; console.log("2π = " + math.sum(math.pi, math.pi));
 // otherApp.js import {sum, pi} from "lib/math"; console.log("2π = " + sum(pi, pi));

以及一些额外的功能包括 export defaultexport *:

 // 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"; console.log("e^π = " + exp(pi));

模块格式

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中,像ArrayDate和DOM Element这样的内置函数可以被子类化。

 // Array 子类的用户代码 class MyArray extends Array {     constructor(...args) { super(...args); } }  var arr = new MyArray(); arr[1] = 12; arr.length == 2

部分支持

内置子类别应该根据具体情况进行评估,因为诸如HTMLElement类可以被子类化。由于ES5引擎的限制,诸如DateArrayError等对象不能被子类化。

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)

在 Babel 6 中暂时删除

由于支持全局尾调用的复杂性和性能影响,仅支持显式自引用尾递归。删除由于其他bug,将重新实现。

原文:https://babeljs.io/learn-es2015/

0
如无特殊说明,文章均为原作者原创,转载请注明出处

该文章由 发布

这货来去如风,什么鬼都没留下!!!
发表我的评论

Hi,请填写昵称和邮箱!

取消评论
代码 贴图 加粗 链接 删除线 签到