[JavaScript] 變數和資料型別學習心得

vita shela
VitaOra
Published in
4 min readMar 6, 2020

前言

從前面幾篇講到 ES6 完之後,原本預計是要寫跟 React 有關的,但是…後來想到公司的主管在一個月前問我,在學習 React 之前,我反而希望你去找一本書或一堂線上課程,把 JavaScript (後面簡稱 JS) 的基礎打好,然後你要多久完成這件事 !? 因此,我會利用這 3 月初到 4 月中的時間,把 JS 的基礎看過及用手去寫過,徹徹底底的把底子打好,也請各位如有寫錯的部份,也請不吝惜指教,謝謝。

基本的變數宣告

ES5 的變數宣告指令

在 ES5 我們最常使用的是 var 宣告指令,其語法如下。

範例 1

ES6 的變數宣告指令

在 ES6 我們最常使用的是 let、const 宣告指令,其語法如下。

範例 2
範例 3

在這裡從 ES5 的 var 指令,換成 ES6 的 let、const 指令,這三者又有什麼區別呢 !? 請看以下說明。

(1) 不予許變數重複宣告

const 指令不允許同樣名稱的變數宣告第二次,如有此狀況,則會出現 Uncaught SyntaxError: Identifier ‘city’ has already been declared 錯誤訊息,請看以下範例說明。

範例 4

相對的 var 及 let 指令,允許重複宣告同樣名稱的變數,請看以下範例說明。

範例 5

(2) 暸解何謂區塊範圍

這個區塊範圍已在 另外一篇關於 let、const 的宣告指令心得分享過了。在了解到 let、const 能詳細的控制變數的有效範圍,因此,在現今撰寫 JavaScript 中,都是優先使用 let 或 const 指令宣告變數。

命名規則須知

這裡整理了一些在使用 var、let、const 宣告變數,應該要注意的事情,不需要特別去熟記,只要隨著寫 code 的時間增長了之後,自然就會知道哪些點要注意了。

幾個基本的命名規則方向

  1. 開頭的字元必須是英文字母、底線 (_)以及錢字號 ($)。
  2. 變數的名稱需要區分大小寫。
  3. 不可使用 JavaScript 的保留字元來宣告。

幾個基本的命名應需注意事項

  1. 讓人一眼看出便易於判斷這個資料內容的名稱。
  2. 命名的變數名稱,不要過長或過短。
  3. 不要使用很容易混淆的名稱組合來宣告。
  4. 團隊合作開發時,應事先採用統一的命名方式。
  5. 使用英文單字命名。

三個目前主要的宣告寫法

  1. camelCase 法:開頭的單字第 1 個字元小寫,之後的單字第 1 個字元大寫。
  2. Pascal 法:所有單字的第 1 個字元都大寫。
  3. 底線法:單字與單字間以底線連結。

最後結論,一般習慣的用法如下:

  • 變數 / 函式名稱:camelCase 法。
  • 常數名稱:底線法。
  • 類別 (建構子)名稱:Pascal 法。

這裡跟各位分享,何謂清楚明瞭的命名規則。

範例 6

JavaScript 的資料型別

在目前的 JavaScript 中有目前以下的資料型別可以使用,不過不會每一個特別去介紹,只會介紹一些比較需要注意的。

資料型別有數值 (number)、字串 (string)、布林值 (boolean)、符號型別 (symbol)、特殊型別 (null/undefined)、陣列 (array)、物件 (object)、函式 (function)。

字串 (string)

在使用字串的寫法時,都會使用單引號 (`'`) 或雙引號 (`"`) 包住,這個會依照程式語言各別的特性又或是整個團隊撰寫風格而定,請看以下範例說明。

範例 7

陣列 (array)

陣列的表示方式為,用逗點去隔開每個值,然後在最外面使用中括號包住 ([…])。

要存取陣列的值時,是使用索引值為鍵值,是以陣列名稱 (索引值)格式來撰寫,要特別注意的是,索引值是從 0 開始依序編號,請看以下範例說明。

範例 8

物件 (object)

物件是可以透過名稱來做存取的陣列,一般也會被稱為雜湊 (Hash)。

存放於陣列中的資料我們稱為元素,哪存放於物件內的資料我們稱為屬性。物件的屬性可以是字串、數值等其它型別的資料,當然也可以放函式,這種存放資料為函式的屬性我們稱為方法。

範例 9

未定義值 (undefined)

未定義值 (undefined) 是說當我們在撰寫 JS Code 時,宣告的變數還沒有定義,以下使用情況是會回傳未定義值的範例。

範例 10

空值 (null)

這個空值 (null) 會與未定義值 (undefined) 很常搞混,我個人目前的記法是,要表達期待預計中的值不存在時 (或則也可以講說是空的),我就判斷為 null,其它的狀況一律都判斷為 undefined,不過當然實際運用情形,還是要按照實際在撰寫 JS Code 而定。

結論

這個章節及未來要寫的都是比較偏向於 JS 基礎的部分,乍看之下覺的都很簡單,也強烈建議不需要去死背,我們是在寫程式,程式是活的不是死的,死背絕對會有反效果。

雖然這些很簡單,但是也是很重要的,如何讓宣告的變數,讓團隊其他同事一看便知以及如何存取陣列或物件的值,哪又如果要搭配迴圈哪又有哪些事情要注意,未來會再跟各位分享,謝謝。

--

--

vita shela
VitaOra
Editor for

在因緣際會之下接觸了Ruby,便覺得這個程式語言很有趣,而後又接觸了Rails 之後才發現,透過這兩者可以讓開發變得這麼有趣。就算是半路出家的我,也深深感受到開發的成就感及樂趣,我樂於學習及持續進步,希望有朝一日能成為同時精通前端設計和後端開發的工程師,因此正朝著全端開發的路上前進中。