前言

本文章是對JavaScript語言知識中 “語言基礎-語法和變數” 部分的總結,如果您已掌握下面知識事項，則可跳過此環節直接進入結尾處的題目練習。

第一段代碼

在開始學習 JavaScript 時，我們先看一段 JavaScript 代碼，如下：

console.log('Hello JavaScript!')

你能猜到這段代碼的結果嗎？這段代碼的操作就是在控制台輸出結果是 Hello JavaScript!，到這裡第一段代碼就結束了。

JavaScript 語法

區分大小寫

你需要知道，ECMAScript中一切都區分大小寫。無論是變數、函數名還是操作符，都區分大小寫。舉個例子，變數XHS 和變數xhs是兩個不同的變數。

標識符

所謂標識符，就是變數、函數、屬性或函數參數的名稱。標識符可以由一或多個下列字元組成:

• 第一個字元必須是一個字母、下劃線(_)或美元符號($);
• 剩下的其他字元可以是字母、下劃線、美元符號或數字。

標識符中的字母可以是擴展 ASCII(Extended ASCII)中的字母，也可以是 Unicode 的字母字元.
按照慣例，ECMAScript標識符使用駝峰大小寫形式，即第一個單詞的首字母小寫，後面每個單詞的首字母大寫，如:

xhsRookies
xhsRookiesBoy

雖然這種寫法並不是強制性的，但因為這種形式跟 ECMAScript 內置函數和對象的命名方式一致， 所以算是最佳實踐。

注意 關鍵字、保留字、true、false 和 null 不能作為標識符。

代碼注釋

JavaScript 中有兩種注釋方式：單行注釋和多行注釋。

注釋的代碼在程序中不會執行

單行注釋以兩個斜杠字元開頭，如:

// 單行注釋

多行注釋以一個斜杠和一個星號(/)開頭，以它們的反向組合(/)結尾，如：

/* 這是多行
       注釋 */

嚴格模式

ECMAScript 5增加了嚴格模式(strict mode)的概念。嚴格模式是一種不同的 JavaScript 解析和執行模型，ECMAScript 3 的一些不規範寫法在這種模式下會被處理，對於不安全的活動將拋出錯誤。要對整個腳本啟用嚴格模式，在腳本開頭加上這一行:

'use strict'

雖然看起來像個沒有賦值給任何變數的字元串，但它其實是一個預處理指令。任何支持 JavaScript 的引擎看到它都會切換到嚴格模式。選擇這種語法形式的目的是不破壞 ECMAScript 3語法。

也可以單獨指定一個函數在嚴格模式下執行，只要把這個預處理指令放到函數體開頭即可:

function doSomething() {
  'use strict'
  // 函數體
}

嚴格模式會影響 JavaScript 執行的很多方面，所有現代瀏覽器都支持嚴格模式。

語句

ECMAScript中的語句以分號結尾。省略分號意味著由解析器確定語句在哪裡結尾，如下面的例子所示:

var sum = a + b // 沒有分號也有效，但不推薦
var diff = a - b // 加分號有效，推薦

即使語句末尾的分號不是必需的，也應該加上。記著加分號有助於防止省略造成的問題，比如可以避免輸入內容不完整。此外，加分號也便於開發者通過刪除空行來壓縮代碼(如果沒有結尾的分號，只刪除空行，則會導致語法錯誤)。加分號也有助於在某些情況下提升性能，因為解析器會嘗試在合適的位置補上分號以糾正語法錯誤。

關鍵字與保留字

ECMA-262描述了一組保留的關鍵字，這些關鍵字有特殊用途，比如表示控制語句的開始和結束，或者執行特定的操作。按照規定，保留的關鍵字不能用作標識符或屬性名。

break       do          in            typeof
case        else        instanceof    var
catch       export      new           void
class       extends     return        while
const       finally     super         with
continue    for         switch        yield
debugger    function    this
default     if          throw
delete      import      try

規範中也描述了一組未來的保留字，同樣不能用作標識符或屬性名。雖然保留字在語言中沒有特定用途，但它們是保留給將來做關鍵字用的。以下是 ECMA-262第 6 版為將來保留的所有辭彙。
始終保留：

enum

嚴格模式下保留

implements  package     public
interface   protected   static
let         private

模塊代碼中保留

await

聲明變數並賦值

在 JavaScript 中，有 3 個關鍵字可以聲明變數: var、const 和 let。其中，var在 ECMAScript的所有版本中都可以使用，而 const 和let 只能在ECMAScript 6(將在後面學到) 及更晚的版本中使用。

var 關鍵字

要定義變數，可以使用 var關鍵字，後跟變數名:

var xhsRookies

這行代碼定義了一個名為 xhsRookies的變數，可以用它保存任何類型的值。ECMAScript實現變數初始化，因此可以同時定義變數並設置它的值:

var xhsRookies = 'hi'

xhsRookies被定義為一個保存字元串值hi的變數。像這樣初始化變數不會將它標識為字元串類型，只是一個簡單的賦值而已。隨後，不僅可以改變保存的值，也可以改變值的類型:

var xhsRookies = 'hi'
xhsRookies = 100 // 合法，但不推薦

在這個例子中，變數 xhsRookies首先被定義為一個保存字元串值hi的變數，然後又被重寫為保存了數值 100 。雖然不推薦改變變數保存值的類型，但這在ECMAScript中是完全有效的。
1. var 聲明作用域
使用 var操作符定義的變數會成為包含它的函數的局部變數。比如，使用 var在一個函數內部定義一個變數，就意味著該變數將在函數退出時被銷毀:

function xhsTest() {
  var xhsRookies = 'hi' // 局部變數
}
xhsTest()
console.log(xhsRookies) // 出錯!

這裡，xhsRookies變數是在函數內部使用var 定義的。函數叫 xhsTest()，調用它會創建這個變數並給它賦值。調用之後變數隨即被銷毀，因此示例中的最後一行會導致錯誤。不過，在函數內定義變數時省略 var操作符，可以創建一個全局變數:

function xhsTest() {
  xhsRookies = 'hi' // 全局變數
}
xhsTest()
console.log(xhsRookies) // "hi"

去掉之前的 var之後，xhsRookies 就變成了全局變數。只要調用一次函數 xhsTest()，就會定義這個變數，並且可以在函數外部訪問到。

雖然可以通過省略 var 操作符定義全局變數，但不推薦這麼做。在局部作用域中定義的全局變數很難維護，也會造成困惑。

如果需要定義多個變數，可以在一條語句中用逗號分隔每個變數(即可選的初始化):

var xhsRookies = 'hi',
  xhsFound = false,
  xhsNumber = 29

這裡定義並初始化了 3 個變數。
2. var 聲明提升
使用 var時，下面的代碼不會報錯。這是因為使用這個關鍵字聲明的變數會自動提升到塊作用域 5 頂部:

{
  console.log(xhsNumber) // undefined
  var xhsNumber = 26
}

之所以不會報錯，是因為 ECMAScript 運行時把它看成等價於如下代碼:

{
  var xhsNumber
  console.log(xhsNumber) // undefined
  xhsNumber = 26
}

這就是所謂的「提升」(hoist)，也就是把所有變數聲明都拉到塊作用域的頂部。

let 聲明

let跟 var的作用差不多，但有著非常重要的區別。最明顯的區別是，let聲明的範圍是塊作用域， 而var 聲明的範圍是函數作用域。

{
  var xhsRookies = 'xhs-rookies'
  console.log(xhsRookies) // xhs-rookies
}
console.log(xhsRookies) // xhs-rookies

{
  let xhsNumber = 26
  console.log(xhsNumber) // 26
}
console.log(xhsNumber) // ReferenceError: xhsNumber 沒有定義

在這裡，xhsNumber變數之所以不能在塊作用域外部被引用，是因為它的作用域僅限於該塊內部。塊作用域是函數作用域的子集，因此適用於 var的作用域限制同樣也適用於let。
let也不允許同一個塊作用域中出現冗餘聲明。這樣會導致報錯:

var xhsRookies
var xhsRookies
let xhsNumber
let xhsNumber // SyntaxError;標識符xhsNumber已經聲明過了

當然，JavaScript 引擎會記錄用於變數聲明的標識符及其所在的塊作用域，因此嵌套使用相同的標識符不會報錯，而這是因為同一個塊中沒有重複聲明:

var xhsRookies = 'xhs-rookies'
console.log(xhsRookies) // 'xhs-rookies'
{
  var xhsRookies = 'xhs-rookies-boy'
  console.log(xhsRookies) // 'xhs-rookies-boy'
}
let xhsNumber = 30
console.log(xhsNumber) // 30
{
  let xhsNumber = 26
  console.log(xhsNumber) // 26
}

對聲明冗餘報錯不會因混用let 和 var而受影響。這兩個關鍵字聲明的並不是不同類型的變數， 它們只是指出變數在相關作用域如何存在。

var xhsRookies
let xhsRookies // SyntaxError
let xhsNumber
var xhsNumber // SyntaxError

1. 全局聲明
與var關鍵字不同，使用 let 在全局作用域中聲明的變數不會成為window對象的屬性(var聲明的變數則會)。

var xhsRookies = 'xhsRookies'
console.log(window.xhsRookies) // 'xhsRookies'
let xhsNumber = 26
console.log(window.xhsNumber) // undefined

不過，let聲明仍然是在全局作用域中發生的，相應變數會在頁面的生命周期內存續。因此，為了 避免 SyntaxError，必須確保頁面不會重複聲明同一個變數。
2. let 作用域
在 let出現之前，代碼塊中定義的迭代變數會滲透到外部:

{
  var xhs = 5
}
console.log(xhs) // 5

改成使用 let 之後，這個問題就消失了，因為 let 變數的作用域僅限於代碼塊內部:

{
  let xhs = 0
}
console.log(xhs) // ReferenceError: xhs 沒有定義

const 聲明

const的行為與let基本相同，唯一一個重要的區別是用它聲明變數時必須同時初始化變數，且嘗試修改 const聲明的變數會導致運行時錯誤。

const xhsNumber = 26
xhsNumber = 36 // TypeError: 給常量賦值

// const 也不允許重複聲明
const xhsRookies = 'xhs-rookies'
const xhsRookies = 'xhs-rookies-boy' // SyntaxError

// const 聲明的作用域也是塊
const xhsRookies = 'xhs-rookies'
console.log(xhsRookies) // xhs-rookies

變數命名規則

• 嚴格區分大小寫(大寫的變數和小寫的變數是不同的變數)；
• 變數名可以由數字、字母(大小寫都可以)、下劃線、美元符($)組成，但是不能以數字開頭；
• 不能是 javascript 中的關鍵字和保留字，如：if，else，function 等；
• 變數名需要有意義，即語義化，增強代碼可讀性，比如：存儲年齡用 age，姓名用 name，可以防止過段時間就不理解代碼是什麼了，也可以防止合作時別人看不懂；
• 使用駝峰命名法：從第二個單詞開始，首字母大寫，如用戶個人數據(userPersonalData)；

題目自測

一：下列代碼輸出結果是什麼？

var xhsRookies = 'hello'
function textFun() {
  var xhsRookies = 'hi'
}
console.log(xhsRookies)

A. hello
B. hi
C. hi hello
D. hello hi

Answer：A
這道題考查的是 var 聲明作用域，在第一行 xhsRookies變數在 textFun函數作用域外使用 var定義的，第三行xhsRookies變數是在textFun作用域內部使用 var 定義的。所以最後一行輸出 xhsRookies其實是第一行定義的，結果是：hello

二: 下列代碼輸出結果是什麼？

console.log(xhsRookies)
var xshRookies = 'xhs-rookies'

console.log(xhsNumber)
let xhsNumber = 26

Answer
undefined
ReferenceError: Cannot access ‘xhsNumber’ before initialization
此題考查的是變數的提升，輸出 xshRookies 時，由於 xshRookies使用 var聲明的，存在變數提升，所以在輸出前會認為 var xshRookies並未賦值，所以是undefind;在解析代碼時，JavaScript 引擎也會注意出現在塊後面的 let聲明，只不過在此之前不能以任何方式來引用未聲明的變數。在let聲明之前的執行瞬間被稱為「暫時性死區」(temporal dead zone)，在此階段引用任何後面才聲明的變數都會拋出 ReferenceError。

三: 下列代碼輸出結果是什麼？

const xhsNumber = 26
xhsNumber = 36
console.log(xhsNumber)

Answer
TypeError: Assignment to constant variable.
此題考查的是const聲明特點，用它聲明變數時必須同時初始化變數，且嘗試修改 const聲明的變數會導致運行時錯誤。

JavaScript 系列的語言基礎，到這裡結束啦，謝謝各位對小編的支持！你們的關注和點贊，將會是我前進的最強動力！謝謝大家！