JavaScript 簡介:ES6 以及更早之前的版本

更新於 發佈於 閱讀時間約 5 分鐘

聽過 ES6 嗎?甚至好奇這是什麼?



ECMAScript 6 ad JavaScript

ECMAScript 6 ad JavaScript

你可能已經看過 “ES6” 或 “JavaScript ES6” 一詞,並想知道它實際意味著什麼。別再想了,因為我們將深入研究 ES6 究竟是什麼,以及它與 JavaScript 的關係!

首先,讓我們介紹一些歷史。JavaScript 於 1995 年由 Netscape Communications 公司引入,作為網頁設計師和工程師在網頁互動上所使用的腳本語言。第二年的時候,Netscape 向一家名為 Ecma International 的標準開發組織提交了 JavaScript,以創立腳本語言(一種編程語言)的標準。1997 年時,Ecma International 發布了 ECMA-262,為腳本語言 ECMAScript(縮寫為 ES)的第一版建立了標準。

這些新的 ECMAScript 標準為 JavaScript 的架構提供了規範。隨著層見疊出的程式設計法,以及開發者尋求新的功能,新版本的 ECMAScript 為 JavaScript 新舊版本間的一致性提供了基礎。

如何區分 JavaScript 和 ECMAScript?如果想開發 app 或是應用程式,你可以使用 JavaScript;如果要創建新的腳本語言,你可以遵循 ECMAScript 中的指導原則。因此,當你看到 ES6 或 JavaScript ES6 時,這意味著該版本的 JavaScript 遵循 ECMAScript 第六版的規範。你可能還會看到 ES2015 而不是 ES6,但這兩個術語都是指 2015 年發布的第六版 ECMAScript。下圖顯示了 JavaScript 多年來的演變情況:

JS 的演變歷史

JS 的演變歷史

你可能會問,現在更新的版本如 ES7 和 ES8,和 2015 年的版本還有什麼關係?

好吧,儘管發布了更新的版本,ES6 實際上是 ECMAScript 從 1997 年第一版發布以來的最大更新。一些開發者甚至因為新加入的功能,將 ES6 稱為「現代 JavaScript」。許多強大的功能幫助了 JavaScript 的開發者,其中包括:

  • 宣告變數的新關鍵字 let 和 const
  • 箭頭函式
  • classes 的創建
  • 引數的預設值
  • promises 非同步操作
  • 還有很多很多…

現在的瀏覽器支持大多數 ES6 功能,讓開發者善用這些新功能所帶來的好處。ES6 讓工程師節省許多時間,並且能夠使用更簡潔的方式撰寫程式。以函式表達式的 ES6 前語法為例:

var greeting = function() {
console.log(‘Hello World!’);
};


使用 ES6 箭頭函式,我們可以將上面的表達式轉換為:

const greeting = () => console.log(‘Hello World’);


然而,箭頭函式不僅僅是簡單地語法重寫。和其他 ES6 功能一樣,還有其他潛在的好處和權重需要考慮。儘管如此,ES6 在開發社區中被廣泛採用。諸如新 ES6 語法帶來的好處,使得流行的程式設計法 — 物件導向編程(OOP)變得更加容易,也讓習慣於 OOP 的其他程式語言的開發者,現在可以轉換並學習使用 JavaScript。另一個使得 ES6 流行的原因在於它被使用在一些如 React 的知名的框架上。因此,如果想學習最新的工具和框架,你將不得不在此過程中學習 ES6。

話雖如此,我們不應該忽視老舊的程式碼,即舊版本的 JavaScript。實際上,仍有許多專案是使用舊版程式碼建構和維護的!如果你希望能夠自由地處理任何類型的 JavaScript 專案,那麼應該要熟悉 ES6 和 ES6 之前版本的語法。


參考資料:

JavaScript Versions: ES6 and Before


感謝您的閱讀,我試著將生活與自己所學到的知識,以平易近人的方式傳達給正在努力進步的同好,甚至是領域之外卻有興趣的人。如果喜歡我的文章,歡迎贊助我,你的鼓勵也是我進步的動力。

留言
avatar-img
留言分享你的想法!
avatar-img
Ray C的沙龍
37會員
31內容數
短篇奇幻作品將不定期更新。
Ray C的沙龍的其他內容
2023/01/14
在 Instagram 看到有人分享在日本操作機器、製作寶可夢客製化衣服的貼文,聯想起先前在網上閱讀到關於 Pokémon API 的文章,一時興起也使用 PokeAPI 仿刻貼文中機器的操作介面。然而在開發過程中,發現連續抓取 905 份寶可夢資料...
Thumbnail
2023/01/14
在 Instagram 看到有人分享在日本操作機器、製作寶可夢客製化衣服的貼文,聯想起先前在網上閱讀到關於 Pokémon API 的文章,一時興起也使用 PokeAPI 仿刻貼文中機器的操作介面。然而在開發過程中,發現連續抓取 905 份寶可夢資料...
Thumbnail
2022/04/03
去年看到 Astro 剛發布時所宣稱的「用較少的 JavaScript 打造極速網站」就對這樣的框架產生興趣,那時雖然也試玩了一下,不過因為遇到一些開發初期的 bug 放棄研究。直到近期拿過去使用 petite-vue 開發的專案 — HTML Reserved Colors 來透過 Astr...
Thumbnail
2022/04/03
去年看到 Astro 剛發布時所宣稱的「用較少的 JavaScript 打造極速網站」就對這樣的框架產生興趣,那時雖然也試玩了一下,不過因為遇到一些開發初期的 bug 放棄研究。直到近期拿過去使用 petite-vue 開發的專案 — HTML Reserved Colors 來透過 Astr...
Thumbnail
2022/03/25
2021 年可以說是 NFT 大爆發的一年了,除了名人相繼創立自己的 NFT,也有各式各樣的商業模式和額外賦能不停的被開發出來;像是主打邊玩邊賺的 (Play-to-Earn,P2E) GameFi 項目「Axie Infinity」、擁有即可兌換一天一碗且連續七天雞肉飯的「元宇宙第一雞肉飯」...
Thumbnail
2022/03/25
2021 年可以說是 NFT 大爆發的一年了,除了名人相繼創立自己的 NFT,也有各式各樣的商業模式和額外賦能不停的被開發出來;像是主打邊玩邊賺的 (Play-to-Earn,P2E) GameFi 項目「Axie Infinity」、擁有即可兌換一天一碗且連續七天雞肉飯的「元宇宙第一雞肉飯」...
Thumbnail
看更多
你可能也想看
Thumbnail
TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空,一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮,突然發現幾家商場都又開始重新上架,價格也都回到正常水準,估計是官方又再補了一批貨,想都沒想就立刻下單! 同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷!
Thumbnail
TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空,一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮,突然發現幾家商場都又開始重新上架,價格也都回到正常水準,估計是官方又再補了一批貨,想都沒想就立刻下單! 同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷!
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
JavaScript是一種具有動態型別、弱型別、原型繼承等特性的高級腳本語言,應用範圍廣泛,包括前端開發、後端開發、移動應用等。它被各種公司和開源社區廣泛使用。學習JavaScript需要掌握ECMAScript標準、異步編程、模塊系統等知識。
Thumbnail
JavaScript是一種具有動態型別、弱型別、原型繼承等特性的高級腳本語言,應用範圍廣泛,包括前端開發、後端開發、移動應用等。它被各種公司和開源社區廣泛使用。學習JavaScript需要掌握ECMAScript標準、異步編程、模塊系統等知識。
Thumbnail
今天會接續介紹 JS ES6 其他新穎的語法,物件解構(Object Destructuring)物件語法強化(Object Literal Enhancement)陣列解構(Array Destructuring)延展運算子(Spread Operator)。
Thumbnail
今天會接續介紹 JS ES6 其他新穎的語法,物件解構(Object Destructuring)物件語法強化(Object Literal Enhancement)陣列解構(Array Destructuring)延展運算子(Spread Operator)。
Thumbnail
在進入到 React 前端框架之前,幫讀者複習有關 JavaScript 的知識。此篇著重,JavaScript 的歷史、let & const & var 差異、樣板字面值( Template Literals )、箭頭函式( Arrow Function )JS ES6 一個非常重要的前置知識。
Thumbnail
在進入到 React 前端框架之前,幫讀者複習有關 JavaScript 的知識。此篇著重,JavaScript 的歷史、let & const & var 差異、樣板字面值( Template Literals )、箭頭函式( Arrow Function )JS ES6 一個非常重要的前置知識。
Thumbnail
JavaScript 中的 ESM(ES Modules)和 CJS(CommonJS)是用於模塊化開發的兩種不同的模組系統。 關於CJS CJS 是 CommonJS 的模塊系統,最初是為了在伺服器端使用的 Node.js 開發而設計的,但也被廣泛用於前端開發。CJS 使用 require 函數來
Thumbnail
JavaScript 中的 ESM(ES Modules)和 CJS(CommonJS)是用於模塊化開發的兩種不同的模組系統。 關於CJS CJS 是 CommonJS 的模塊系統,最初是為了在伺服器端使用的 Node.js 開發而設計的,但也被廣泛用於前端開發。CJS 使用 require 函數來
Thumbnail
JavaScript 的關鍵價值 JavaScript 是一種強大且廣泛使用的編程語言,具有許多價值和應用。以下整理 JavaScript 的關鍵價值: 客戶端網頁開發、跨平台開發: JavaScript 是種瀏覽器的語言,可實現動態網頁效果,並通過操作 HTML 和 CSS,使網頁互動性提昇,提供
Thumbnail
JavaScript 的關鍵價值 JavaScript 是一種強大且廣泛使用的編程語言,具有許多價值和應用。以下整理 JavaScript 的關鍵價值: 客戶端網頁開發、跨平台開發: JavaScript 是種瀏覽器的語言,可實現動態網頁效果,並通過操作 HTML 和 CSS,使網頁互動性提昇,提供
Thumbnail
對於剛接觸前端開發不久的人來說,可能會對var、let 與 const 的差異略懂略懂,但又說不太出三者實際哪裡不一樣。
Thumbnail
對於剛接觸前端開發不久的人來說,可能會對var、let 與 const 的差異略懂略懂,但又說不太出三者實際哪裡不一樣。
Thumbnail
在一開始學習前端開發的時候,一直遇到講師在課程內容中提到 ES5、ES6 等關鍵字,當初的我,單純認為 ES5、ES6 是講述 JavaScript 的版本,所以在使用上就沒有想太多,反正就是 JavaScript 1.0 、2.0 的感覺吧?
Thumbnail
在一開始學習前端開發的時候,一直遇到講師在課程內容中提到 ES5、ES6 等關鍵字,當初的我,單純認為 ES5、ES6 是講述 JavaScript 的版本,所以在使用上就沒有想太多,反正就是 JavaScript 1.0 、2.0 的感覺吧?
Thumbnail
JavaScript在ES6新增了let, const等宣告變數的方式,其中let, const是block scope的,而var則是function scope。
Thumbnail
JavaScript在ES6新增了let, const等宣告變數的方式,其中let, const是block scope的,而var則是function scope。
Thumbnail
你可能已經看過 “ES6” 或 “JavaScript ES6” 一詞,並想知道它實際意味著什麼。別再想了,因為我們將深入研究 ES6 究竟是什麼,以及它與 JavaScript 的關係!
Thumbnail
你可能已經看過 “ES6” 或 “JavaScript ES6” 一詞,並想知道它實際意味著什麼。別再想了,因為我們將深入研究 ES6 究竟是什麼,以及它與 JavaScript 的關係!
Thumbnail
如果有接觸過網頁開發的讀者,或者會聽過很多不同的專有名詞,其中不少得Front-end (前端) 和 Back-end (後端)這兩個字詞。有一些網站可能只需要設計師和前端開發者,有些則需要後端開發者和測試人員等等,那究竟前端和後端如何分辨?首先,讓我們搞清楚前端開發是什麼一回事。
Thumbnail
如果有接觸過網頁開發的讀者,或者會聽過很多不同的專有名詞,其中不少得Front-end (前端) 和 Back-end (後端)這兩個字詞。有一些網站可能只需要設計師和前端開發者,有些則需要後端開發者和測試人員等等,那究竟前端和後端如何分辨?首先,讓我們搞清楚前端開發是什麼一回事。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News