EcmaScript 其實是一種語言規(guī)范,常見的 JavaScript, ActionScript 等都是其具體實現(xiàn),平時使用中一般可以將其和Javascript對等稱呼,本系列教程主要講述 EcmaScript2015(ES6) 為JavaScript帶來的新的特性,并初步掌握如何利用其進行開發(fā)。
本系列面向有一定基礎(chǔ)知識的ES5使用者,不適合初學者。
先來看兩段代碼:
Human.js
export default class Human { }
main.js
import Human from "./Human"; class Man extends Human { constructor(name = "unnamed") { super(); this.gender = "male"; this.name = name; } static create(name = "unamed") { return new Man(name); } getGender() { return this.gender; } getName() { return this.name; } } const man = new Man("Jack"); let manObject = { man } console.log(man.getName()); console.dir(manObject);
上面的代碼為我們展示了和ES5不一樣的語法:
import 和 export
模塊化開發(fā),在此之前也有很多的方案,AMD, CMD等,但從使用上來說,ES2015的模塊化開發(fā)還是很簡單和強大的。
class
語意化的的面向?qū)ο笳Z法,不過不要驚訝,這其實只是語法糖,在其背后,依然是編譯器按照ES5的方式去執(zhí)行的,不過對于后端開發(fā)者來說,接受起來就不會那么難受了。class中定義方法無需function關(guān)鍵字, 這些會在后面的章節(jié)進一步講解。
參數(shù)有默認值了
不用再使用:
a = a || "default";
這種方式處理默認值啦,其實這也是語法糖,但是帶來的便利不言而喻。
const 和 let 關(guān)鍵字
var 終于不再一家獨大了,來了2個小伙伴一起玩耍。
屬性簡潔寫法
如果對象的屬性名稱和變量名稱一致,那么可以使用下面的簡潔寫法:
let manObject = { man } //等同于 let manObject = { man: man }
怎么樣,相比ES5,是不是更現(xiàn)代化了呢?
當然ES6帶來的新語法豈止這幾點,但這足以讓我們對JavaScript更感興趣了。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/83732.html
摘要:前端日報精選如何在非項目中使用知乎專欄編碼規(guī)范最常被遺忘的性能優(yōu)化瀏覽器緩存?zhèn)€人文章譯統(tǒng)一樣式語言掘金新的開發(fā)者提及最多的個視頻眾成翻譯中文第期在中使用譯統(tǒng)一樣式語言掘金前端現(xiàn)狀答題救不了前端新人相學長懟前端歲以 2017-06-29 前端日報 精選 如何在非 React 項目中使用 Redux - 知乎專欄Javascript編碼規(guī)范 - Clearlove - SegmentFau...
摘要:雖然夠好用,奈何沒有瀏覽器對其可以完全支持,本文書寫時間,開發(fā)版號稱已經(jīng)支持的特性。開始安裝本系列假定讀者都有使用經(jīng)驗,如果還沒有,趕緊去這里了解并安裝吧。到此,我們的已經(jīng)準備就緒。 通過前面章節(jié)的講解,大家對ES2015的一些新語法有了初步的理解,之前我們的測試代碼都可以直接放入 Chrome Console 中直接運行,為了更好的學習后面的面向?qū)ο蠛湍K開發(fā),我先用一章介紹一下 B...
摘要:先來介紹下語法官方示例代碼模塊中對象暴露只需要即可,可以是任何類型的對象。手動導入模塊下某個對象,需要和模塊中定義的名字對應(yīng),順序無關(guān)。 看一下官方介紹: Language-level support for modules for component definition. JS在ES2015開始原生支持模塊化開發(fā),我們之前也曾借助于諸如: AMD CommonJS 等的模塊加載...
摘要:用過的同學肯定見過類似下面的代碼這就是為帶來的另一個新的語法解構(gòu)賦值。解構(gòu)賦值是用來讓我們從數(shù)組或者對象中提取數(shù)據(jù)賦值給不同的變量。解構(gòu)賦值操作不會拋錯,如果沒有找到,將會用賦值過去。 用過ReactNative的同學肯定見過類似下面的代碼: import { Text, View } from react-native; 這就是ES2015為JavaScript帶來的另一個新的語法:...
摘要:箭頭函數(shù)是用新的語法書寫的匿名函數(shù)如等同于下面使用的寫法可能一開始無法接受,但慢慢的會發(fā)現(xiàn)箭頭函數(shù)帶來的快感不言而喻。作為一個后端人士希望也能支持該語法。 箭頭函數(shù)(Arrows), 是用新的 => 語法書寫的匿名函數(shù), 如: [1, 2, 3].map(n => n + 1); 等同于下面使用ES5的寫法: [1, 2, 3].map(function(n) { return n...
閱讀 3445·2021-11-08 13:20
閱讀 3373·2021-09-30 09:48
閱讀 2576·2021-09-29 09:41
閱讀 597·2021-09-22 15:04
閱讀 2487·2021-08-23 09:44
閱讀 3687·2020-12-03 17:26
閱讀 1017·2019-08-30 14:10
閱讀 1574·2019-08-29 18:34