2016 年 8 月

第 31 卷,第 8 期

本文章是由機器翻譯。

工作的程式師如何成為平均: 探索 ECMAScript

Ted Neward |2016 年 8 月

Ted Neward歡迎回來,MEANers。

我們 2016年中間。什麼,可能不知道該的 javascript (也就是實際正式 ECMAScript) 有新版本的語言,而 ECMAScript 2015。如果您的 JavaScript 程式碼不開始使用它,則啟動時間。幸運的是,它並非易事,因為有很好的理由,若要這樣做。在這一期,我將討論一些更有趣且很重要的功能 ECMAScript 2015,並在未來的部分,我將探討什麼平均值使用較新的樣式會類似 (基本上,既然你確實立足點上如何代表應用程式運作,我會完全重新啟動程式碼基底,詳細說明,然後)。

簡單的變更

某些語言最簡單的變更只是利用以來已廣泛使用的慣例生態系統和社群中的程式設計模式。

這些慣例的其中一個是不變性,ECMAScript 2015 具體實現透過 const 宣告的使用︰

const firstName = "Ted";

如此一來,像 c + + 宣告相同名稱的宣告的參考名稱 (「 firstName 」) 可以永遠不會指向任何一處;它不堅持參考所指向的物件不能變更。ECMAScript 2015 也有可變動參考宣告的新表單,讓,也就是基本上掉落取代 var;我建議採行任何有機會。

多個 「 方便性 >-類型變更為字串插補加入使用 backticks (向左傳閱簡報的單引號,通常會出現下方美式鍵盤上波狀符號),而不單引號或雙引號的語言︰

const speaker = { name: "Brian Randell", rating: 5 };
console.log(`Speaker ${speaker.name} got a rating of ${speaker.rating}`);

如 C#-樣式字串插補,ECMAScript 2015 會將運算式解譯在大括弧,嘗試將它轉換成字串並將它插入所產生的字串。

其中一項語言更重要的變更已採用 「 區塊範圍 」。先前,在 JavaScript 中,變數只限於函式,而不是將任意程式碼區塊。這表示任何位置宣告函式內的任何變數是在整個函式,而不只是在其中宣告,這是令人困惑及難以察覺的錯誤來源區塊可存取。

區塊範圍設定的有趣的副作用是 ECMAScript 現在取得區域宣告的函式,類似於 C# 7 建議︰

{
  function foo () { return 1 }
  foo() === 1
  {
    function foo () { return 2 }
    foo() === 2
  }
  foo() === 1
}

在這裡,我定義函式 foo 在區塊中,以傳回值 1。然後,沒有特定的理由,我介紹新的範圍區塊、 定義新的 foo,定義並示範當該範圍區塊結束時,先前的版本傳回 foo 的定義,而這正是地球表面幾乎每一種其他語言的用途已經。

不過,idiomatically,ECMAScript 不會使用本機巢狀函式。相反地,它會偏好多的功能性程式設計慣用句,定義指向一個匿名函式定義,並使用該變數參考。以支援 ECMAScript 2015 現在支援箭號函式,可以使用幾乎相同的 C# 的語法︰

const nums = [1, 2, 3, 4, 5];
nums.forEach(v => {
  if (v % 2 == 0)
    console.log(v);
});

(請記住,您加入函式 forEach 陣列做為前一個採用標準的一部分)。 這將會假設,列印出陣列中的偶數。相反地,我想要建構從來源陣列的偶數,如果我可以使用 「 對應 」 的內建和箭號函式來執行基本上是相同的動作︰

const nums = [1, 2, 3, 4, 5];
const evens = nums.map(v => v * 2);

箭號函式是長時間等候的變更,而且很假以時日,最多 JavaScript 為基礎程式碼會採用這些積極。

承諾

已透過 ECMAScript 的社群,幫助解決部分周圍 Node.js 回呼樣式程式設計的複雜度浮動的許多解決方案,其中一個週期性的佈景主題是 「 承諾 」 的 — 基本上,程式庫為基礎的方法,以便將轉換回呼項目看起來更序列在本質上。數個不同的承諾為基礎的程式庫常用在社群中,而 ECMAScript 委員會最後選擇標準化的它現在就是指為 「 承諾 」。(請注意大寫名稱中,這也是用來實作這些主體物件的名稱)。 使用 ECMAScript 2015 承諾可以有點怪,在第一,相較於標準的同步程式設計,但大多數的情況下,它的外觀有意義。

請考慮一下,想要叫用使用承諾要能夠做一些在背景中的程式庫常式的應用程式程式碼︰

msgAfterTimeout("Foo", 100).then(() =>
  msgAfterTimeout("Bar", 200);
).then(() => {
  console.log(`done after 300ms`);
});

這裡的概念是該 msgAfterTimeout 即將 100 毫秒的逾時之後列印"Hello,Foo",並完成之後,再次執行相同的動作 ("Hello,列"200 毫秒之後),並完成之後,只要將訊息列印至主控台。請注意如何使用連接的步驟,然後函式呼叫 — msgAfterTimeout 從傳回的物件是承諾物件,然後在定義初始承諾已完成執行時,叫用的函式。本節將說明名稱 — 承諾物件是,實際上交期承諾初始程式碼完成時叫用然後函式。(此外,萬一發生例外狀況的函式中怎麼辦? 承諾,可讓您指定在此情況下,執行的函式使用 catch 方法)。

在您要同時執行數個函數,全部完成之後,再執行函式的情況下,您可以使用 Promise.all:

const fetchPromised = (url, timeout) => { /* ... */ }
Promise.all([
  fetchPromised("http://backend/foo.txt", 500),
  fetchPromised("http://backend/bar.txt", 500),
  fetchPromised("http://backend/baz.txt", 500)
]).then((data) => {
  let [ foo, bar, baz ] = data;
  console.log(`success: foo=${foo} bar=${bar} baz=${baz}`);
}, (err) => {
  console.log(`error: ${err}`);
});

如您所見,將會收集和組裝至陣列,然後傳遞做為第一個參數 (第一個) 的函數,然後提供給每個以非同步方式執行的函式的結果。(讓陳述式是在 ECMAScript 2015 中,另一項新功能的 「 解構指派 「 範例; 基本上,資料陣列的每個項目指派給每個這些三個宣告的變數和其他內容,如果有的話,被丟棄。) 請注意,,,然後傳遞第二個函式,用於指定,在執行任何非同步函式會在發生錯誤。

是另一個樣式的程式設計,但不是尋常的人所花費的時間正與各種 C# 非同步機制,PLINQ 或 TPL a la。

文件庫

ECMAScript 2015 已超出承諾位置,以加入標準程式庫 (其中所有 ECMAScript 環境都應該要提供,他們可能在瀏覽器或伺服器) 的一些重要事項。特別是,他們已新增對應 (索引鍵/值存放區,類似於.NET 字典 < K,V > 類型) 和集合 (不可重複 」 包"的值),都可以使用而不需要任何種類的匯入︰

const m = new Map();
m.set("Brian", 5);
m.set("Rachel", 5);
console.log(`Brian scored a ${m.get("Brian")} on his talk`);
const s = new Set();
s.add("one");
s.add("one"); // duplicate
s.add("one"); // duplicate
console.log(`s holds ${s.size} elements`);
  // Prints "1"

此外,新增數個標準函式原型已經 ECMAScript 在環境中,例如尋找陣列的各種物件和數值評估方法 (例如 isNAN 或 isFinite) 的數字的原型。大多數的情況下,這些與先前的對應和集合型別已經存在社群中為第三方封裝,但標準 ECMAScript 程式庫將它們有助於減少一些 litter ECMAScript 橫向封裝相依性。

模組

或許其中一項最重要的變更,至少建置標準為基礎的應用程式的觀點而言,是採用了正式模組系統。之前,我幾乎討論一年前,平均值為基礎的應用程式會使用 Node.js 需要另一個 JavaScript 檔案的 「 匯入 」 (解譯/執行) 的函式,並傳回物件使用。這表示平均的開發人員撰寫下列這一行,藉由評估 node_modules,npm 將透過已安裝在子目錄中儲存的 JavaScript 檔案傳回的 express 物件︰

var express = require('express');

若要這麼做,數個慣例必須先準備就緒,它能運作,但程序缺乏完全受到影響的語言和生態系統的進展。ECMAScript 2015 新關鍵字引入的規定。

它是有點循環說明,請讓我們開始的簡單範例︰ 兩個檔案、 一個稱為的 app.js 和其想要使用時,程式庫呼叫數學運算。數學程式庫會非 npm 程式庫 (適用於簡化),且會有兩個值,它會匯出︰ 呼叫 PI 和函式加總的數字陣列 (3.14),pi 的值稱為總和︰

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

請注意在程式庫進行用戶端可以存取的符號會以 「 匯出 」 關鍵字宣告,並參考程式庫,當您使用關鍵字 「 匯入。 」 更常見地,不過,您要匯入符號從程式庫為最上層項目本身 (而不是成員),更常見的用法很可能是這樣︰

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

如此一來,可以使用匯入的符號,直接,而非以其成員範圍的格式。

總結

ECMAScript 2015 中的超強隱藏是標準。讀者還沒有看過任何一項功能現在之前應該明確地查看 (不斷成長的清單) 的任何網際網路上找到說明新的標準的資源。官方 ECMA 標準,請參閱 bit.ly/1xxQKpl (它會列出目前的規格做為第 7 版,這多半是因為 ECMA 已決定要在新的語言變更瀏覽至每年的韻律呼叫 ECMAScript 2016)。不過,如需較少 「 正式 」 描述的語言,讀者都建議簽出 es6-features.org,它提供一份新語言功能以及其為何語言前存在的比較。

此外,Node.js 幾乎完全符合 ECMAScript 2015 的功能集時,其他環境,或在各種狀態的支援。不是最完整的層級的支援,這些環境中,有兩種 「 transpiler 」 工具 — Google 贊助 Traceur 編譯器和 Babel 編譯器。(兩者都是,當然就 npm 了。) 當然,Microsoft 擁有 TypeScript 是非常接近什麼 ECMAScript 2015 最後出現的這表示一個無法立即採用 TypeScript,成為幾乎一行的行符合 ECMAScript 2015 時轉換為 ECMAScript 2015 是需要或希望。

所有這些功能將會變得更明顯,當您開始使用平均值的工具,可讓使用,因此不強調現在不合理尚未。同時...祝各位寫程式!


Ted Neward 是西雅圖 polytechnology 顧問、 講師及指導。 他已寫入 100 個以上的文章,是 F # MVP 和具有作者及合著者著作。與他連絡 ted@tedneward.com 如果您想要讓他來自與您的小組,或是閱讀他的部落格 blogs.tedneward.com

感謝以下技術專家對本文的審閱: Shawn Wildermuth