讓我們來看看JavaScript中一些有用的即將推出的功能。您將看到他們的語法，鏈接以及時了解他們的進度，我們將編寫一個小型測試套件，以展示如何立即開始使用這些提案！

JavaScript是如何更新迭代的

如果您已經熟悉Ecma TC39委員會如何決定并處理JavaScript語言的變更，請隨意跳過此部分。

對于我們其他對JavaScript編程語言如何發展感到好奇的人，我想快速概述一下這個過程。

JavaScript是一種名為ECMAScript的語言標準的實現，它被創建用于標準化語言的所有實現，因為它是在Web瀏覽器的早期發展而來的。

已經有八個版本的ECMAScript標準 ，有七個版本（第四版被放棄）。

每個JavaScript引擎開始實現每次發布后指定的更改。此圖表將顯示并非每個引擎都實現每個功能，并且某些引擎需要比其他引擎更長的時間來實現這些功能。雖然這可能看起來不是最佳的，但我相信它比沒有標準更好！

建議

每個ECMAScript版本都經過審核提案的過程。如果提案被認為有用且向后兼容，則將包含在下一版中。

提案有五個階段，在本文檔中概述。每個提案都是最初提出的“strawman”或stage 0。在這個級別，他們要么尚未提交給技術委員會，要么尚未被拒絕，但仍未達到進入下一階段的標準。

下面顯示的提案都不屬于第0階段。

作為個人推薦，我想鼓勵讀者避免在生產應用程序中使用0階段提案，直到它們處于不穩定的階段。此建議的目的只是為了避免在提案被放棄或徹底更改時出現問題。

測試套件

編程功能的介紹通常會顯示脫離上下文的代碼段，或者使用這些功能來構建應用程序。由于我是TDD的忠實粉絲，我相信更好的方法來了解功能的作用是測試它。

我們將使用Jim Newkirk創造的學習測試來實現這一目標 _._，我們編寫的測試將使斷言不是關于我們自己的代碼，而是關于編程語言本身。在學習第三方API或任何其他語言功能時，這個相同的概念非常有用。

Transpilers

如果您已熟悉轉換器，請隨意跳過此部分。

有些人可能想知道我們將如何使用尚未實現的語言功能！

JavaScript是一種不斷發展的語言，它帶有一些將JavaScript編譯成JavaScript的轉換器 。在表面上可能聽起來不是很有幫助，但我向你保證！

它允許我們編寫最新版本的JavaScript - 甚至包括0階段提案 - 并且仍然能夠在當今的運行時環境中執行它，如Web瀏覽器和Node.js.它通過將我們的代碼更改為為舊版本的JavaScript編寫而實現此目的。

Babel是最受歡迎的JavaScript轉發器之一。我們將在馬上使用它。

步驟

您需要安裝Node.js和NPM。

為此，您可以在新目錄中運行以下命令：

npm init -f && npm i ava@1.0.0-beta.3 @babel/preset-env@7.0.0-beta.42 @babel/preset-stage-0@7.0.0-beta.42 @babel/register@7.0.0-beta.42 @babel/polyfill@7.0.0-beta.42 @babel/plugin-transform-runtime@7.0.0-beta.42 @babel/runtime@7.0.0-beta.42 --save-dev

然后，您需要將以下內容添加到package.json文件中：

"scripts": { "test": "ava"},"ava": { "require": [ "@babel/register", "@babel/polyfill" ] }

最后創建一個.babelrc文件：

{ "presets": [ ["@babel/preset-env", { "targets": { "node": "current" } }], "@babel/preset-stage-0" ], "plugins": [ "@babel/plugin-transform-runtime" ]}

現在你準備開始寫一些測試了！

1.可選鏈接

在JavaScript中，我們一直在使用Objects。有時這些物體沒有我們期望的確切形狀。下面你會找到一個人為的數據對象示例 - 可能是從數據庫或API調用中檢索到的。

const data = { user: { address: { street: 'Pennsylvania Avenue', }, },};

哎呀，看起來這個用戶沒有完成注冊：

const data = { user: {},};

假設，當我嘗試訪問應用程序儀表板上的街道時，我會收到以下錯誤：

console.log(data.user.address.street); // Uncaught TypeError: Cannot read property 'street' of undefined

為避免這種情況，我們目前必須訪問“street”屬性，如下所示：

const street = data && data.user && data.user.address && data.user.address.street;console.log(street); // undefined

在我看來，這種方法是：

不美觀

繁重

啰嗦

這里是可選鏈接的地方。您可以像這樣使用它：

console.log(data.user?.address?.street); // undefined

那更容易，對吧？現在我們已經看到了這個功能的用處，我們可以繼續深入研究。

所以我們來寫一個測試！

現在我們看到可選鏈接保持了點符號的先前功能。接下來，讓我們為不愉快的路徑添加一個測試。

以下是可選鏈接如何用于數組屬性訪問：

有時我們不知道函數是否在Object中實現。

一個常見的例子是當您使用Web瀏覽器時。某些舊版瀏覽器可能沒有某些功能。值得慶幸的是，我們可以使用可選鏈接來檢測函數是否已實現！

如果鏈不完整，表達式將不會執行。在幕后，表達式大致轉變為：

value == null ? value[some expression here]: undefined;

在可選鏈操作符之后沒有什么？如果值未定義或為null，則將執行。我們可以在以下測試中看到該規則的實際應用：

有了它！可選鏈接減少了對if語句，lodash等導入庫以及使用&&進行鏈接的需求。

一句警告: 您可能會注意到使用此可選鏈帶來了一些最小的開銷。您檢查的每個級別？必須包含在引擎蓋下的某種條件邏輯中。如果過度使用，將導致性能損失。當你收到或創建對象時，我建議使用它進行某種對象驗證。這將限制對這些檢查的需求，從而限制性能損失。

鏈接

這是該提案的鏈接。我也會在這篇文章的底部復制它，以便您可以在一個地方看到所有提案鏈接！

2. 空值合并

合并：融合或融合在一起

以下是我們在JavaScript中看到的一些常見操作：

檢查未定義或空值

Defaulting Values

確保0，false和空字符串不是默認值。

您可能已經看到它像這樣：

value != null ? value : 'default value';

或者這樣：

value || 'default value'

問題是，對于第二個實現，我們的第三個操作條件不滿足。在這種情況下，數字零，布爾值false和空字符串都被視為false。這就是我們必須明確檢查null和undefined的原因。

value != null

這與：

value !== null && value !== undefined

這就是新提案（無效合并）的用武之地?，F在我們可以這樣做：

value ?? 'default value';

這可以保護我們不會意外地默認那些虛假的值，但是仍然會在沒有三元和！= null檢查的情況下捕獲null和undefined。

現在我們看到了語法，我們可以編寫一個簡單的測試來驗證它是如何工作的。

您可以在測試中看到它使用null，undefined和void 0的默認值（計算結果為undefined）。它不會默認虛假值，如0，''和false。在這里查看GitHub。

3. 管道運算符

在函數式編程中，我們有一個術語“組合”，它是將多個函數調用鏈接在一起的行為。每個函數接收前一個函數的輸出作為其輸入。以下是我們在純JavaScript中討論的一個示例：

function doubleSay (str) { return str + ", " + str;} function capitalize (str) { return str[0].toUpperCase() + str.substring(1);} function exclaim (str) { return str + '!';} let result = exclaim(capitalize(doubleSay("hello")));result //=> "Hello, hello!"

這種串聯是如此常見，以至于組合函數存在于大多數功能庫中，如lodash和ramda。

使用新的管道運算符，您可以跳過第三方庫并按如下所示編寫上述內容：

let result = "hello" |> doubleSay |> capitalize |> exclaim;result //=> "Hello, hello!"

目的是使_鏈_更具可讀性。它也將在未來部分應用中很好地工作，或者現在它可以像這樣實現：

let result = 1 |> (_ => Math.max(0, _));result //=> 1 let result = -5 |> (_ => Math.max(0, _));result //=> 0

現在我們看到了語法，我們可以開始編寫測試了！

您可能注意到的一件事是，一旦將異步函數添加到管道，您必須等待該值。這是因為價值已成為承諾。有一些建議的更改支持|>等待asyncFunction，但尚未實現或決定。

好了，既然你已經看到了這些建議的實際應用，我希望你能夠嘗試一下這些建議！

學習測試的完整代碼可以在這里找到。

以下是所有四個提案鏈接 :

tc39/proposal-optional-chaining _Contribute to proposal-optional-chaining development by creating an account on GitHub._github.com[](https://github.com/TC39/propo...

tc39/proposal-nullish-coalescing _proposal-nullish-coalescing - Nullish coalescing proposal x??? y_github.com[](https://github.com/tc39/propo...

tc39/proposal-partial-application _proposal-partial-application - Proposal to add partial application to ECMAScript_github.com[](https://github.com/tc39/propo...

tc39/proposal-pipeline-operator _proposal-pipeline-operator - A proposal for adding the simple-but-useful pipeline operator to JavaScript._github.com[](https://github.com/tc39/propo...

總結

以上是生活随笔為你收集整理的三个值得期待的JavaScript新功能！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。