Variables

變數是一種資料結構,可為值指派一個代表名稱。 其中包含任何類型的資料。

變數名稱稱為「ID」。務必加上有效的 ID 這些規則:

  • ID 可包含萬國碼 (Unicode) 字母、美元符號 ($) 和底線 字元 (_)、數字 (0 到 9),甚至是部分萬國碼 (Unicode) 字元。
  • ID 不得包含空白字元,因為剖析器會將空白字元用於 獨立的輸入元素例如,若嘗試呼叫 my Variable 而不是 myVariable,剖析器會看到兩個 ID, myVariable,並擲回語法錯誤 (「非預期的符記: ID」)。
  • ID 開頭須為英文字母、底線 (_) 或美元符號 ($)。 開頭不得為數字,以免數字和 識別碼:

    let 1a = true;
    
    > Uncaught SyntaxError: Invalid or unexpected token
    

    如果 JavaScript 允許在 ID 開頭使用數字, 僅包含數字的 ID,導致 使用數字和數字做為 ID:

    let 10 = 20
    
    10 + 5
    > ?
    
  • 保留字詞」 應用在語法上就不能做為 ID

  • ID 不得包含特殊字元 (! . , / \ + - * =)。

下列並非嚴格的 ID 建立規則 簡化程式碼維護的業界最佳做法如果您 專案各有不同標準,請遵循這些標準來確保一致性

以 JavaScript 的內建方法和屬性設定為例, 駝峰式大小寫 (又稱為「駝峰式大小寫」) 是常見的 由多個字詞組成的識別碼駝峰式大小寫是 除了第一個字外,每個字的首字母大寫都能改善 而且沒有空格

let camelCasedIdentifier = true;

部分專案會根據情境和性質,使用其他命名慣例 資料結構例如類別的第一個字母 通常是大寫,因此多字類別名稱通常會使用駝峰式變體的名稱 通常稱為「大寫駝峰式」或 Pascal 命名法。

class MyClass {

}

ID 應簡明扼要地說明所含資料的性質 ( 例如,currentMonthDaystheNumberOfDaysInTheCurrentMonth 更好) 並一目瞭然 (originalValueval 好)。 此模組中使用的 myVariable ID 可在 隔離的樣本,但在實際工作環境程式碼中並不實用 完全不提供有關其中包含什麼資料的資訊。

ID 不應太具體地說明所含資料,因為 值可能會根據指令碼處理該資料的方式而改變 制定決策舉例來說,變數原本為 但 ID miles 之後可能需要以公里為單位 維護人員必須將對該變數的參照變更為 避免日後造成混淆為避免這種情況發生,請使用 distance 做為 ID 。

JavaScript 不會授予任何特殊權限或意義 開頭是底線字元 (_),但通常用於顯示這項資訊 變數、方法或屬性為「不公開」換句話說 ,且該物件不得為包含該物件的物件環境 會在該背景之外存取或修改這個慣例 程式碼,且在加入 JavaScript 程式碼前 私有屬性

變數宣告

您可以透過多種方式讓 JavaScript 辨識 ID, 稱為「宣告」變數。變數是使用 letconst、 或 var 個關鍵字。

let myVariable;

使用 letvar 宣告可隨時變更的變數。這些 關鍵字會告知 JavaScript 解譯器表示一組字元是 可能含有一個值的 ID。

用於新型程式碼集時,請使用 let,而非 varvar 仍可正常運作 但在新式瀏覽器中,但有一些非直覺的行為 最先的 JavaScript 版本,之後無法更改為 保留回溯相容性已在 ES6 中新增 let,藉此解決一些問題 採用 var 設計。

您宣告的變數是透過指派值來初始化 的變數。使用 單等號 (=),為變數指派或重新指派值。您可以做的 將這做為同一項聲明的一部分進行:

let myVariable = 5;

myVariable + myVariable
> 10

您也可以使用 let (或 var) 宣告變數,而不初始化該變數 就能立即上手如果這麼做,變數的初始值為 undefined,直到 便會為其指派一個值

let myVariable;

myVariable;
> undefined

myVariable = 5;

myVariable + myVariable
> 10

包含 undefined 值的變數與未定義的變數不同 因為其 ID 尚未宣告參照您未參照的變數 宣告會導致錯誤發生。

myVariable
> Uncaught ReferenceError: myVariable is not defined

let myVariable;

myVariable
> undefined

ID 與值的關聯通常稱為「繫結」。 遵循 letvarconst 關鍵字的語法稱為 「繫結清單」而且可使用多個以半形逗號分隔的變數宣告 (結尾為預期的分號)。這樣您就能將以下程式碼片段 功能完全相同:

let firstVariable,
     secondVariable,
     thirdVariable;
let firstVariable;
let secondVariable;
let thirdVariable;

重新指派變數的值不會使用 let (或 var),因為 JavaScript 已經知道變數存在:

let myVariable = true;

myVariable
> true

myVariable = false;

myVariable
> false

您可以根據變數的現有值重新指派新值:

let myVariable = 10;

myVariable
> 10

myVariable = myVariable * myVariable;

myVariable
> 100

如果您嘗試在實際工作環境中使用 let 重新宣告變數, 系統會顯示語法錯誤:

let myVariable = true;
let myVariable = false;
> Uncaught SyntaxError: redeclaration of let myVariable

瀏覽器的開發人員工具 let (和 class) 的重新宣告較高權限,因此您可能不需要 您在 Play 管理中心看到相同錯誤。

為保留舊版瀏覽器相容性,var 允許不必要的重新宣告 在任何情況下都不會發生錯誤:

var myVariable = true;
var myVariable = false;

myVariable\
> false

const

使用 const 關鍵字來宣告常數,也就是必須是一種變數類型 無法變更常數 ID 遵循與使用 let (和 var) 宣告變數的所有規則:

const myConstant = true;

myConstant
> true

您無法在不立即指派常數的情況下宣告常數,因為 常數在建立後即無法重新指派,因此任何未初始化的常數 常數會永久停留 undefined。如果您嘗試宣告常數 如未初始化,就會發生語法錯誤:

const myConstant;
Uncaught SyntaxError: missing = in const declaration

嘗試變更使用 const 宣告的變數值,方法可能會 使用 let (或 var) 宣告變數宣告的變數值,進而產生類型 錯誤:

const myConstant = true;

myConstant = false;
> Uncaught TypeError: invalid assignment to const 'myConstant'

不過,在常數與物件建立關聯時,該常數的屬性 物件可以修改

const constantObject = { "firstvalue" : true };

constantObject
> Object { firstvalue: true }

constantObject.secondvalue = false;

constantObject
> Object { firstvalue: true, secondvalue: false }

包含物件的常數為不可變 參照可變動資料值。 雖然常數本身無法變更,但參照的屬性 物件可以修改、新增或移除:

const constantObject = { "firstvalue" : true };

constantObject = false
> Uncaught TypeError: invalid assignment to const 'constantObject'

當您不希望系統重新指派變數時,最佳做法是將其設為 常數。使用 const 可讓您的開發團隊或日後的維護人員 同時避免破壞程式碼的假設 反過來介紹變數的使用方式 例如,變數最終會 並根據預期的資料類型進行評估

變數範圍

變數的範圍是指指令碼中可使用該變數的部分。 在變數的範圍之外,系統不會將其定義為 ID,而非 ID 包含 undefined 值,但就像尚未宣告一樣。

視您用來宣告變數的關鍵字和使用情境而定 您可以定義變數的範圍,藉此封鎖陳述式 (區塊範圍)、 個別函式 (函式範圍) 或整個 JavaScript 應用程式 (全域範圍)。

封鎖範圍

您使用 letconst 宣告的任何變數都會限定為最接近的變數 包含區塊陳述 代表變數只能在該區塊中存取想要 在包含區塊外存取範圍限定的變數會導致 錯誤:

{
    let scopedVariable = true;
    console.log( scopedVariable );
}
> true

scopedVariable
> ReferenceError: scopedVariable is not defined

就 JavaScript 而言,區塊範圍變數「不存在」 在包含該物件的區塊之外舉例來說,您可以宣告常數 然後在該區塊外宣告另一個常數,該區塊會使用 相同的 ID:

{
  const myConstant = false;
}
const myConstant = true;

scopedConstant;
> true

雖然宣告的變數無法延伸至其父項區塊,但該變數「是」 適用於所有子區塊:

{
    let scopedVariable = true;
    {
    console.log( scopedVariable );
    }
}
> true

宣告變數的值可在子系區塊內變更:

{
    let scopedVariable = false;
    {
    scopedVariable = true;
    }
    console.log( scopedVariable );
}
> true

可在子系中使用 letconst 初始化新變數 就會傳回不會發生錯誤 父項區塊:

{
    let scopedVariable = false;
    {
    let scopedVariable = true;
    }
    console.log( scopedVariable );
}
> false

函式範圍

使用 var 宣告的變數範圍會限定在最接近且包含函式的變數 (或類別中的靜態初始化區塊)。

function myFunction() {
    var scopedVariable = true;

    return scopedVariable;
}

scopedVariable;
> ReferenceError: scopedVariable is not defined

呼叫函式後也是如此。雖然 都會在函式執行時初始化,該變數仍 函式範圍外無法使用:

function myFunction() {
    var scopedVariable = true;

    return scopedVariable;
}

scopedVariable;
> ReferenceError: scopedVariable is not defined

myFunction();
> true

scopedVariable;
> ReferenceError: scopedVariable is not defined

全域範圍

全域變數適用於整個 JavaScript 應用程式 與網頁上的任何指令碼搭配使用

雖然這看起來是理想的預設值,但如果是 應用程式可以存取並修改,都可能造成不必要的負擔, 應用程式的其他變數與 ID 相同的變數發生衝突。 這項規定適用於轉譯網頁的所有 JavaScript、 包括第三方程式庫和使用者分析等因此 最佳做法,盡可能避免輪詢全域範圍

在父項函式外使用 var,或使用 let 或 父項封鎖條件以外的 const 屬於全域性質:

var functionGlobal = true; // Global
let blockGlobal = true; // Global

{
    console.log( blockGlobal );
    console.log( functionGlobal );
}
> true
> true

(function() {
    console.log( blockGlobal );
    console.log( functionGlobal );
}());
> true
> true

將值指派給變數時,並未明確宣告 從未使用 varletconst 來建立該變數),會將變數提升為 在函式或區塊中初始化時,也視為全域範圍。變數 透過這個模式建立而成,有時也稱為「隱含全域」。

function myFunction() {
    globalVariable = "global";

    return globalVariable
}

myFunction()\
> "global"

globalVariable\
> "global"

變數提升

變數和函式宣告會「提升」至其範圍頂端。 也就是 JavaScript 解譯器會處理任何在任意位置 並有效地將該元素移到所屬欄內的第一行 範圍。這表示使用 宣告變數之前可以參照 var,不會遇到 錯誤:

hoistedVariable
> undefined

var hoistedVariable;

由於只代管變數宣告,而非初始化 尚未使用 varletconst 明確宣告的變數 不會提升:

unhoistedVariable;
> Uncaught ReferenceError: unhoistedVariable is not defined

unhoistedVariable = true;

如上所述,這是已宣告但尚未初始化的變數 指定的值為 undefined。此行為適用於提升的變數 ,但僅限使用 var 宣告的宣告。

hoistedVariable
> undefined

var hoistedVariable = 2 + 2;

hoistedVariable\
> 4

這種不直觀的行為主要是阻礙設計人員在決策過程中 最新版本 JavaScript,而且除非有 破壞現有的網站

letconst 則處理這個行為,反而會在 變數的存取方式:

{
    hoistedVariable;

    let hoistedVariable;
}
> Uncaught ReferenceError: can't access lexical declaration 'hoistedVariable' before initialization

這個錯誤與「未定義變數」不同發生錯誤 可能會預期存取由於 JavaScript 會提升變數,系統知道會在 指定範圍但是,不要在變數開始前 宣告值為 undefined 時,解譯器會擲回錯誤。 系統說,使用 letconst (或 class) 宣告的變數存在於 「暫時死區間」(簡稱「TDZ」) 指向宣告變數的程式碼

暫時死區域會讓 let 的行為比 var 更直覺易懂 位作者。設計 const 也同樣重要。由於常數無法 就會有一個常數。該常數上升至其範圍頂端,並給定 undefined 的值無法以有意義的值初始化。

隨堂測驗

ID 可使用哪些類型的字元?

字母
底線
一個數字

如果想要宣告包含值的變數,建議您使用該方法。 可以隨時變更嗎?

const
變異數