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

閱讀時間約 4 分鐘

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

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 的演變歷史
你可能會問,現在更新的版本如 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 之前版本的語法。

參考資料:

感謝您的閱讀,我試著將生活與自己所學到的知識,以平易近人的方式傳達給正在努力進步的同好,甚至是領域之外卻有興趣的人。如果喜歡我的文章,歡迎贊助我,你的鼓勵也是我進步的動力。
為什麼會看到廣告
avatar-img
37會員
31內容數
短篇奇幻作品將不定期更新。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
在先前的型別文章中,我們曾經聊過 JavaScript 常用的一些型別,但針對布林這個型別,我們沒有做太多的解釋,原因在於布林值在 JavaScript 會有一個特殊的規則:自動轉型 。 自動轉型可說是讓 JavaScript 為弱型別、且難以管理的最重要的要素,接著就來讓我們來聊聊什麼是自動轉型
Thumbnail
JavaScript 的條件運算子,是一種簡短且具有條件判斷功能的運算子,這個運算子提供了一種簡潔的方式來進行條件判斷,而不需要使用更冗長的if...else語句。
Thumbnail
在 JavaScript ES6 之前,JavaScript 的函式主要是使用 function 關鍵字來定義的。而箭頭函式是 JavaScript ES6 中新增的功能,它提供了一種更簡潔的方式來定義函式。
Thumbnail
執行以上程式碼,然後看到了這個結果: 為什麼「延遲0秒」的函式寫在上方,但在console印出的結果,它還是被排在第二順位? 利用AC教材提供的youtube演講連結一窺究竟: 演講提供了更多JS的細節概念,身為JS新手的我還在消化,但若針對教案提出的問題來回答,加上利用google大神查到MDN的
Thumbnail
前言 這是第一次寫技術文章,但其實應該也只能說是蒐集很多資料並學習如何透過自己的話解釋的內容,並不能像其他大神可能分享一些很酷的技術,目標就單純是為了完成最後一週的作業(如下)。 走入非同步之前 執行環境(Execution Context) 執行環境堆疊 (Execution stack)
Java script 中有其中兩種宣告分別是 var 跟 let var 結果: let 結果: ** let 是一種區塊的變數宣告像是 if else while for 即跳出區塊時就無法取得資料
Thumbnail
在一開始學習前端開發的時候,一直遇到講師在課程內容中提到 ES5、ES6 等關鍵字,當初的我,單純認為 ES5、ES6 是講述 JavaScript 的版本,所以在使用上就沒有想太多,反正就是 JavaScript 1.0 、2.0 的感覺吧?
Thumbnail
上篇介紹的promise chain的寫法,是已經比原本好維護了沒錯,但是可讀性似乎還是有點不足,其實還可以改成用async/await的寫法,如下: E 其中,async是非同步的意思,等於是把getData()這個function定義為非同步,因此從console可以看到,test是最先被pri
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
在先前的型別文章中,我們曾經聊過 JavaScript 常用的一些型別,但針對布林這個型別,我們沒有做太多的解釋,原因在於布林值在 JavaScript 會有一個特殊的規則:自動轉型 。 自動轉型可說是讓 JavaScript 為弱型別、且難以管理的最重要的要素,接著就來讓我們來聊聊什麼是自動轉型
Thumbnail
JavaScript 的條件運算子,是一種簡短且具有條件判斷功能的運算子,這個運算子提供了一種簡潔的方式來進行條件判斷,而不需要使用更冗長的if...else語句。
Thumbnail
在 JavaScript ES6 之前,JavaScript 的函式主要是使用 function 關鍵字來定義的。而箭頭函式是 JavaScript ES6 中新增的功能,它提供了一種更簡潔的方式來定義函式。
Thumbnail
執行以上程式碼,然後看到了這個結果: 為什麼「延遲0秒」的函式寫在上方,但在console印出的結果,它還是被排在第二順位? 利用AC教材提供的youtube演講連結一窺究竟: 演講提供了更多JS的細節概念,身為JS新手的我還在消化,但若針對教案提出的問題來回答,加上利用google大神查到MDN的
Thumbnail
前言 這是第一次寫技術文章,但其實應該也只能說是蒐集很多資料並學習如何透過自己的話解釋的內容,並不能像其他大神可能分享一些很酷的技術,目標就單純是為了完成最後一週的作業(如下)。 走入非同步之前 執行環境(Execution Context) 執行環境堆疊 (Execution stack)
Java script 中有其中兩種宣告分別是 var 跟 let var 結果: let 結果: ** let 是一種區塊的變數宣告像是 if else while for 即跳出區塊時就無法取得資料
Thumbnail
在一開始學習前端開發的時候,一直遇到講師在課程內容中提到 ES5、ES6 等關鍵字,當初的我,單純認為 ES5、ES6 是講述 JavaScript 的版本,所以在使用上就沒有想太多,反正就是 JavaScript 1.0 、2.0 的感覺吧?
Thumbnail
上篇介紹的promise chain的寫法,是已經比原本好維護了沒錯,但是可讀性似乎還是有點不足,其實還可以改成用async/await的寫法,如下: E 其中,async是非同步的意思,等於是把getData()這個function定義為非同步,因此從console可以看到,test是最先被pri