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

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

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

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

考慮“Hello，World！”中的語(yǔ)法錯(cuò)誤。程序：

// Example of a broken JavaScript programconsole.log('Hello, World!'

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

Uncaught SyntaxError: missing ) after argument list

必須在腳本繼續(xù)運(yùn)行之前添加缺少的'）'。 這是JavaScript語(yǔ)法錯(cuò)誤如何破壞腳本的示例，因?yàn)楸仨氉裱_的語(yǔ)法才能運(yùn)行代碼。

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

考慮下面三個(gè)變量賦值的例子。

const greeting='Hello'; // no whitespace between variable & stringconst greeting = 'Hello'; // excessive whitespace after assignmentconst greeting = 'Hello'; // single whitespace between variable & string

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

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

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

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

const userLocation = 'New York City, ' + 'NY';const userLocation='New York City, '+'NY';const userLocation = 'New York City, ' + 'NY';

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

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

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

const companyName = 'DigitalOcean';const companyHeadquarters = 'New York City';const companyHandle = 'digitalocean';

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

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

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

// An example of if statement syntaxif () { }// Check math equation and print a string to the consoleif (4 < 5) { console.log('4 is less than 5.'); }// An example of for loop syntaxfor () { }// Iterate 10 times, printing out each iteration number to the consolefor (let i = 0; i <= 10; i++) { console.log(i); }

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

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

// An example functionfunction functionName() {}// Initialize a function to calculate the volume of a cubefunction cube(number) { return Math.pow(number, 3);}// Invoke the functioncube(5);

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

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

// A single JavaScript statementconst now = new Date();

如果兩個(gè)或多個(gè)語(yǔ)句相鄰，則必須用分號(hào)分隔它們。

// Get the current timestamp and print it to the consoleconst now = new Date(); console.log(now);

如果語(yǔ)句由換行符分隔，則分號(hào)是可選的。

// Two statements separated by newlinesconst now = new Date()console.log(now)

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

// Two statements separated by newlines and semicolonsconst now = new Date();console.log(now);

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

for (initialization; condition; increment) { // run the loop}

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

// Initialize a function to calculate the area of a squarefunction square(number) { return Math.pow(number, 2);}// Calculate the area of a number greater than 0if (number > 0) { square(number);}

注意，并非所有用大括號(hào)括起來(lái)的代碼都以分號(hào)結(jié)尾。對(duì)象用大括號(hào)括起來(lái)，并以分號(hào)結(jié)尾。

// An example objectconst objectName = {};// Initialize triangle objectconst triangle = { type: 'right', angle: 90, sides: 3,};

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

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

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

// Conditional statement written on one lineif (x === 1) { /* execute code if true */ } else { /* execute code if false */ }// Conditional statement with indentationif (x === 1) { // execute code if true }else {// execute code if false}

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

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

// Conditional statement with braces on newlinesif (x === 1){ // execute code if true }else{ // execute code if false }

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

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

// Initialize a functionfunction isEqualToOne(x) { // Check if x is equal to one if (x === 1) {// on success, return truereturn true; } else { return false; }}

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

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

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

var myVariable = 1;var myvariable = 2;

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

const INSURANCE_RATE = 0.4;

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

// Initialize a classclass ExampleClass { constructor() { }}

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

標(biāo)識(shí)符也不能由任何保留關(guān)鍵字組成。關(guān)鍵字是JavaScript語(yǔ)言中具有內(nèi)置功能的單詞，如var、if、for和this。

例如，您不能將值賦給名為var的變量。

var var = 'Some value';

由于JavaScript理解var為關(guān)鍵字，因此會(huì)導(dǎo)致語(yǔ)法錯(cuò)誤：

SyntaxError: Unexpected token (1:4)

以上就是深入理解JavaScript中的語(yǔ)法和代碼結(jié)構(gòu)的詳細(xì)內(nèi)容，更多關(guān)于JavaScript中的語(yǔ)法和結(jié)構(gòu)的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！