ES6语法 学习

ECMAScript 6，也被称为ECMAScript 2015是ECMAScript标准的最新版本。6是语言的一个重要更新，并第一次更新语言由于ES5 2009标准。现在主要JavaScript引擎中实现这些特性正在进行中。看到的ECMAScript 6语言完整规范的ES6标准。

微信小程序支持ES6写法

ECMAScript 6包括以下新的特点：

Arrows

箭头是使用=>语法的函数缩写。它们在语法上类似于C＃，Java 8和CoffeeScript中的相关功能。它们既支持语句块体，又支持返回表达式值的表达式体。与函数不同，箭头与this周围的代码共享相同的词汇。

// Expression bodies
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}));

// Statement bodies
nums.forEach(v => {
  if (v % 5 === 0)
    fives.push(v);
});

// Lexical this
var bob = {
  _name: "Bob",
  _friends: [],
  printFriends() {
    this._friends.forEach(f =>
      console.log(this._name + " knows " + f));
  }
}

更多信息：[https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions]

Class

ES6类是基于原型的OO模式的简单糖。拥有一个简单的声明式表单使得类模式更容易使用，并且鼓励互操作性。类支持基于原型的继承，超级调用，实例和静态方法和构造函数。

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

更多信息：[https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes]

Enhanced Object Literals

对象文字被扩展为支持在构造中设置原型，foo: foo赋值的简写，定义方法，创建超级调用以及使用表达式计算属性名称。这些也将对象文字和类声明紧密地结合在一起，让基于对象的设计从一些相同的便利中受益。

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

更多信息：[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Object_literals]

Template Strings

模板字符串为构造字符串提供了语法糖。这与Perl，Python等中的字符串插值功能类似。可选地，可以添加标签以允许定制字符串结构，避免注入攻击或从字符串内容构建更高级别的数据结构。

// Basic literal string creation
`In JavaScript '\n' is a line-feed.`

// Multiline strings
`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);

更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/template_strings

Destructuring 解构

解构允许使用模式匹配进行绑定，支持匹配数组和对象。解构是失败软的，类似于标准对象查找foo["bar"]，undefined当没有找到时产生值。

// list matching
var [a, , b] = [1,2,3];

// object matching
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;

更多MDN信息：[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment]

Iterators + For..Of

迭代器对象支持像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) {
  // truncate the sequence at 1000
  if (n > 1000)
    break;
  console.log(n);
}

迭代是基于这些duck-typed接口（只使用TypeScript类型的语法来说明）：

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

更多信息：[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of]

Generators

生成器使用function*和简化了迭代器创作yield。一个声明为function的函数返回一个Generator实例。生成器是迭代器的子类型，包括附加 next和throw。这些使值能够回流到生成器，所以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) {
  // truncate the sequence at 1000
  if (n > 1000)
    break;
  console.log(n);
}

生成器接口是（仅使用TypeScript语法来进行说明）：

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

更多信息：[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols]

Unicode

支持完整Unicode的非中断添加，包括字符串中的新Unicode字面形式和u处理代码点的新RegExp 模式，以及在21位代码点级别处理字符串的新API。这些附加功能支持使用JavaScript构建全球应用程序。

// same as ES5.1
"