自學js之ES6新內容中的5種好用的極端功能

不用說，我們關心Javascript性能和功能，這就是為什麼ES6對我們來說是如此令人性奮。簡直性福像花兒一樣

ES6的變化是巨大的，令人興奮的，令人困惑的。在本文中，我將介紹新的JavaScript的五個功能，您可以立即使用它們來增加代碼，以及阻止哪些功能。

＃Ecma-what？你懂的！

JavaScript多年來已經有了很多版本，但總體而言，進化很慢，直到最近。我覺得在過去的兩年裡，發生了比過去二十年更多的變化。ES 6代表EcmaScript 6.它也稱為EcmaScript 2015或ES。這些都是“新Javascript”的不同名稱。

我不能完全肯定，為什麼 JS已經改變所以最近多，但似乎是因為主要的JavaScript引擎的業主們終於成為有意推動語言前進。

此外，像TypeScript這樣的透明機器的出現使得在將其用於瀏覽器之前，可以使用新的語言功能。這兩個組合將大量推送JavaScript。

JS很重要，因為它是網絡的結構，並越來越多地用於帶有Node的服務器端應用程序，以及使用Cordova，React Native和Electron的移動和桌面應用程序。

簡而言之：JS無處不在

所以重要的是我們推動它。不演化的語言開始死亡。改善語言意味著我們可以改進我們的代碼。我們的應用程序可以有更少的錯誤。其中一些功能使運行時能夠更快地實際運行代碼。所以讓我們來看看，從變量開始。

＃變量的問題-突破點哦

在Javascript中，當您要創建一個變量時，您可以使用var關鍵字。var是偉大的，但它有幾個問題。首先，變量總是不同。沒有辦法在Javascript中做出一個真正的常數。您可以通過創建具有不可變屬性的對象來分類。您可以覆蓋屬性的setter，使其不能由外部代碼設置，但它是一個額外的打字，需要一個完整的對象，而不是一個簡單的變量。

常規Javascript變量也有一個範圍問題。看看這段代碼。

聲明的變量var是對它們定義的函數的全局變量，而不是塊。你會認為上面的日誌語句不起作用，因為 bar在不同的塊中定義。在一個Java或C＃語言中，你會是對的，但是Javascript var是一個功能的全局變量，而不是塊。

當我們添加變量提升時，它會變得更糟。考慮這個代碼

我foo在定義之前使用。這段代碼甚至意味著什麼？在引擎蓋下，javascript引擎將將變量聲明提升到功能塊的頂部。我可以看看為什麼你可能想要起動功能，但可變提升使得很容易引入一些難以診斷的微妙錯誤。

看看這個for循環：

該變量僅在循環中使用，但我仍然可以在外部引用它。這只是等待發生的大量錯誤。

好消息是我們不用再使用var了。相反，我們可以使用const和let。

＃介紹const和let-看到這快給俺點個贊吧！哈

新關鍵字const正好與名稱所示相符。它使一個真正的不變。如果您嘗試設置常量，您將收到運行時錯誤。更好的是，代碼貼現系統可以在編譯時檢測到這種錯誤，所以您可以在開發時更早而不是在生產中找到錯誤。

使用let關鍵字創建另一種新的變量。 let就是這樣，var但它是由塊而不是功能的範圍。現在我們期待著這樣做

讓我們回顧一下for循環的例子：

現在i變量限於for循環體。沒有辦法可以不經意地使用。此外，let還沒有懸掛，所有這些魔術移動的變量都消失了。

新的關鍵字const和let是一個完整的更換 var。使用現代瀏覽器和最新版本的Node，沒有任何理由使用var。甩掉包袱。

＃超級弦

ES6引入了一種稱為模板文字的新類型的字符串。我更喜歡稱之為超級絃樂。你使用一個超級字符串就像一個常規的字符串，而不是使用單引號或雙引號，你使用回引號。

到目前為止這麼好，但沒有什麼是非常不同的。它確實有一個直接的優勢。如果您需要在字符串中使用雙引號或單引號，則不必再轉義它們。然而，超級絃樂隊還有其他一些技巧。

多線串

最後我們可以有真正的多行字符串。需要引用幾行的東西？你不必逃脫換行符，也不必再加入技巧了。直接放入換行符，它的作品。

表達式轉義

另一個新功能是表達式轉義。在超級字符串中，您可以${}在括號內放置任何有效的Javascript表達式。這比雙引號更加清晰，而最近的IDE將語法突出顯示這些表達式。

將表達式轉義與多行支持相結合，為我們提供了很棒的HTML模板。

＃箭頭功能-小編寫了好多次才習慣了它們的寫法格式

所以這是字符串和變量，但現在讓我們來看看函數。如果您以前聽過有關ES6的內容，那可能就是箭頭功能。這些是寫常規函數但具有更緊湊語法的不同語法。他們也有一個非常重要的區別：this變量意味著不同的東西。我們來看一些代碼。

假設你想循環一個數組，使其中的值加倍，產生一個新的數組。您可以使用以下for循環來執行此操作，但這會創建額外的變量，並且可以很容易地意外斷開或者使索引出錯。加上很多額外的打字。

Javascript數組有一個方法，map它調用每個元素上的一個函數來生成一個新的元素，然後將其放入一個新的數組中。它的工作原理如下：

這看起來更好，但它會很好，使它更小。這x*2部分是實際上做的唯一的工作。其餘的是句法開銷。使用箭頭功能，我們可以這樣做：

哇！這太小了 讓我解釋一下發生了什麼。一個箭頭功能可以重寫一個沒有實際function字的功能 。相反，將=>括號中的函數參數放在後面。

箭頭功能讓我們寫同樣的東西更小。但我們可以使事件更短。我們來刪除空格。相同的代碼只是更短。

但是我們可以使它更短。如果箭頭函數只包含一個表達式，我們可以刪除返回值和大括號和分號，導致一個微小的一行表達式，它會自動返回它的值。這樣太乾淨了

箭頭功能可以使您的代碼非常緊湊和強大。但是還有一個技巧是它的袖子。它修復this。

這個的詛咒

在Javascript中，魔術變量this總是引用函數被調用的對象。所以像下面這樣的代碼不會做你認為的。

當您使用其他對象時，this上下文可能與您期望的不同。當你將一個函數傳遞給別的地方被調用時，它可能會用不同的'this'來調用這個函數。如果您將一個事件處理程序添加到按鈕，按鈕將是“this”。有時這就是你想要的，但在上面的代碼中，它不是。我們想要 this成為周圍的App對象，而不是按鈕。

這是JavaScript長期存在的問題。很常見的是，開發人員創建了一種稱為自我模式的東西，您可以this使用臨時變量保存正確的引用self。這是幸運的，但它的工作。

另一種解決問題的方法是綁定功能。該bind方法強制this成為一個特定的對象，而不管函數如何被調用。

再次，這將工作，但它不是很大。我們現在有額外的代碼來編寫，而在下面做一個綁定可以創建額外的開銷。箭頭功能為我們提供了更好的方法。

箭頭函數自動捕獲this從定義函數的周圍上下文中的var ，而不是使用函數的位置。這意味著您可以將功能傳遞給其他地方，絕對知道this將使用正確的版本。在上面的代碼中，一切都沒有任何一個幸運的黑客。

簡而言之，箭頭功能真的很棒。我儘可能地使用它。它們使您的代碼更短，更容易閱讀，並this再次變得明智。

Promises

箭頭功能的另一個很大的特點是它們與Promises的配合很好。承諾是Javascript中的一種新的對象，旨在幫助執行需要很長時間的事情。Javascript沒有線程，所以如果你想做一些可能需要很長時間的東西，那麼你必須使用回調。

例如，在Node中，您可能需要加載文件，解析它，創建數據庫請求，然後寫入新的文件。這些都必須按順序完成，但它們都是異步的，因此您必須開始嵌套回調。這產生了JS黑客喜歡稱之為“金字塔”的東西。你得到大量的嵌套代碼。

這段代碼是醜陋的，很難理解，並且有很多惡作劇的角落隱藏。承諾幫助我們擊敗死亡金字塔。

Javascript Promise是一個表示可能尚不可用的值的對象。它承諾將來有價值。當使用該then函數準備好最終值時，可以添加要調用的回調。

then回調的承諾很像傳統的回調，但承諾增加了一些額外的扭曲：它們可以被鏈接。讓我們從之前重新訪問我們的代碼。必須按順序調用每個函數，每個函數取決於前一個函數的結果。使用承諾，我們可以這樣做。

注意箭頭功能如何使這個漂亮乾淨。每個then()回調函數返回一個值。這個值傳遞給下一個，所以我們所有的功能都可以很容易的鏈接。

現在你會注意到，processFile命令需要前兩個值的結果，但承諾只傳遞一個值。我們也不在乎什麼樣的順序readFile，並fetchNames在發生。我們只是希望當兩者都完成了就知道了。承諾也可以做到這一點。

承諾

假設要從文件名數組中加載每個文件，並在完成文件時通知。我們可以做到這一點Promise.all()。 all是一種實用的方法，Promise它承擔了一系列的承諾，並返回一個新的承諾，當所有的子承諾完成時解決。以下是我們如何加載所有文件Promise.all。（假設這 readFile是一個返回承諾讀取文件的函數）。

現在我們可以重寫我們原來的Node示例：

我將讀取的文件和數據庫調用組合到使用的單個承諾中Promise.all。它將返回的值是包含兩個子承諾的結果的數組，因此我可以將它們放入processFile。請注意，我也使用縮寫箭頭語法使代碼更小更乾淨。

處理失敗

現在考慮如果這些承諾之一失敗會發生什麼？要處理第一個失敗，我們可以放入try / catch塊，但下一個then仍然會被調用。如果第一個失敗，我們希望一切都停止。承諾有另外一個詭計：抓住回調。

在下面的新版本中，如果有任何失敗，它將立即跳到catch回調結束，跳過其餘的。抓到後，我們還可以添加更多的子句。

做出自己的承諾

當然，承諾只有在我們調用的API實際使用它們的API的情況下才有效。許多圖書館正在開始轉變為承諾，但在等待的時候，我們也可以作出自己的承諾。我們用Promise構造函數來做。

它需要兩個值：resolve和reject。這些都是回調函數。在你做任何你需要做的事情需要很長時間，即使它涉及多個回調。當您完全調用resolve()最終值時。然後，這將發送到then 您的promise的任何用途的第一個條款。

如果發生不好的事情，並且您想拒絕該值，而不是使用該錯誤reject()，則傳遞所需的任何替代值。

這是一個現實生活中的例子。我一直使用AJAX調用，但它們可能是醜陋的，像這樣。

var url ="http://api.silly.io/api/list/e3da7b3b-976d-4de1-a743-e0124ce973b8?format=json";(第一行代碼全顯示)

讓我們把這個代碼包裝成一個promise。

這仍然是相同的基本代碼，但我可以像這樣調用它。

哇，這樣更乾淨。實際上，我不需要製作我自己的AJAX Promise包裝器，因為有一個新的Web標準Fetch已經為我做了這個。所有瀏覽器中都不支持Fetch，所以我們可以直接使用我們自己的。

首先，承諾可能有點困難，但是一旦你開始使用它們，我想你會很喜歡它們。它們使得將多個功能集成到一個具有邏輯意義的單個工作流中，並且正確地捕獲所有錯誤的方式非常容易。

＃數組-謝謝大家勞神費力的看到這裡！

最後我想向大家展示一些新的Array功能。其中大部分ES6 並不是全新的，實際上有些已經很舊了。然而，他們終於得到了各地的支持，並用箭頭功能和承諾發揮了好處，所以我認為他們是新的。

假設你想對數組的每個元素做一些事情。而不是使用for循環，使用forEach或map功能。

該forEach函數在數組的每個元素上運行回調。該map函數也在每個元素上運行，但它將每個回調的結果存儲到一個新的數組中。

如果要通過僅包含某些值來轉換數組，請使用該filter函數。

Array還具有基於某些標準在數組中查找單個值的功能。

最後，數組可以通過該reduce函數減少到單個值。 reduce是非常強大的，可以用來做很多事情，比如求和一個數組或平鋪嵌套數組

要循環對象中的屬性，您可以使用該Object.keys 屬性名稱數組，然後循環使用它forEach

＃要避免的事情

我今天發佈的五個功能可以在今天使用，但ES6中還有許多其他的事情你應該避免; 或者是因為它們沒有提供很多價值或者還沒有得到很好的支持。這些包括：

• 破壞

• 模塊

• 默認參數

• 傳播者

• 符號

• 發電機和迭代器

• 弱地圖和弱集

• 代理人

解構使您可以通過名稱從對象中引出值。它可以在幾種情況下有用，但我發現最好的用法是從模塊中提取功能。不幸的是，模塊仍然是一團糟，不能在任何地方工作，所以現在避免它們。

隨著解構，你可以不用默認參數和擴展操作符的技巧。我發現這些比他們值得的更麻煩，至少現在。

符號，生成器，迭代器，弱映射和集合以及代理是非常有用的，但是它們在任何地方都不支持，所以我建議您在使用它們之前等待一段時間。

還有一個新的類語法。它仍然使用JavaScript的原型繼承，但它使定義一個類的語法更加清晰和一致。然而，如果沒有新的模塊支持，它也沒有價值，所以我建議等一會兒。

重點來咯那咱們可以用麼？-哈哈哈哈哈哈！看情況吧

大多數桌面和移動瀏覽器都支持我向您展示的所有內容。但是，根據您的觀眾情況，您可能會使用舊的瀏覽器/舊版移動操作系統。每當你想知道是否有事情準備就緒，請到caniuse.com。它會告訴你什麼版本的每個瀏覽器支持什麼。

如果您需要支持IE <10，有一個很好的機會，你會想用一個transpiler像打字稿或巴貝爾

所以這些ES6的五個很棒的功能，你可以立即開始使用。更多的東西來了，但你不需要等待使用這些。得到口紅糖 如果你想在低延遲數據流驅動的Javascript代碼中使用它們，請查看 PubNub BLOCKS

喜歡請您關注點贊！！！祝你健康幸福