摘要：每個(gè)引擎開(kāi)始實(shí)現(xiàn)每次發(fā)布后指定的更改。每個(gè)提案都是最初提出的或。此建議的目的只是為了避免在提案被放棄或徹底更改時(shí)出現(xiàn)問(wèn)題。這將限制對(duì)這些檢查的需求，從而限制性能損失。這與這就是新提案無(wú)效合并的用武之地。這是因?yàn)閮r(jià)值已成為承諾。

讓我們來(lái)看看JavaScript中一些有用的即將推出的功能。您將看到他們的語(yǔ)法，鏈接以及時(shí)了解他們的進(jìn)度，我們將編寫(xiě)一個(gè)小型測(cè)試套件，以展示如何立即開(kāi)始使用這些提案！

如果您已經(jīng)熟悉Ecma TC39委員會(huì)如何決定并處理JavaScript語(yǔ)言的變更，請(qǐng)隨意跳過(guò)此部分。

對(duì)于我們其他對(duì)JavaScript編程語(yǔ)言如何發(fā)展感到好奇的人，我想快速概述一下這個(gè)過(guò)程。

JavaScript是一種名為ECMAScript的語(yǔ)言標(biāo)準(zhǔn)的實(shí)現(xiàn)，它被創(chuàng)建用于標(biāo)準(zhǔn)化語(yǔ)言的所有實(shí)現(xiàn)，因?yàn)樗窃赪eb瀏覽器的早期發(fā)展而來(lái)的。

已經(jīng)有八個(gè)版本的ECMAScript標(biāo)準(zhǔn) ，有七個(gè)版本（第四版被放棄）。

每個(gè)JavaScript引擎開(kāi)始實(shí)現(xiàn)每次發(fā)布后指定的更改。此圖表將顯示并非每個(gè)引擎都實(shí)現(xiàn)每個(gè)功能，并且某些引擎需要比其他引擎更長(zhǎng)的時(shí)間來(lái)實(shí)現(xiàn)這些功能。雖然這可能看起來(lái)不是最佳的，但我相信它比沒(méi)有標(biāo)準(zhǔn)更好！

每個(gè)ECMAScript版本都經(jīng)過(guò)審核提案的過(guò)程。如果提案被認(rèn)為有用且向后兼容，則將包含在下一版中。

提案有五個(gè)階段，在本文檔中概述。每個(gè)提案都是最初提出的“strawman”或stage 0。在這個(gè)級(jí)別，他們要么尚未提交給技術(shù)委員會(huì)，要么尚未被拒絕，但仍未達(dá)到進(jìn)入下一階段的標(biāo)準(zhǔn)。

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

作為個(gè)人推薦，我想鼓勵(lì)讀者避免在生產(chǎn)應(yīng)用程序中使用0階段提案，直到它們處于不穩(wěn)定的階段。此建議的目的只是為了避免在提案被放棄或徹底更改時(shí)出現(xiàn)問(wèn)題。

編程功能的介紹通常會(huì)顯示脫離上下文的代碼段，或者使用這些功能來(lái)構(gòu)建應(yīng)用程序。由于我是TDD的忠實(shí)粉絲，我相信更好的方法來(lái)了解功能的作用是測(cè)試它。

我們將使用Jim Newkirk創(chuàng)造的學(xué)習(xí)測(cè)試來(lái)實(shí)現(xiàn)這一目標(biāo) _._，我們編寫(xiě)的測(cè)試將使斷言不是關(guān)于我們自己的代碼，而是關(guān)于編程語(yǔ)言本身。在學(xué)習(xí)第三方API或任何其他語(yǔ)言功能時(shí)，這個(gè)相同的概念非常有用。

如果您已熟悉轉(zhuǎn)換器，請(qǐng)隨意跳過(guò)此部分。

有些人可能想知道我們將如何使用尚未實(shí)現(xiàn)的語(yǔ)言功能！

JavaScript是一種不斷發(fā)展的語(yǔ)言，它帶有一些將JavaScript編譯成JavaScript的轉(zhuǎn)換器 。在表面上可能聽(tīng)起來(lái)不是很有幫助，但我向你保證！

它允許我們編寫(xiě)最新版本的JavaScript - 甚至包括0階段提案 - 并且仍然能夠在當(dāng)今的運(yùn)行時(shí)環(huán)境中執(zhí)行它，如Web瀏覽器和Node.js.它通過(guò)將我們的代碼更改為為舊版本的JavaScript編寫(xiě)而實(shí)現(xiàn)此目的。

Babel是最受歡迎的JavaScript轉(zhuǎn)發(fā)器之一。我們將在馬上使用它。

您需要安裝Node.js和NPM。

為此，您可以在新目錄中運(yùn)行以下命令：

npm init -f && npm i [email protected] @babel/[email protected] @babel/[email protected] @babel/[email protected] @babel/[email protected] @babel/[email protected] @babel/[email protected] --save-dev

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

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

最后創(chuàng)建一個(gè).babelrc文件：

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

現(xiàn)在你準(zhǔn)備開(kāi)始寫(xiě)一些測(cè)試了！

在JavaScript中，我們一直在使用Objects。有時(shí)這些物體沒(méi)有我們期望的確切形狀。下面你會(huì)找到一個(gè)人為的數(shù)據(jù)對(duì)象示例 - 可能是從數(shù)據(jù)庫(kù)或API調(diào)用中檢索到的。

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

哎呀，看起來(lái)這個(gè)用戶沒(méi)有完成注冊(cè)：

const data = {  user: {},};

假設(shè)，當(dāng)我嘗試訪問(wèn)應(yīng)用程序儀表板上的街道時(shí)，我會(huì)收到以下錯(cuò)誤：

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

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

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

在我看來(lái)，這種方法是：

不美觀

繁重

啰嗦

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

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

那更容易，對(duì)吧？現(xiàn)在我們已經(jīng)看到了這個(gè)功能的用處，我們可以繼續(xù)深入研究。

所以我們來(lái)寫(xiě)一個(gè)測(cè)試！

現(xiàn)在我們看到可選鏈接保持了點(diǎn)符號(hào)的先前功能。接下來(lái)，讓我們?yōu)椴挥淇斓穆窂教砑右粋€(gè)測(cè)試。

以下是可選鏈接如何用于數(shù)組屬性訪問(wèn)：

有時(shí)我們不知道函數(shù)是否在Object中實(shí)現(xiàn)。

一個(gè)常見(jiàn)的例子是當(dāng)您使用Web瀏覽器時(shí)。某些舊版瀏覽器可能沒(méi)有某些功能。值得慶幸的是，我們可以使用可選鏈接來(lái)檢測(cè)函數(shù)是否已實(shí)現(xiàn)！

如果鏈不完整，表達(dá)式將不會(huì)執(zhí)行。在幕后，表達(dá)式大致轉(zhuǎn)變?yōu)椋?/p>

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

在可選鏈操作符之后沒(méi)有什么？如果值未定義或?yàn)閚ull，則將執(zhí)行。我們可以在以下測(cè)試中看到該規(guī)則的實(shí)際應(yīng)用：

有了它！可選鏈接減少了對(duì)if語(yǔ)句，lodash等導(dǎo)入庫(kù)以及使用&&進(jìn)行鏈接的需求。

一句警告: 您可能會(huì)注意到使用此可選鏈帶來(lái)了一些最小的開(kāi)銷。您檢查的每個(gè)級(jí)別？必須包含在引擎蓋下的某種條件邏輯中。如果過(guò)度使用，將導(dǎo)致性能損失。當(dāng)你收到或創(chuàng)建對(duì)象時(shí)，我建議使用它進(jìn)行某種對(duì)象驗(yàn)證。這將限制對(duì)這些檢查的需求，從而限制性能損失。

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

合并：融合或融合在一起

以下是我們?cè)贘avaScript中看到的一些常見(jiàn)操作：

檢查未定義或空值

Defaulting Values

確保0，false和空字符串不是默認(rèn)值。

您可能已經(jīng)看到它像這樣：

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

或者這樣：

value || "default value"

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

value != null

這與：

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

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

value ?? "default value";

這可以保護(hù)我們不會(huì)意外地默認(rèn)那些虛假的值，但是仍然會(huì)在沒(méi)有三元和！= null檢查的情況下捕獲null和undefined。

現(xiàn)在我們看到了語(yǔ)法，我們可以編寫(xiě)一個(gè)簡(jiǎn)單的測(cè)試來(lái)驗(yàn)證它是如何工作的。

您可以在測(cè)試中看到它使用null，undefined和void 0的默認(rèn)值（計(jì)算結(jié)果為undefined）。它不會(huì)默認(rèn)虛假值，如0，""和false。在這里查看GitHub。

在函數(shù)式編程中，我們有一個(gè)術(shù)語(yǔ)“組合”，它是將多個(gè)函數(shù)調(diào)用鏈接在一起的行為。每個(gè)函數(shù)接收前一個(gè)函數(shù)的輸出作為其輸入。以下是我們?cè)诩僇avaScript中討論的一個(gè)示例：

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!"

這種串聯(lián)是如此常見(jiàn)，以至于組合函數(shù)存在于大多數(shù)功能庫(kù)中，如lodash和ramda。

使用新的管道運(yùn)算符，您可以跳過(guò)第三方庫(kù)并按如下所示編寫(xiě)上述內(nèi)容：

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

目的是使_鏈_更具可讀性。它也將在未來(lái)部分應(yīng)用中很好地工作，或者現(xiàn)在它可以像這樣實(shí)現(xiàn)：

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

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

現(xiàn)在我們看到了語(yǔ)法，我們可以開(kāi)始編寫(xiě)測(cè)試了！

您可能注意到的一件事是，一旦將異步函數(shù)添加到管道，您必須等待該值。這是因?yàn)閮r(jià)值已成為承諾。有一些建議的更改支持|>等待asyncFunction，但尚未實(shí)現(xiàn)或決定。

好了，既然你已經(jīng)看到了這些建議的實(shí)際應(yīng)用，我希望你能夠嘗試一下這些建議！

學(xué)習(xí)測(cè)試的完整代碼可以在這里找到。

以下是所有四個(gè)提案鏈接 :

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...