学习 ECMAScript 6 新特性

2017-02-14 分类：JavaScript / ES2015 (ES6) 阅读(13990) 评论(0)
10年服务1亿前端开发工程师

es6features

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

REPL

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

ES6 包含以下新特性：
– arrows
– classes
– enhanced object literals
– template strings
– destructuring
– default + rest + spread
– let + const
– iterators + for..of
– generators
– unicode
– modules
– module loaders
– map + set + weakmap + weakset
– proxies
– symbols
– subclassable built-ins
– promises
– math + number + string + array + object APIs
– binary and octal literals
– reflect api
– tail calls

介绍

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是新的var。const是单赋值（仅允许被赋值一次）。静态限制（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*声明的函数会返回一个生成器实例。生成器是迭代器的子类型，包括额外的next和throw方法。这些使得值能够流回生成器，所以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 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";
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中，像Array，Date和DOM Element这样的内置函数可以被子类化。

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

var arr = new MyArray();
arr[1] = 12;
arr.length == 2

部分支持

内置子类别应该根据具体情况进行评估，因为诸如HTMLElement类可以被子类化。由于ES5引擎的限制，诸如Date，Array和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)

在 Babel 6 中暂时删除

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

推荐阅读最新关于 ECMAScript 的文章

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

赞(0) 打赏
未经允许不得转载：WEB前端开发 » 学习 ECMAScript 6 新特性
标签：

相关推荐

评论 抢沙发

取消

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

置顶推荐

最近文章

热门标签

JavaScript (324)ES6 (222)代码片段 (188)实用代码 (182)jquery (61)css3 (54)css (48)ES2015 (28)jQuery插件 (26)React (26)前端招聘 (25)前端开发工具 (24)webpack (23)招聘 (20)npm (20)Babel (20)箭头函数 (19)Map (19)ES7 (18)Web Development (17)let (16)Chrome DevTools (16)async (16)IE6 BUG (15)前端开发 (15)Promise (14)const (14)ES2017 (14)Flexbox (14)Sass (14)

最新评论

分类目录

热门文章

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏