阅读(1.8k) 书签赞(0) 我要纠错

ECMAScript 2015 简易教程

2018-06-16 20:31 更新

背景

本文最初源自es6features，你可以到github上去加星。你可以使用REPL在线预览这些特性。

简介

ECMAScript 6 是ECMAScript标准的最新版本，于2015年6月批准通过。ES2015是对语言的一次重大更新，是自从2009年ES5标准化后的第一次重大更新。主要的JavaScript引擎正在逐步实现这些特性，点击这里查看浏览器的兼容情况。

查看ES2015 标准，了解关于ECMAScript 6语言的完整规范。

ECMAScript 6 新特性

箭头函数和静态this（Arrows and Lexical This）

箭头函数使用胖箭头(=>)语法，与C#，Java 8和CoffeeScript类似。支持表达式和语句作为函数体。不像普通函数，箭头函数的this是和文法作用域绑定的。

// 表达式作为函数体
var odds = evens.map(v => v + 1);
var nums = evens.map((v, i) => v + i);

// 语句作为函数体
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));
  }
};

类（Classes）

ES2015中的类是对基于原型面向对象模式的一个简单语法糖。有一个单一的声明形式可以使类模式更容易使用，并鼓励互操作性。类支持基于原型的继承，超类调用(super)，实例方法，静态方法和构造函数。

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

增强对象字面量（Enhanced Object Literals）

对象字面量被扩展支持直接设置原型，简洁属性赋值和方法，超类调用。这也让对象字面量和类声明的关系更密切，并让基于对象的设计更便利。

var obj = {
    // __proto__
    __proto__: theProtoObj,
    // 下面的写法不会设置内部原型
    '__proto__': somethingElse,
    // ‘handler: handler’的简写
    handler,
    // 方法
    toString() {
     // 调用父对象的方法
     return "d " + super.toString();
    },
    // 属性名是一个表达式
    [ "prop_" + (() => 42)() ]: 42
};

__proto__属性需要原生支持，这一属性在ECMAScript前一个版本中一度被废弃。目前为止，大部分引擎支持这一属性。同时需要注意，仅仅web浏览器需要实现这一属性，在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[“bar”]，找不到值则为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})

// 解构失败，赋值为undefined
var [a] = [];
a === undefined;

// 如果有默认值，则为默认值
var [a = 1] = [];
a === 1;

默认值 + Rest参数 + 扩展运算符（Default + Rest + Spread）

现在函数调用可以传递默认参数了；扩展运算符允许将数组转化为函数的参数传入；rest参数，用于获取函数的多余参数，这样就不需要使用arguments对象了。

function f(x, y=12) {
  // 如果不传递y或传递undefined，y的值为12
  return x + y;
}
f(3) == 15

function f(x, ...y) {
  // 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，但是所声明的变量，只在let命令所在的代码块内有效。const也用来声明变量，但是声明的是常量。一旦声明，常量的值就不能改变。

function f() {
  {
    let x;
    {
      // 块作用域
      const x = "sneaky";
      // const常量重新赋值会报错
      x = "foo";
    }
    // let变量可以再次赋值
    x = "bar";
    // 在块作用域中重复声明将会报错
    let x = "inner";
  }
}

Iterator和for..of循环（Iterators + For..Of）

遍历器对象能够自定义遍历行为，这很像Java的Iterable。新增的for..of用来代替for..in。并不需要是数组，任何数据结构只要部署Iterator接口，就可以完成遍历操作。

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

遍历器基于弱类型接口（下面是使用TypeScript语法的展示）：

interface IteratorResult {
  done: boolean;
  value: any;
}
interface Iterator {
  next(): IteratorResult;
}
interface Iterable {
  [Symbol.iterator](): Iterator
}

需要腻子脚本（Support via polyfill）

使用遍历器需要引用Babel腻子脚本。

Generator 函数（Generators）

Generator函数是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同。Generator函数有多种理解角度。从语法上，首先可以把它理解成，Generator函数是一个状态机，封装了多个内部状态。

执行Generator函数会返回一个遍历器对象，也就是说，Generator函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历Generator函数内部的每一个状态。

形式上，Generator函数是一个普通函数，但是有两个特征。一是，function命令与函数名之间有一个星号；二是，函数体内部使用yield语句，定义不同的内部状态（yield语句在英语里的意思就是“产出”）。

注意：也可以使用‘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) {
  // 截断1000以后的数据
  if (n > 1000)
    break;
  console.log(n);
}

generator接口原理如下（使用TypeScript语法的模拟）：

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

需要腻子脚本（Support via polyfill）

为了使用Generator，需要引用Babel的腻子脚本。

Unicode

ES6增强了对Unicode的支持，包括新的unicode字面量和新的正则匹配参数u模式，以及新的API来处理超过两个字节的字符。

// 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";
alert("2π = " + math.sum(math.pi, math.pi));

// otherApp.js
import {sum, pi} from "lib/math";
alert("2π = " + sum(pi, pi));

可以设置导出默认值和导出全部：

// 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。你甚至可以创建自己的模块格式，更多细节可以查看模块的文档。

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

需要使用polyfill

为了使用这些新数据结构，你必须引入babel的腻子脚本。

代理（Proxies）

Proxy可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

// 代理对象
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";

下面是Proxy支持的拦截操作一览:

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 :...
}

不支持的特性（Unsupported feature）

由于ES5的局限性，Proxy不能被转换和填补。点击这里查看浏览器支持情况。

Symbols

Symbol 可以作为对象的键值，是一种新的原始类型。Symbol函数可以接受一个字符串作为参数，表示对Symbol实例的描述，主要是为了在控制台显示，或者转为字符串时，比较容易区分。Symbol是独一无二的，但可以通过Object.getOwnPropertySymbols获取到。

(function() {

  // 块级作用域
  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

需要腻子脚本（不完备）（Limited support via polyfill）

需要使用Babel的腻子脚本，但无法全部支持。由于语言的限制，有些特性无法被转义和填补。更多细节请查看core.js的相关说明。

继承内建父类（Subclassable Built-ins）

在ES2015中，语言内置父类如Array，Date和Dom元素能够被子类继承。

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

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

部分支持（Partial support）

能够子类化的父类必须是基于类的，比如HTMLElement能被子类继承，然后由于ES5引擎的限制许多父类不能被子类化，如Date，Array和Error等。

Math + Number + String + Object APIs

ES2015扩展了很多新的API，包括核心数学函数，数组转换接口和实现对象复制功能的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() // 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) })

需要使用腻子脚本（不能完全模拟）（Limited support from polyfill）

通过Babel的腻子脚本，能够支持大部分API，然而，由于各种原因（例如，String.prototype.normalize需要添加大量代码）并未全部支持。你可以点击这里找到更多腻子脚本。

二进制和八进制字面量（Binary and Octal Literals）

新增了二进制和八进制字面量表示法（注意和原来的ES5废弃的八进制表示法不同）。

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

仅支持字面量形式（Only supports literal form）

Babel仅能转换0o767，不支持Numver("0o767")。

Promises

所谓Promise，就是一个对象，用来传递异步操作的消息。它代表了某个未来才会知道结果的事件（通常是一个异步操作），并且这个事件提供统一的API，可供进一步处理。目前JavaScript库已在使用中。

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

需要使用腻子脚本（Support via polyfill）

要想使用Promises需要引用Babel腻子脚本。

反射（Reflect API）

Reflect对象与Proxy对象一样，也是ES6为了操作对象而提供的新API。

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

需要使用腻子脚本（Support via polyfill）

Reflect API需要引用babel 腻子脚本。

尾调用（Tail Calls）

尾调用（Tail Call）是函数式编程的一个重要概念，本身非常简单，一句话就能说清楚，就是指某个函数的最后一步是调用另一个函数。

对于尾递归来说，由于只存在一个调用帧，所以永远不会发生“栈溢出”错误。

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

// 现在的实现大部分都会移除，但在ES2015中不会
factorial(100000)

原文链接

https://babeljs.io/docs/learn-es2015/

打赏其他方式

本文对你有帮助？那就赏杯咖啡吧

微信扫一扫转账支付宝扫一扫转账

以上内容是否对您有帮助：

← 快来使用ECMAScript 2015吧

快来使用ES2015的Promise吧 →

写笔记

我要补充

ECMAScript 2015 简易教程

背景

简介

ECMAScript 6 新特性

箭头函数和静态this（Arrows and Lexical This）

类（Classes）

增强对象字面量（Enhanced Object Literals）

模版字符串（Template Strings）

解构（Destructuring）

默认值 + Rest参数 + 扩展运算符（Default + Rest + Spread）

Let + Const

Iterator和for..of循环（Iterators + For..Of）

需要腻子脚本（Support via polyfill）

Generator 函数（Generators）

需要腻子脚本（Support via polyfill）

Unicode

模块（Modules）

模块格式化

Map + Set + WeakMap + WeakSet

需要使用polyfill

代理（Proxies）

不支持的特性（Unsupported feature）

Symbols

需要腻子脚本（不完备）（Limited support via polyfill）

继承内建父类（Subclassable Built-ins）

部分支持（Partial support）

Math + Number + String + Object APIs

需要使用腻子脚本（不能完全模拟）（Limited support from polyfill）

二进制和八进制字面量（Binary and Octal Literals）

仅支持字面量形式（Only supports literal form）

Promises

需要使用腻子脚本（Support via polyfill）

反射（Reflect API）

需要使用腻子脚本（Support via polyfill）

尾调用（Tail Calls）

原文链接

更多资料

打赏其他方式