ECMAScript6-下一代Javascript標準

介紹

 

ECMAScript6是下一代Javascript標準，這個標準將在2015年6月獲得批准。ES6是Javascript的一個重大的更新，而且是自2009年發佈ES5以來的第一次更新。 它將會在主要的Javascript引擎實現如下新的特性。

 

Arrows（箭頭函數）

 

ES6容許使用「箭頭」（=>）定義函數。在語法上相似於C#、Java8和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));
  }
}

　

Classe結構

 

相對於目前使用的基於原型的面向對象模式而言，ES6中的class作法是一個簡單的語法糖。它有一個方便的申明模式，而且鼓勵互操做性。 class支持基於原型的繼承、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();
  }
}

 

在上面的代碼中，ES6使用constructor方法代替ES5的構造函數。

 

加強的Object對象

 

Object對象的加強ES6容許直接寫入變量和函數，做爲對象的屬性和方法。這樣的書寫更加簡潔。

var obj = {
    // __proto__
    __proto__: theProtoObj,
    // 對 ‘handler: handler’ 的簡化版
    handler,
    // 方法
    toString() {
     // Super calls
     return "d " + super.toString();
    },
    // 計算（動態）屬性名稱
    [ 'prop_' + (() => 42)() ]: 42
};

 

模板字符串

 

模板字符串提供構造字符串的語法糖，這種用法相似perl，python中的插值特徵功能。 可選地,能夠添加一個標籤容許自定義字符串建設,避免注入攻擊或從字符串構造更高層次數據結構的內容。

// 基本的字符串建立
`In JavaScript '\n' is a line-feed.`

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

// 構建DOM查詢
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

GET`http://foo.org/bar?a=${a}&b=${b}

X-Credentials: ${credentials}
    { "foo": ${foo},
      "bar": ${bar}}`(myOnReadyStateChangeHandler);

 

Let 和 Const操做符

 

ES6新增了let命令，用來聲明變量。它的用法相似於var，可是所聲明的變量，只在let命令所在的代碼塊內有效。 const也用來聲明變量，可是聲明的是常量。一旦聲明，常量的值就不能改變。

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循環

 

JavaScript原有的for...in循環，只能得到對象的鍵名，不能直接獲取鍵值。ES6提供for...of循環，容許遍歷得到鍵值

 

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

 

Generators

 

ES6草案定義的generator函數，須要在function關鍵字後面，加一個星號。而後，函數內部使用yield語句，定義遍歷器的每一個成員。

yield有點相似於return語句，都能返回一個值。區別在於每次遇到yield，函數返回緊跟在yield後面的那個表達式的值，而後暫停執行，下一次從該位置繼續向後執行，而return語句不具有位置記憶的功能。

 

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

 

Modules 模塊

 

• 基本用法

  ES6容許定義模塊。也就是說，容許一個JavaScript腳本文件調用另外一個腳本文件。

  假設有一個circle.js，它是一個單獨模塊。

    // circle.js
  
    export function area(radius) {
      return Math.PI * radius * radius;
    }
  
    export function circumference(radius) {
      return 2 * Math.PI * radius;
    }

   

  而後，main.js引用這個模塊。

    // main.js
  
    import { area, circumference } from 'circle';
  
    console.log("圓面積：" + area(4));
    console.log("圓周長：" + circumference(14));

  另外一種寫法是總體加載circle.js。

    // main.js
  
    module circle from 'circle';
  
    console.log("圓面積：" + circle.area(4));
    console.log("圓周長：" + circle.circumference(14));

• 模塊的繼承

  一個模塊也能夠繼承另外一個模塊。

    // circleplus.js
  
    export * from 'circle';
    export var e = 2.71828182846;
    export default function(x) {
        return Math.exp(x);
    }

   

  加載上面的模塊。

•   // main.js
  
    module math from "circleplus";
    import exp from "circleplus";
    console.log(exp(math.pi);

   

• 模塊的默認方法

  還能夠爲模塊定義默認方法。

•   // circleplus.js
  
    export default function(x) { return Math.exp(x); }

 

使用

 

目前，V8引擎已經部署了ECMAScript 6的部分特性。使用node.js 0.11版，就能夠體驗這些特性。（下載安裝請移步到node.js官網）

用--harmony參數進入node運行環境，就能夠在命令行下體驗ECMAScript 6了。

node --harmony

 

Github地址： https://github.com/hellfire/es6features-cn