第深入理解JavaScript中的語法和代碼結(jié)構(gòu)目錄概述功能性和可讀性空白括弧分號縮進(jìn)身份標(biāo)識區(qū)分大小寫保留關(guān)鍵字

概述

所有編程語言都必須遵守特定的規(guī)則才能運(yùn)行。確定編程語言的正確結(jié)構(gòu)的這組規(guī)則稱為語法。許多編程語言主要由具有語法變化的類似概念組成。

在本教程中，我們將介紹JavaScript語法和代碼結(jié)構(gòu)的許多規(guī)則和約定。

功能性和可讀性

在開始使用JavaScript時，功能性和可讀性是關(guān)注語法的兩個重要原因。

有些語法規(guī)則是JavaScript功能所必需的。如果不遵循它們，控制臺將拋出一個錯誤，腳本將停止執(zhí)行。

考慮“Hello，World！”中的語法錯誤。程序：

//ExampleofabrokenJavaScriptprogram

console.log("Hello,World!"

此代碼示例缺少右括號，沒有打印預(yù)期的“Hello，World！”到控制臺上，將出現(xiàn)以下錯誤：

UncaughtSyntaxError:missing)afterargumentlist

必須在腳本繼續(xù)運(yùn)行之前添加缺少的"）"。這是JavaScript語法錯誤如何破壞腳本的示例，因為必須遵循正確的語法才能運(yùn)行代碼。

JavaScript語法和格式的某些方面基于不同的思想流派。也就是說，有些風(fēng)格規(guī)則或選擇不是強(qiáng)制性的，并且在運(yùn)行代碼時不會導(dǎo)致錯誤。然而，有許多常見的約定值得遵循，因為項目和代碼庫之間的開發(fā)人員將更加熟悉這種風(fēng)格。遵守常見的慣例可以提高可讀性。

考慮下面三個變量賦值的例子。

constgreeting="Hello";//nowhitespacebetweenvariablestring

constgreeting="Hello";//excessivewhitespaceafterassignment

constgreeting="Hello";//singlewhitespacebetweenvariablestring

盡管上面的三個示例在輸出中的功能完全相同，但第三個選項greeting="Hello";是迄今為止最常用和最可讀的代碼編寫方式，尤其是在大型程序的上下文中考慮時。

保持整個編碼項目的風(fēng)格一致是很重要的。從一個組織到另一個組織，您將遇到不同的指導(dǎo)方針，所以您也必須靈活。

我們將在下面介紹一些代碼示例，以便您熟悉JavaScript代碼的語法和結(jié)構(gòu)，并在有疑問時再參考本文。

空白

JavaScript中的空格由空格，制表符和換行符組成（按下ENTER鍵盤）。如前所述，JavaScript會忽略字符串外的過多空格以及運(yùn)算符和其他符號之間的空格。這意味著以下三個變量賦值示例將具有完全相同的計算輸出：

constuserLocation="NewYorkCity,"+"NY";

constuserLocation="NewYorkCity,"+"NY";

constuserLocation="NewYorkCity,"+"NY";

userLocation將代表“NewYorkCity，NY”，無論這些樣式中的哪一種都寫在腳本中，它們也不會對JavaScript產(chǎn)生影響，無論空格是用標(biāo)簽還是空格寫的。

一個很好的經(jīng)驗法則，能夠遵循最常見的空白約定，就是遵循與數(shù)學(xué)和語言語法相同的規(guī)則。

這種風(fēng)格的一個顯著的例外是在分配多個變量的過程中。請注意以下示例中=的位置：

constcompanyName="DigitalOcean";

constcompanyHeadquarters="NewYorkCity";

constcompanyHandle="digitalocean";

所有賦值運(yùn)算符（=）都排成一行，變量后有空格。這種類型的組織結(jié)構(gòu)不是每個代碼庫都使用的，但可以用來提高可讀性。

JavaScript會忽略多余的換行符。通常，會在注釋上方和代碼塊之后插入額外的換行符。

括弧

對于if、switch和for等關(guān)鍵字，通常在括號前后添加空格。觀察下面的比較和循環(huán)示例。

//Anexampleofifstatementsyntax

if(){}

//Checkmathequationandprintastringtotheconsole

if(45){

console.log("4islessthan5.");

//Anexampleof

forloopsyntaxfor(){}

//Iterate10times,printingouteachiterationnumbertotheconsole

for(leti=0;i=10;i++){

console.log(i);

}

if語句和for循環(huán)在括號的每一側(cè)都有空格（但不在括號內(nèi)）。

當(dāng)代碼屬于函數(shù)，方法或類時，括號將觸及相應(yīng)的名稱。

//Anexample

functionfunctionfunctionName(){}

//Initializeafunctiontocalculatethevolumeofacube

functioncube(number){

returnMath.pow(number,3);

//Invokethefunction

cube(5);

在上面的示例中，cube（）是一個函數(shù)，括號（）對將包含參數(shù)或參數(shù)。在這種情況下，參數(shù)分別為數(shù)字或5。盡管帶有額外空間的多維數(shù)據(jù)集（）是有效的，因為代碼將按預(yù)期執(zhí)行，但幾乎看不到它。將它們放在一起有助于輕松地將函數(shù)名與括號對以及任何關(guān)聯(lián)的傳遞參數(shù)關(guān)聯(lián)起來。

分號

JavaScript程序由一系列稱為語句的指令組成，正如書面段落由一系列句子組成一樣。雖然句子將以句點(diǎn)結(jié)尾，但javascript語句通常以分號（；）結(jié)尾。

//AsingleJavaScriptstatement

constnow=newDate();

如果兩個或多個語句相鄰，則必須用分號分隔它們。

//Getthecurrenttimestampandprintittotheconsole

constnow=newDate();console.log(now);

如果語句由換行符分隔，則分號是可選的。

//Twostatementsseparatedbynewlines

constnow=newDate()

console.log(now)

一種安全而通用的約定是用分號分隔語句，而不考慮換行。一般來說，將它們包括在內(nèi)以降低出錯的可能性被認(rèn)為是良好的做法。

//Twostatementsseparatedbynewlinesandsemicolons

constnow=newDate();

console.log(now);

在for循環(huán)的初始化、條件和增量或減量之間也需要分號。

for(initialization;condition;increment){

//runtheloop

}

分號不包括在任何類型的塊語句之后，例如if、for、do、while、class、switch和function。這些塊語句包含在大括號中。請注意下面的示例。

//Initializeafunctiontocalculatetheareaofasquare

functionsquare(number){

returnMath.pow(number,2);

//Calculatetheareaofanumbergreaterthan0

if(number0){

square(number);

}

注意，并非所有用大括號括起來的代碼都以分號結(jié)尾。對象用大括號括起來，并以分號結(jié)尾。

//Anexampleobject

constobjectName={};

//Initializetriangleobject

consttriangle={

type:"right",

angle:90,

sides:3,

};

在除了塊語句之外的每個JavaScript語句之后包含分號是廣為接受的做法，這些語句以大括號結(jié)尾。

縮進(jìn)

從技術(shù)上講，完整的JavaScript程序可以在一行中編寫。但是，這很快就會變得非常難以閱讀和維護(hù)。相反，我們使用換行符和縮進(jìn)。

下面是一個條件if/else語句的例子，它要么寫在一行上，要么用換行符和縮進(jìn)。

//Conditionalstatementwrittenononeline

if(x===1){/*executecodeiftrue*/}else{/*executecodeiffalse*/}

//Conditionalstatementwithindentation

if(x===1){

//executecodeiftrue

}else{

//executecodeiffalse

}

請注意，塊中包含的任何代碼都是縮進(jìn)的?？s進(jìn)可以用兩個空格、四個空格或按制表符來完成。選項卡或空間的使用取決于您的個人偏好（對于單獨(dú)項目）或組織的指導(dǎo)方針（對于協(xié)作項目）。

像上面的例子一樣，在第一行末尾包括左大括號是構(gòu)造JavaScript塊語句和對象的常規(guī)方法。您可能看到塊語句編寫的另一種方式是在它們自己的行上使用大括號。

//Conditionalstatementwithbracesonnewlines

if(x===1){

//executecodeiftrue

}else{

//executecodeiffalse

}

這種風(fēng)格在JavaScript中不像在其他語言中那樣常見，但并非聞所未聞。

任何嵌套的block語句都將進(jìn)一步縮進(jìn)。

//InitializeafunctionfunctionisEqualToOne(x){

//Checkifxisequaltoone

if(x===1){//onsuccess,returntrue

returntrue;

}else{returnfalse;

}

正確的代碼縮進(jìn)對于保持可讀性和減少混亂是必不可少的。要記住這個規(guī)則的一個例外是，壓縮的庫將刪除不必要的字符，因此呈現(xiàn)較小的文件大小以加快頁面加載時間（如jquery.min.js和d3.min.js）。

身份標(biāo)識

變量、函數(shù)或?qū)傩缘拿Q在JavaScript中稱為標(biāo)識符。標(biāo)識符由字母和數(shù)字組成，但不能包含$和u之外的任何符號，也不能以數(shù)字開頭。

區(qū)分大小寫

這些名稱區(qū)分大小寫。以下兩個示例myvariable和myvariable將引用兩個不同的變量。

varmyVariable=1;

varmyvariable=2;

javascript名稱的慣例是用camelcase編寫，這意味著第一個單詞是小寫的，但后面的每個單詞都以大寫字母開頭。您還可以看到用大寫字母書寫的全局變量或常量，用下劃線分隔。

constINSURANCE_RATE=0.4;

這個規(guī)則的例外是類名，它通常是以大寫字母（pascalcase）開頭的每個單詞編寫的。

//Initializeaclass

classExampleClass{

constructor(){}

}

為了確保代碼可讀，最好在程序文件中使用明顯不同的標(biāo)識符。