ECMAScript 2015新特性

发表于 更新于

缘由

继上一篇翻译的文章使用TypeScript开发React之后，对翻译文章有点上瘾了。最近也在研究ES2015,找到一篇不错的文章，于是又开始翻译起来了，就有了这篇博客。原文链接。下面正式翻译了，翻译并不是全文对比翻译的，也加了部分自己查找到资料的整理。

ECMAScript6

简介

ECMAScript 6,又名ECMAScript 2015,是ECMAScript 标准的最新版本。ES6是一个重要的更新对于JavaScript，并且这次更新是ES5在2009更新之后的首次更新。这些功能的正在集成在大部分JavaScript引擎中。

查看ES6 标准都在这篇详细的说明书中。

ES6 包含以下新的功能点:

ECMAScript6 新特性

箭头操作符

箭头操作符是函数简写的一种表现行式。它在语法结构上比较像C#,Java8和CoffeeScript里面的功能。它同时支持两种使用方式，表达式方式和声明方式。与function申明方式不同的地方是，箭头操作符号能够在相同的代码编辑模块中保留相同的this。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 表达式方式
var odds = evens.map(v => v + 1);
var nums = evens.map((v, i) => v + i);
var pairs = evens.map(v => ({even: v, odd: v + 1}));

// 申明方式
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));
  }
}

类的支持

ES6 类是一个语法糖通过对JS原型模式的包装来实现。有一个简单类型申明形式使得类模式更加方便使用。类支持原型为基础的继承，super调用，实例和静态方法和构造函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
class SkinnedMesh extends THREE.Mesh {
  constructor(geometry, materials) {
    super(geometry, materials);

    this.idMatrix = SkinnedMesh.defaultMatrix();
    this.bones = [];
    this.boneMatrices = [];
    //...
  }
  update(camera) {
    //...
    super.update();
  }
  get boneCount() {
    return this.bones.length;
  }
  set matrixType(matrixType) {
    this.idMatrix = SkinnedMesh[matrixType]();
  }
  static defaultMatrix() {
    return new THREE.Matrix4();
  }
}

增强的对象字面量

对象字面量扩展到支持设置背景原型，简写为Foo Foo作业：定义方法，使super调用，和计算属性名称和表达式。另外，这些也给对象的文字和类声明更紧密的结合在一起，让对象设计受益于一些相同的便利

1
2
3
4
5
6
7
8
9
10
11
12
13
var obj = {
    // __proto__
    __proto__: theProtoObj,
    // Shorthand for ‘handler: handler’
    handler,
    // Methods
    toString() {
     // Super calls
     return "d " + super.toString();
    },
    // Computed (dynamic) property names
    [ 'prop_' + (() => 42)() ]: 42
};

字符串模板

字符串模板提供构造字符串语法糖,这个类似在Perl,Python和更多的字符串插值功能。可选的，可以添加一个标记，以允许字符串结构来进行定制，避免从字符串内容里注入攻击或构造更高级别的数据结构。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 基础的字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.""`""

// String interpolation
"var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`"

// Construct an HTTP request prefix is used to interpret the replacements and construction
POST`http://foo.org/bar?a=${a}&b=${b}
     Content-Type: application/json
     X-Credentials: ${credentials}
     { "foo": ${foo},
       "bar": ${bar}}`(myOnReadyStateChangeHandler);

解构

解构允许结合使用模式匹配，与匹配的数组和对象的支持。解构是错误弱化，类似于标准的对象查找foo[“bar”] ，使用解构赋值访问对象中未定义的属性，将会得到undifined。更详细的用法点击这里

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 数组匹配
var [a, , b] = [1,2,3];

// 对象匹配
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;

参数默认值，剩余参数，拓展参数

被评估的默认参数值。在函数调用中，将数组转换为连续的参数。将…参数绑定到数组。剩余参数省略必要的arguments而且在一般情况更适用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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) {
  // y is an Array
  return x * y.length;
}
f(3, "hello", true) == 6
function f(x, y, z) {
  return x + y + z;
}
// Pass each elem of array as argument
f(...[1,2,3]) == 6

let与const 关键字

可以把let看成var，只是它定义的变量被限定在了特定范围内才能使用，而离开这个范围则无效。const则很直观，用来定义常量，即无法被更改值的变量。

1
2
3
4
5
6
7
8
9
10
11
12
13
function f() {
  {
    let x;
    {
      // okay, block scoped name
      const x = "sneaky";
      // error, const
      x = "foo";
    }
    // error, already declared in block
    let x = "inner";
  }
}

迭代器，for..of

迭代器对象能够像CLR的IEnumerable或Java 的Iterable。一般化的for..in定制基于迭代器的迭代与for..of。不要求实现一个数组，使懒惰的设计模式，如LINQ。ES6中新引入的for of循环功能相似，不同的是每次循环它提供的不是序号而是值。for-of循环不仅仅是为遍历数组而设计的。基本上所有类数组对象都适用，比如DOM NodeListS，也能用在字符串上。更多详细的用法可以点击这里查看。

iterator:它是这么一个对象，拥有一个next方法，这个方法返回一个对象{done,value}，这个对象包含两个属性，一个布尔类型的done和包含任意值的value
iterable: 这是这么一个对象，拥有一个obj[@@iterator]方法，这个方法返回一个iterator
generator: 它是一种特殊的iterator。反的next方法可以接收一个参数并且返回值取决与它的构造函数（generator function）。generator同时拥有一个throw方法
generator 函数: 即generator的构造函数。此函数内可以使用yield关键字。在yield出现的地方可以通过generator的next或throw方法向外界传递值。generator 函数是通过function*来声明的
yield 关键字：它可以暂停函数的执行，随后可以再进进入函数继续执行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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);
}

迭代是基于这些duck类型接口(使用TypeScript 类型的语法来阐述)

1
2
3
4
5
6
7
8
9
10
interface IteratorResult {
  done: boolean;
  value: any;
}
interface Iterator {
  next(): IteratorResult;
}
interface Iterable {
  [Symbol.iterator](): Iterator
}

generator

generator简化重复使用 function*和yield。声明为function*函数返回一个generator实例。generator是迭代器的子类图包含一些扩展next和throw,这些能够使用的值将会返回到generator，因此yield是一个关键字，如果return，返回一个value或者throws。更多的内容
注：也可用于启用“ await’般的异步编程，又见ES7等待提案。
生成器函数最大的特点是可以中断自己，但普通函数不可以。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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 类型的语法来阐述)

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

字符编码标准

非断补充，支持完整的Unicode ，包括串新的Unicode文本形式和新的RegExp ú模式来处理代码点，以及新的API来处理在21位的代码点水平的字符串。这些增加支持JavaScript的建立全球的应用程序。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// same as ES5.1
"𠮷".length == 2

// new RegExp behaviour, opt-in ‘u’
"𠮷".match(/./u)[0].length == 2

// new form
"\u{20BB7}"=="𠮷"=="\uD842\uDFB7"

// new String ops
"𠮷".codePointAt(0) == 0x20BB7

// for-of iterates code points
for(var c of "𠮷") {
  console.log(c);
}

模块

对于模块组件定义语言级的支持。将从流行的JavaScript模块装载机模式（AMD，CommonJS）。将不同功能的代码分别写在不同文件中，各模块只需导出公共接口部分，然后通过模块的导入的方式可以在其他地方使用。

1
2
3
4
5
6
7
8
9
10
11
// 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 *:

1
2
3
4
5
6
7
8
9
// lib/mathplusplus.js
export * from "lib/math";
export var e = 2.71828182846;
export default function(x) {
    return Math.log(x);
}
// app.js
import ln, {pi, e} from "lib/mathplusplus";
alert("2π = " + ln(e)*pi*2);

模块装载机模式

模块装载机支持:

  • 动态加载
  • 状态隔离
  • 全局命名空间隔离
  • 编译钩
  • 嵌套虚拟化

可以配置默认模块加载程序,新的加载程序可以构造来评估并且在分离或约束的情况下加载代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Dynamic loading – ‘System’ is default loader
System.import('lib/math').then(function(m) {
  alert("2π = " + m.sum(m.pi, m.pi));
});

// Create execution sandboxes – new Loaders
var loader = new Loader({
  global: fixup(window) // replace ‘console.log’
});
loader.eval("console.log('hello world!');");

// Directly manipulate module cache
System.get('jquery');
System.set('jquery', Module({$: $})); // WARNING: not yet finalized

Map，Set 和 WeakMap，WeakSet

这些是新加的集合类型，提供了更加方便的获取属性值的方法，不用像以前一样用hasOwnProperty来检查某个属性是属于原型链上的呢还是当前对象的。同时，在进行属性值添加与获取时有专门的get，set 方法。有时候我们会把对象作为一个对象的键用来存放属性值，普通集合类型比如简单对象会阻止垃圾回收器对这些作为属性键存在的对象的回收，有造成内存泄漏的危险。而WeakMap,WeakSet则更加安全些，这些作为属性键的对象如果没有别的变量在引用它们，则会被回收释放掉。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 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

Proxies

Proxy可以监听对象身上发生了什么事情，并在这些事情发生后执行一些相应的操作。一下子让我们对一个对象有了很强的追踪能力，同时在数据绑定方面也很有用处。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// Proxying a normal object
var target = {};
var handler = {
  get: function (receiver, name) {
    return `Hello, ${name}!`;
  }
};

var p = new Proxy(target, handler);
p.world === 'Hello, world!';
// Proxying a function object
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';

有陷阱可用于所有的运行时级元操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var handler =
{
  get:...,
  set:...,
  has:...,
  deleteProperty:...,
  apply:...,
  construct:...,
  getOwnPropertyDescriptor:...,
  defineProperty:...,
  getPrototypeOf:...,
  setPrototypeOf:...,
  enumerate:...,
  ownKeys:...,
  preventExtensions:...,
  isExtensible:...
}

Symbols类型

符号启用对象状态访问控制。元件使性能受到任何字符串（如ES5 ）或符号来键入。符号是一个新的基本类型。用于调试的可选参数的说明 - 而不是身份的一部分。符号是唯一的（像gensym ），但不专用，因为它们是经由像Object.getOwnPropertySymbols反射功能暴露。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var MyClass = (function() {

  // module scoped symbol
  var key = Symbol("key");

  function MyClass(privateData) {
    this[key] = privateData;
  }

  MyClass.prototype = {
    doStuff: function() {
      ... this[key] ...
    }
  };

  return MyClass;
})();

var c = new MyClass("hello")
c["key"] === undefined

子类内置

在ES6中，像Array,Date 和DOM Element元素都可以被继承。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 数组的伪代码
class Array {
    constructor(...args) { /* ... */ }
    static [Symbol.create]() {
        // Install special [[DefineOwnProperty]]
        // to magically update 'length'
    }
}

// 用户继承的子类
class MyArray extends Array {
    constructor(...args) { super(...args); }
}

// Two-phase 'new':
// 1) Call @@create to allocate object
// 2) Invoke constructor on new instance
var arr = new MyArray();
arr[1] = 12;
arr.length == 2

Promises

Promises 是一个异步编程库。Promises 是可以在未来提供价值的一个类。Promises 是用在许多现有的JavaScript库。

1
2
3
4
5
6
7
8
9
10
11
12
13
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)]);
})

Math，Number，String，Object 的新API

对Math,Number,String还有Object等添加了许多新的API。以下对这些新API进行了简单展示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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].find(x => x == 3) // 3
[1, 2, 3].findIndex(x => x == 2) // 1
[1, 2, 3, 4, 5].copyWithin(3, 0) // [1, 2, 3, 1, 2]
["a", "b", "c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"]
["a", "b", "c"].keys() // iterator 0, 1, 2
["a", "b", "c"].values() // iterator "a", "b", "c"

Object.assign(Point, { origin: new Point(0,0) })

二进制和八进制

两个新的数字文字形式添加二进制（B）、八进制（O）。

1
2
0b111110111 === 503 // true
0o767 === 503 // true

反射API

全部反射API暴露运行级别元的操作的对象。这是有效地代理API的反射，并且允许使得对应于相同的元的操作作为代理陷阱呼叫。尤其适用于实现代理。

1
暂时没有demo

递归调用

在递归调用堆栈不保证不增长。确保在无限制的的输入情况下递归算法的安全。

1
2
3
4
5
6
7
8
9
function factorial(n, acc = 1) {
    'use strict';
    if (n <= 1) return acc;
    return factorial(n - 1, n * acc);
}

// 在大多数实现中的堆栈溢出
// 但是在ES6中对于任意的输入都是安全的
factorial(100000)

总结

总结就是一句话，前后端差异越来越小了。