JavaScript系列一：語言基礎

"Code tailor"，爲前端開發者提供技術相關資訊以及系列基礎文章，微信關注「小和山的菜鳥們」公衆號，及時獲取最新文章。

前言

在開始學習以前，咱們想要告訴您的是，本文章是對JavaScript語言知識中 "語言基礎-語法和變量" 部分的總結，若是您已掌握下面知識事項，則可跳過此環節直接進入題目練習

• 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

變量命名規則

1. 嚴格區分大小寫(大寫的變量和小寫的變量是不一樣的變量)；
2. 變量名能夠由數字、字母(大小寫均可以)、下劃線、美圓符($)組成，可是不能以數字開頭；
3. 不能是 javascript 中的關鍵字和保留字，如：if，else，function 等；
4. 變量名須要有意義，即語義化，加強代碼可讀性，好比：存儲年齡用 age，姓名用 name，能夠防止過段時間就不理解代碼是什麼了，也能夠防止合做時別人看不懂；
5. 使用駝峯命名法：從第二個單詞開始，首字母大寫，如用戶我的數據(userPersonalData)；

題目自測

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

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

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

---

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

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

console.log(xhsNumber)
let xhsNumber = 26

---

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

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

題目解析

1、

Answer：A

這道題考查的是 var 聲明做用域，在第一行 xhsRookies 變量在 textFun 函數做用域外使用 var 定義的，第三行 xhsRookies 變量是在 textFun 做用域內部使用 var 定義的。因此最後一行輸出 xhsRookies 實際上是第一行定義的，結果是：hello

2、

Answer：

undefined

ReferenceError: Cannot access 'xhsNumber' before initialization

此題考查的是變量的提高，輸出 xshRookies 時，因爲 xshRookies 使用 var 聲明的，存在變量提高，因此在輸出前會認爲 var xshRookies 並未賦值，因此是undefind;在解析代碼時，JavaScript 引擎也會注意出如今塊後面的 let 聲明，只不過在此以前不能以任何方式來引用未聲明的變量。在 let 聲明以前的執行瞬間被稱爲「暫時性死區」(temporal dead zone)，在此階段引用任何後面才聲明的變量都會拋出 ReferenceError。

3、

Answer：

TypeError: Assignment to constant variable.

此題考查的是 const 聲明特色，用它聲明變量時必須同時初始化變量，且嘗試修改 const 聲明的變量會致使運行時錯誤。