ECMAScript 2015 简易教程

jopen 5年前

背景

本文最初源自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/

更多资料

知识共享许可协议
颜海镜的博客颜海镜 创作,采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议进行许可。
基于http://yanhaijing.com上的作品创作。

原文网址:http://yanhaijing.com/javascript/2015/09/11/learn-es2015

感谢您的阅读,如果您对我的博客所讲述的内容有兴趣,请继续关注我的后续博客

开源项目

  • lodJS JavaScript模块加载器,基于AMD。
  • data.js 是带有消息通知的数据中心,我把她称为活的数据。
  • template.js 一款javascript模板引擎,简单,好用。
  • 变色方块 是一款休闲益智小游戏,适合所有人群。
  • 查看更多

捐赠

支付宝帐号:yanhaijing@yeah.net