javascript
三个值得期待的JavaScript新功能！
讓我們來看看JavaScript中一些有用的即將推出的功能。您將看到他們的語法，鏈接以及時(shí)了解他們的進(jìn)度，我們將編寫一個(gè)小型測(cè)試套件，以展示如何立即開始使用這些提案！
JavaScript是如何更新迭代的
如果您已經(jīng)熟悉Ecma TC39委員會(huì)如何決定并處理JavaScript語言的變更，請(qǐng)隨意跳過此部分。
對(duì)于我們其他對(duì)JavaScript編程語言如何發(fā)展感到好奇的人，我想快速概述一下這個(gè)過程。
JavaScript是一種名為ECMAScript的語言標(biāo)準(zhǔn)的實(shí)現(xiàn)，它被創(chuàng)建用于標(biāo)準(zhǔn)化語言的所有實(shí)現(xiàn)，因?yàn)樗窃赪eb瀏覽器的早期發(fā)展而來的。
已經(jīng)有八個(gè)版本的ECMAScript標(biāo)準(zhǔn) ，有七個(gè)版本（第四版被放棄）。
每個(gè)JavaScript引擎開始實(shí)現(xiàn)每次發(fā)布后指定的更改。此圖表將顯示并非每個(gè)引擎都實(shí)現(xiàn)每個(gè)功能，并且某些引擎需要比其他引擎更長的時(shí)間來實(shí)現(xiàn)這些功能。雖然這可能看起來不是最佳的，但我相信它比沒有標(biāo)準(zhǔn)更好！
建議
每個(gè)ECMAScript版本都經(jīng)過審核提案的過程。如果提案被認(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)問題。
測(cè)試套件
編程功能的介紹通常會(huì)顯示脫離上下文的代碼段，或者使用這些功能來構(gòu)建應(yīng)用程序。由于我是TDD的忠實(shí)粉絲，我相信更好的方法來了解功能的作用是測(cè)試它。
我們將使用Jim Newkirk創(chuàng)造的學(xué)習(xí)測(cè)試來實(shí)現(xiàn)這一目標(biāo) _._，我們編寫的測(cè)試將使斷言不是關(guān)于我們自己的代碼，而是關(guān)于編程語言本身。在學(xué)習(xí)第三方API或任何其他語言功能時(shí)，這個(gè)相同的概念非常有用。
Transpilers
如果您已熟悉轉(zhuǎn)換器，請(qǐng)隨意跳過此部分。
有些人可能想知道我們將如何使用尚未實(shí)現(xiàn)的語言功能！
JavaScript是一種不斷發(fā)展的語言，它帶有一些將JavaScript編譯成JavaScript的轉(zhuǎn)換器 。在表面上可能聽起來不是很有幫助，但我向你保證！
它允許我們編寫最新版本的JavaScript - 甚至包括0階段提案 - 并且仍然能夠在當(dāng)今的運(yùn)行時(shí)環(huán)境中執(zhí)行它，如Web瀏覽器和Node.js.它通過將我們的代碼更改為為舊版本的JavaScript編寫而實(shí)現(xiàn)此目的。
Babel是最受歡迎的JavaScript轉(zhuǎn)發(fā)器之一。我們將在馬上使用它。
步驟
您需要安裝Node.js和NPM。
為此，您可以在新目錄中運(yùn)行以下命令：
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然后，您需要將以下內(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)備開始寫一些測(cè)試了！
1.可選鏈接
在JavaScript中，我們一直在使用Objects。有時(shí)這些物體沒有我們期望的確切形狀。下面你會(huì)找到一個(gè)人為的數(shù)據(jù)對(duì)象示例 - 可能是從數(shù)據(jù)庫或API調(diào)用中檢索到的。
const data = { user: { address: { street: 'Pennsylvania Avenue', }, },};哎呀，看起來這個(gè)用戶沒有完成注冊(cè)：
const data = { user: {},};假設(shè)，當(dāng)我嘗試訪問應(yīng)用程序儀表板上的街道時(shí)，我會(huì)收到以下錯(cuò)誤：
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那更容易，對(duì)吧？現(xiàn)在我們已經(jīng)看到了這個(gè)功能的用處，我們可以繼續(xù)深入研究。
所以我們來寫一個(gè)測(cè)試！
現(xiàn)在我們看到可選鏈接保持了點(diǎn)符號(hào)的先前功能。接下來，讓我們?yōu)椴挥淇斓穆窂教砑右粋€(gè)測(cè)試。
以下是可選鏈接如何用于數(shù)組屬性訪問：
有時(shí)我們不知道函數(shù)是否在Object中實(shí)現(xiàn)。
一個(gè)常見的例子是當(dāng)您使用Web瀏覽器時(shí)。某些舊版瀏覽器可能沒有某些功能。值得慶幸的是，我們可以使用可選鏈接來檢測(cè)函數(shù)是否已實(shí)現(xiàn)！
如果鏈不完整，表達(dá)式將不會(huì)執(zhí)行。在幕后，表達(dá)式大致轉(zhuǎn)變?yōu)?#xff1a;
value == null ? value[some expression here]: undefined;在可選鏈操作符之后沒有什么？如果值未定義或?yàn)閚ull，則將執(zhí)行。我們可以在以下測(cè)試中看到該規(guī)則的實(shí)際應(yīng)用：
有了它！可選鏈接減少了對(duì)if語句，lodash等導(dǎo)入庫以及使用&&進(jìn)行鏈接的需求。
一句警告: 您可能會(huì)注意到使用此可選鏈帶來了一些最小的開銷。您檢查的每個(gè)級(jí)別？必須包含在引擎蓋下的某種條件邏輯中。如果過度使用，將導(dǎo)致性能損失。當(dāng)你收到或創(chuàng)建對(duì)象時(shí)，我建議使用它進(jìn)行某種對(duì)象驗(yàn)證。這將限制對(duì)這些檢查的需求，從而限制性能損失。鏈接
這是該提案的鏈接。我也會(huì)在這篇文章的底部復(fù)制它，以便您可以在一個(gè)地方看到所有提案鏈接！
2. 空值合并
合并：融合或融合在一起以下是我們?cè)贘avaScript中看到的一些常見操作：
您可能已經(jīng)看到它像這樣：
value != null ? value : 'default value';或者這樣：
value || 'default value'問題是，對(duì)于第二個(gè)實(shí)現(xiàn)，我們的第三個(gè)操作條件不滿足。在這種情況下，數(shù)字零，布爾值false和空字符串都被視為false。這就是我們必須明確檢查null和undefined的原因。
value != null這與：
value !== null && value !== undefined這就是新提案（無效合并）的用武之地。現(xiàn)在我們可以這樣做：
value ?? 'default value';這可以保護(hù)我們不會(huì)意外地默認(rèn)那些虛假的值，但是仍然會(huì)在沒有三元和！= null檢查的情況下捕獲null和undefined。
現(xiàn)在我們看到了語法，我們可以編寫一個(gè)簡(jiǎn)單的測(cè)試來驗(yàn)證它是如何工作的。
您可以在測(cè)試中看到它使用null，undefined和void 0的默認(rèn)值（計(jì)算結(jié)果為undefined）。它不會(huì)默認(rèn)虛假值，如0，''和false。在這里查看GitHub。
3. 管道運(yùn)算符
在函數(shù)式編程中，我們有一個(gè)術(shù)語“組合”，它是將多個(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)是如此常見，以至于組合函數(shù)存在于大多數(shù)功能庫中，如lodash和ramda。
使用新的管道運(yùn)算符，您可以跳過第三方庫并按如下所示編寫上述內(nèi)容：
let result = "hello" |> doubleSay |> capitalize |> exclaim;result //=> "Hello, hello!"目的是使_鏈_更具可讀性。它也將在未來部分應(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)在我們看到了語法，我們可以開始編寫測(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...
總結(jié)
以上是生活随笔為你收集整理的三个值得期待的JavaScript新功能！的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： TIOBE 7 月编程语言榜：TypeS
- 下一篇： MVC+EF三层+抽象工厂