iT邦幫忙

2021 iThome 鐵人賽

DAY 2
0
Modern Web

從零開始的JS學習之路系列 第 2

[Day02] 變數

變數

變數是用來儲存資料和進行基本運算的基本單位;在宣告時給資料一個名稱,名稱像一個盒子把資料裝起來,需要用到的時候找盒子就可以拿到資料。

var a = 10;
var b = 20;
var c = 30;

JavaScript 是一個弱型別的語言,變數在宣告時不用指定型別,型別的資訊只在物件本身,變數只用來作為取得值或物件的參考

var d; // 因宣告 d 沒給數值,所以 d 的內容為 undefined

可以在瀏覽器的 Devtools(工程模式)用 console.log(變數名)印出我們宣告過的變數 a、b、c、d 再加一個為宣告的 e,會得到如下圖

可以看到 a、b、c 皆出現該有的值,未賦值的 d 顯示值為 undefined,e 因為未宣告所以報錯。
而對未 var(宣告)的變數也能直接賦值 e = 10 ,但是會有後遺症

e = 10; // 自動變成全域變數

變數命名規則

  • 數字不可用於開頭,可以用英文大小寫字元、下底線_、錢字號 $
  • 不能用 -.
  • 有區分大小寫,大小寫不同視為不同變數
  • 名稱 identifier(識別符,簡稱ID),它在程式碼上下文中具有唯一性。
  • 名稱不可以是關鍵字(在 JS 裡有特定用途的字詞,例如 if、else、function 這些)
  • 名稱不可以是保留字(未有特定用途,但未來可能會變關鍵字詞,若是擔心的話可參考 MDN 的說明)

然後有一些是寫 code 習慣上的注意事項

  • 變數與函式建議用小駝峰,類別用大駝峰式的命名
var userAddress = '台南某區某路某號'; // 小駝峰第二字以後字首大寫
var UserNumber = '0912345678'; // 大駝峰字首皆大寫
  • 雖然支援 Unicode (JavaScript 1.3 後),但基於開發習慣,盡量避免使用非英文字母、下底線 _、錢字號 $ 的字元命名變數,以免其他語系的系統打開變成亂碼
  • 下底線 _、錢字號 $ 為開頭的命名通常是有特殊用途,例:類別中的私有變數、常數或函式(方法)

var、let、const

在 ES6 以前可以透過 var 來宣告變數,而 ES6 以後宣告分成了變數與常數

ES6 以前 ES6 以後
變數 var 變數 var、let常數 const

var 過的值可以一直 var 下去,但 let 不行;

var a = 3;
var a = 4;
var a = 5;
let b = 6;
let b = 7;

// 報錯情況
let b = 6;
    ^
SyntaxError: Identifier 'b' has already been declared

var 與 let 最大的差異在於變數作用範圍(scope)的不同.

MDN
let 可以宣告只能在目前區塊、階段或表達式中作用的變數。而
var 則是定義了一個全域變數,或是在整個 function 而不管該區塊範圍。

看的似懂非懂,沒關係我們來寫寫看

let b = '全域 let b';
var b1 = '全域 var b1';
if(true){// Start of Block scope
  let b = '區塊 let b';
  var b1 = '區塊 var b1';
  console.log(b);
  console.log(b1);
}// End of Block scope
console.log(b);
console.log(b1);

// 四個 console.log 執行結果
區塊 let b // 區塊內宣告的 let b
區塊 var b1 // 區塊內宣告的 var b1(全域的 var b1 被覆蓋)
全域 let b // 全域宣告的 let b
區塊 var b1 // 區塊內宣告的 var b1(全域的 var b1 被覆蓋)

結論:除了區域跟執行順序也有關係。

常數 const

  • 宣告 const 常數,會對它的值建立一個唯讀的參考。
    並不是說這個值不可變更,而是這個變數不能再一次指定值。例如,假設常數的內容(值)是個物件,那麼此物件的內容(物件的參數)是可以更改的。

下一篇:型別


上一篇
[Day01] 前言
下一篇
[Day03] 基本型別
系列文
從零開始的JS學習之路30

尚未有邦友留言

立即登入留言