JavaScript ES6 – React 白話文運動 01

react-vernacular-campaign-01 JavaScript ES6

前言

在進入到 React 前端框架之前,先來幫讀者複習有關 JavaScript ES6 的知識,此篇會講解

  1. JavaScript 的歷史
  2. let、const、var 差異
  3. 樣板字面值( Template Literals )
  4. 箭頭函式( Arrow Function )

以上有關於中文翻譯,目前採用 MDN 官方中譯,有筆誤也歡迎讀者留言

JavaScript ES6 歷史

Brendan Eich 在1995 年發表了 JavaScript,最初 JavaScript 主要功用為網頁中的一些簡單功能實作。之後有了Ajax、Jquery、React.js、Vue.js、Node.js、TypeScript,漸漸的 JavaScript 變成一個主流前相當廣用的程式語言之一,從前端、後端開發都可以做使用。

可能有些讀者知道ES5、ES6,但是那個ES又是什麼呢?

ES 的全名為 ECMAScript 其中 ECMA 為歐洲電腦製造商協會的縮寫(European Computer Manufacrurers Association),後面的數字則是第幾代,因此 ES5 為 ECMAScript 第五代,ES6 為 ECMAScript 第六代。

那麼 ES1 至 ES4 這幾代的版本為何不常聽見呢?

主要原因為 1997年ES1問世之後,還是在簡單的功能實作,ES2、ES3、ES4 則是分別修正了一些問題或是新增了正規表達式以及字串處理,等到了 2009 年 ES5 的出現,才真正有了相當多的功能,包含擴充的陣列方法、物件屬性、JSON。

JavaScript ES6

ES6 則是於2015年出現,並且又新增了相當多方便且有用的功能,這些功能也被實作在各類型的 JavaScript 應用中。

如果有想要深入瞭解歷史脈絡的讀者,也可以參考

var、let、const 差異

1. var

var 是一個ES5 比較早期的宣告方式,使用 var 就可以做宣告,並且是函數區域(  function-scoped )或是全域( globally-scoped )

2. let

let 是一個 ES6 比較近期的宣告方式,使用 let 就可以做宣告。除了實作了靜態變數域( Lexical Variable Scope )使用大括號也會產生一個程式區塊( Code Block ),在 let 的宣告中,此變數會是區塊區域( block-scoped )

3. const

const 是一個 ES6 比較近期的宣告方式,使用 const 就可以做宣告,並且是區塊區域( block-scoped )
const 與 let 最大的差別,就是 const 是一個不會被重新指定的值。

var 以及 let 差異

快速用兩種程式碼來展示差異,先使用 ES5 中的 var 做宣告,可以發現在判別式中再次宣告後,離開判別式中的程式區塊(Code Block),變數依然程式區塊中宣告後的值。

				
					var input = "Global";
if(input){
	var input = "Block";
	console.log("input");
	// 會輸出變數 Block 
}
console.log("input");
// 會輸出變數 Block
				
			

這邊如果再次使用 ES6 中的 let 做宣告,可以發現在判別式中再次宣告後,其影響範圍只會在程式區塊( Code Block )之中,變數則是不會影響到外部的全域變數( global variable )

				
					let input = "Global";
if(input){
	let input = "Block";
	console.log("input");
	// 會輸出 Block 
}
console.log("input");
// 會輸出 Global
				
			

透過上述舉例中,應該可以發現到 ES5 中的 var 宣告在區塊中宣告,會污染到其他相同命名的變數,因此現在主流宣告都是使用 let 或是 const 去做宣告

樣板字面值(Template literals)

這邊使用的是 MDN WEB 的專有名詞,並且使用其中文翻譯,不過也有地方會稱作樣板字串( Template String )
在傳統 JavaScript 語法中,我們會使用加號來去做字串的串連,然而這樣傳統的語法卻相當不直覺。

				
					console.log("Hello, This is "+ Name + " and My Phone Number is" + PhoneNumber)
				
			

樣板字面值 Template literals 語法出現後,我們可以使用反引號( back-tick )將字串進行封閉,並且在字串中,透過錢字號與大括號 ${} 來放置變數,如果將以上程式碼進行改寫的話,會變成以下,可以看到整個字串變得更簡潔易懂。

				
					console.log(`Hello, This is ${Name} and My Phone Number is ${PhoneNumber}`)
				
			

箭頭函式( Arrow function )

宣告( Define )

在傳統 ES5 語法中,使用以下語法做宣告,開頭有一個關鍵字 function 來做宣告,後面接著是函式的名稱,再由大括號來將函式內的實作包起來。

				
					function printHelloWorld() {
    console.log("Hello World")
}
var printHelloWorld = function() {
    console.log("Hello World")
}
				
			

另一種宣告方式為函式表達式( Function Expression ),先宣告一個變數,再將一個函數指定給此變數。

提吊( Hoist )

這邊也講一個有關函式的觀念,這邊兩種不同的宣告方式,分別為函式宣告與函式指定。在函式宣告中會被提吊( Hoist )但是函式指定則是不會。

				
					printHelloWorld()
function printHelloWorld() {
    console.log("Hello World")
}
// 這樣執行是沒有問題的
printHelloWorld()
var printHelloWorld = function() {
    console.log("Hello World")
}
// 這樣執行是有問題的
				
			

參數傳遞

在傳統 ES5 中,函數中是可以傳遞參數的,這邊正規的名詞為引數( Argument )

				
					function printHello(name) {
    console.log(`Hello,My Name is ${name}`)
}
printHello("Hogan")

				
			

但如果在使用函數時,沒有給與引數的值呢?

會顯示 Hello,My Name is undefined

在 ES6 中,也有提供函數預設值,只要在函數宣告中,直接將引述做指定給值,就可以避免問題了

				
					function printHello(name = "Hogan") {
    console.log(`Hello,My Name is ${name}`)
}

printHello()
    // Hello,My Name is Hogan
printHello("Bo Bo")
    // Hello,My Name is Bo Bo
				
			

箭頭函數式(Arrow Function)

箭頭函數式( Arrow Function )是 ES6 中新增的功能之一,他可以在不使用 function 關鍵字下去做函式宣告,甚至可以不用給與函數名稱以及回傳值。

在未來的 React 實作中,也會相當常去使用箭頭函數是,是一個相當重要且好用的功能。

以下為傳統 ES5 的函數指定宣告方式,有關鍵字 function 以及 return

				
					var printHello = function(name) {
    return ("Hello " + name)
}

console.log(printHello("Hogan"))
				
			

透過箭頭函數式( Arrow Function )則可以改寫成以下

				
					const printHello = (name) => `Hello ${name}`

console.log(printHello("Hogan"))
				
			

結語

這篇針對 JavaScript ES6 中的一些新功能以及概念做了介紹,並且使用程式碼進行講解。

讓讀者在進入 React 前端框架語法之前,複習一下原本的 JavaScript 語法。

如果有任何建議與疑問也歡迎留言!

如果喜歡 React 白話文運動系列文章,請不吝於按下喜歡及分享,讓更多人看到唷~

其他文章參考

為何大公司都使用Nx ? Monorepo工具 5 分鐘快速建置

你真的懂Monorepo? 5 分鐘帶你認識前端大型架構

Zustand 是什麼? React 前端狀態管理

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

zh_TW繁體中文