前面的話

　　javascript是一門簡單的語言，也是一門復雜的語言。說它簡單，是因為學會使用它只需片刻功夫；而說它復雜，是因為要真正掌握它則需要數年時間。實際上，前端工程師很大程度上就是指javascript工程師。前端入門容易精通難，說的是前端，更指的是javascript。本文是javascript基礎語法的第一篇——詞法結構。詞法結構是一套基礎性規則，用來描述如何使用javascript來編寫程序

?

與java關系

　　關于javascript有這樣一個說法，java和javascript的關系是雷鋒和雷鋒塔的關系。那到底有沒有關系呢

　　javascript最開始的名字是LiveScript，后來選擇javascript作為其正式名稱的原因，大概是想讓它聽起來有系出名門的感覺。除了語法看起來和java類似之外，javascript和java是完全不同的兩種編程語言

　　程序設計語言分為解釋型和編譯型兩大類。java或C++等語言需要一個編譯器。編譯器是一種程序，能夠把用java等高級語言編寫出來的源代碼翻譯為直接在計算機上執行的文件。解釋型程序設計語言不需要編譯器——它們僅需要解釋器，瀏覽器中的javascript解釋器將直接讀入源代碼并執行

　　java在理論上幾乎可以部署在任何環境，但javascript卻傾向于只應用在web瀏覽器。而且，在javascript語言中，函數是一種獨立的數據類型，采用基于原型對象（prototype）的繼承鏈，javascript語法要比Java自由得多

　　基本上，JavaScript這個名字的原意是“很像Java的腳本語言”

?

定義

　　javascript是一門動態的、弱類型的解釋型編程語言，非常適合面向對象和函數式的編程風格。javascript的語法源自java，它的一等函數來自scheme，它的基于原型的繼承來自self

　　javascript用來增強頁面動態效果，實現頁面與用戶之間的實時、動態交互

　　javascript由三部分組成：ECMAScript、DOM和BOM

　　[1]ECMAScript由ECMA-262定義，提供核心語言功能（ECMA是歐洲計算機制造商協會）

　　[2]DOM(Document Object Model)文檔對象模型，提供訪問和操作網頁內容的方法和接口

　　[3]BOM(Browser Object Model)瀏覽器對象模型，提供與瀏覽器交互的方法和接口

大小寫敏感

　　關于javascript這門語言，再怎么強調都不為過的特性是大小寫敏感。javascript中的關鍵字、變量、函數名和所有的標識符都必須采取一致的大小寫形式

//'online'、'Online'、'OnLine'、'ONLINE'是四個不同的變量名

　　[注意]HTML并不區分大小寫(盡管XHTML區分大小寫)。許多客戶端javascript對象和屬性與它們表示的HTML標簽和屬性同名。在HTML中，這些標簽和屬性名可以使用大寫也可以使用小寫，而在javascript中則必須是小寫。例如，在HTML中設置事件處理程序時，onclick屬性可以寫成onClick，但在javascript代碼中，必須使用小寫的onclick

?

保留字(ReservedWord)

　　和其他任何編程語言一樣，javascript保留了一些標識符為自己所用。這些保留字不能用做普通的標識符。由于好多參考書的誤導，貌似保留字和關鍵字是分開的，其實并不是，關鍵字只是保留字的一部分。保留字包括關鍵字、未來保留字、空字面量和布爾值字面量

保留字 ReservedWord ::KeywordFutureReservedWordNullLiteralBooleanLiteral

關鍵字

break do instanceof typeofcase else new varcatch finally return voidcontinue for switch whiledebugger function this withdefault if throw deletein try

未來保留字

　　下列詞被用作建議擴展關鍵字，因此保留，以便未來可能采用這些擴展

class enum extends superconst export import

ECMAScript3版本

　　以上是ECMAScript5的保留字，但在ECMAScript3版本中的保留字并不一樣，若希望代碼能在基于ECMAScript3實現的解釋器上運行的話，應該避免使用以下保留字作為標識符

abstract boolean byte char class constdouble enum export extends final float goto implements import int interfacelong native package private protected public short static super synchronized throw transient volatile

預定義變量和函數

　　此外，javascript預定義了很多全局變量和函數，應該避免把它們的名字用做標識符名

arguments Array Boolean Date decodeURI decodeURIComponent encodeURI
encodeURIComponent Error eval EvalError Function Infinity isFinite isNaN JSON Math NaN Number Object parseFloat parseInt RangeError ReferenceError RegExp String SyntaxError TypeError undefined URIError

?

注釋(Comment)

　　不是所有語句都需要javascript解釋器去解釋并執行。有時需要在腳本中寫一些僅供自己參考或提醒自己的信息，并希望javascript解釋器能直接忽略掉這些信息，這類信息就是注釋

　　注釋能有效幫助了解代碼流程，在代碼中它們扮演生活中便條的角色，可以幫助我們弄清楚腳本到底干了什么

　　[注意]注釋一定要精確地描述代碼，沒有用的注釋比沒有注釋還要糟糕

　　有多種方式可以在javascript腳本中插入注釋，包括單行注釋、多行注釋和HTML風格的注釋

【1】單行注釋以兩個斜杠開頭

//單行注釋

【2】多行注釋又叫塊級注釋，以一個斜杠和一個星號/*開頭，以一個星號和一個斜杠*/結尾

/*這是一個多行注釋*/

　　[注意]塊級注釋/**/可以跨行書寫，但不能嵌套，否則會報錯

//報錯 /* 注釋1 /* 注釋1.1*/*/

　　[注意]塊級注釋/**/中的那些字符也可能出現在正則表達式字面量里，所以塊級注釋對于被注釋的代碼塊來說是不安全的

/*var rm_a = /a*/.match(s); */

【3】HTML風格的注釋僅僅適用于單行注釋，其實javascript解釋器對<!--的處理和對//的處理是一樣的

<!-- 這是javascript中的注釋

　　如果在HTML文檔中，還需要以-->來結束注釋

<!-- 這是HTML中的注釋 -->

　　但javascript不要求這么做，它會把-->視為注釋內容的一部分

　　[注意]HTML允許上面這樣的注釋跨越多行，但這種注釋的每行都必須在開頭加上"<!--"來作為標志

<!-- 我是注釋1 <!-- 我是注釋2 <!-- 我是注釋3

　　因為javascript解釋器在處理這種風格的注釋時與HTML做法不同，為避免發生混淆，最好不要在javascript腳本中使用HTML風格的注釋

?

空白(WhiteSpace)

　　空白通常沒有意義，有時候必須要用它來分隔字符序列，否則它們就會被合并成一個符號

var that = this;

　　var和that之間的空白是不能移除的，但其他的空白可以移除

　　javascript會忽略程序中標識(token)之間的空格。多數情況下，javascript同樣會忽略換行符。由于可以在代碼中隨意使用空格和換行，因此可以采用整齊、一致的縮進來形成統一的編碼風格，從而提高代碼的可讀性

//通過增加空白字符，提高代碼可讀性 for(var i = 1; i < 10; i++){// }

　　javascript將如下這些識別為空白字符WhiteSpace

\u0009 水平制表符 <TAB> \u000B 垂直制表符 <VT> \u000C 換頁符 <FF> \u0020 空格符 <SP> \u00A0 非中斷空格符 <NBSP> \uFEFF 字符序標記

　　javascript將如下字符識別為行終止符LineTerminator

\u000A 換行符 <LF> \u000D 回車符 <CR> \u2028 行分隔符 <LS> \u2029 段落分割符 <PS>

?

可選的分號

　　javascript使用分號;將語句分隔開，這對增強代碼的可讀性和整潔性是非常重要的

　　有些地方可以省略分號，有些地方則不能省略分號

//兩條語句用兩行書寫，第一個分號可以省略 a = 3; b = 4; //兩條語句用一行書寫，第一個分號不能省略 a = 3; b = 4;

　　但javascript并不是在所有換行處都填補分號，只有在缺少了分號就無法正確解析代碼時，javascript才會填補分號。換句話說，如果當前語句和隨后的非空格字符不能當成一個整體來解析的話，javascript就在當前語句行結束處填補分號

var a a = 3 console.log(a)

　　javascript將其解析為:

var a; a = 3; console.log(a);

　　這種語句的分隔規則會導致一些意想不到的情形

var y = x + f (a+b).toString

　　javascript將其解析為:

var y = x + f(a+b).toString

　　因此，為了能讓上述代碼解析成兩條不同的語句，必須手動填寫行尾的顯式分號

　　通常來講，如果一條語句以'('、'['、'/'、'+'、'-'等符號開始，那么它極有可能和前一條語句合一起解析

兩個例外

　　如果當前語句和下一行語句無法合并解析，javascript會在第一行后填補分號，這是通用規則，但有兩個例外

　　【1】第一個例外是涉及return、break、continue、throw語句的場景中。如果這四個關鍵字后緊跟著換行，javascript會在換行處填補分號

return true;

　　javascript將其解析為:

return;true;

　　而代碼的本意是:

return true;

　　【2】第二個例外是在涉及++和--運算符時，如果將其用作后綴表達式，它和表達式應該同一行。否則，行尾將填補分號，同時++或--將作為下一行代碼的前綴操作符并與之一起解析

x ++ y

　　javascript將其解析為:

x;++y;

　　而代碼的本意是:

x++;y;

　　雖然分號不是必須的，但最好不要省略它，因為加上分號可以避免很多錯誤，代碼行結尾處沒有分號會導致壓縮錯誤。加上分號也會在某些情況下增進代碼的性能，因為這樣解析器就不必再花時間推測應該在哪里插入分號了

?

參考資料

【1】 ES5/詞法 https://www.w3.org/html/ig/zh/wiki/ES5/lexical
【2】 阮一峰Javascript標準參考教程——語法概述 http://javascript.ruanyifeng.com/grammar/basic.html
【3】 W3School-Javascript高級教程——ECMAScript語法 http://www.w3school.com.cn/js/pro_js_syntax.asp
【4】《javascript權威指南(第6版)》第2章 詞法結構
【5】《javascript高級程序設計(第3版)》第3章 基本概念
【6】《javascript語言精粹(修訂版)》第2章 語法
【7】《javascript DOM編程藝術(第2版)》第2章 Javascript語法

?

轉載于:https://www.cnblogs.com/xiaohuochai/p/5543930.html

總結

以上是生活随笔為你收集整理的javascript基础语法——词法结构的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。