ECMAScript 8都發布了,你還沒有用上ECMAScript 6?

2018-10-29 admin

ES8已經與17年6月底發布,而很多的前端開發者還沒有開始用上ES6。本文聊一聊怎么快速入門ES6,并將ES6的語法應用到實戰項目中。

閱讀全文大約需要15分鐘。

文中以 ES 表示 ECMAScript。

今年六月底,TC39發布新一版的ES 8(ES 2017),自從ES6在15年發布之后,每一年TC39都會發布新一版的ES語言標準。

我了解的前端開發者中,還有很多人沒有用上ES6,有的人是覺得ES5用的挺好的,懶得去學ES6,有的人是有想學ES6的決心,但是苦于沒有合適的機會(項目)去實戰練習。

如果你用過React,Vue或Nodejs等,那你多多少少都會使用到一些ES6語法的。

ES8中的新特性,瀏覽器廠商和語法轉換器還需要一段來實現,不如我們還是先聊聊怎么在你的項目中用上ES6吧。

什么是ES6?它和ES5有什么區別?

我們常說的JavaScript是指ES3和ES5,ES6是ECMAScript 6 的縮寫。

對于經常寫原生JavaScript的前端開發者來說,對ES5中的語法肯定比較熟悉,比如數組中的一些方法forEach,map,filter,some,every,indexOf,lastIndexOf,reduce,reduceRight ……,以及對象(Object)和函數(Function)都拓展了很多方法,這里不多贅敘。

ES6給前端開發者帶來了很多的新的特性,可以更簡單的實現更復雜的操作,很大的提高開發效率,提高代碼的整潔性。

ES6中的新特性有很多,列一些比較常用的特性:

Block-Scoped Constructs Let and Const(塊作用域構造Let and Const)

Default Parameters(默認參數)

Template Literals (模板字符串)

Multi-line Strings (多行字符串)

Arrow Functions (箭頭函數)

Enhanced Object Literals (增強的對象文本)

Promises

Classes(類)

Modules(模塊)

Destructuring Assignment (解構賦值)

下面介紹下這些常用的ES6特性。

Block-Scoped Constructs Let and Const(塊作用域構造Let and Const)

ES6提供了兩個新的聲明變量的關鍵字:let和const。而let和const要和塊級作用域結合才能發揮其優勢。

什么是塊級作用域?

塊級作用域的表示一對大括號{}包圍的區域是一個獨立的作用域,在這個作用域內用let聲明的變量a,只能在這個作用域內被訪問到,在這對大括號外面是訪問不到a的。

當然,在塊級作用域中還可以聲明函數,該函數也是只能作用域內部才能被訪問到。所以,在if、else、for甚至是一對單獨的{},都是一個塊級作用域。

在ES6之前,是沒有塊級作用域的概念的,只有全局作用域和函數作用域兩種,并且,用var聲明的變量和用function聲明的函數會被提前到作用域的頂部,這也就是我們常說的聲明提前。

用let聲明的變量是存在于距離聲明語句最近的一個作用域(全局作用域、函數作用域或塊級作用域)內的,在聲明的時候,可選的將其初始化成一個值。


格斗之魂救援彩金