概述

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

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

功能性和可讀性

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

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

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

// Example of a broken JavaScript program
console.log("Hello, World!"

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

Uncaught SyntaxError: missing ) after argument list

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

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

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

const greeting="Hello";         // no whitespace between variable & string
const greeting =       "Hello"; // excessive whitespace after assignment
const greeting = "Hello";       // single whitespace between variable & string

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

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

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

空白

JavaScript中的空格由空格，制表符和換行符組成（按下ENTER鍵盤）。如前所述，JavaScript會(huì)忽略字符串外的過多空格以及運(yùn)算符和其他符號之間的空格。這意味著以下三個(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”，無論這些樣式中的哪一種都寫在腳本中，它們也不會(huì)對JavaScript產(chǎn)生影響，無論空格是用標(biāo)簽還是空格寫的。

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

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

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

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

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

括弧

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

// An example of if statement syntax
if () { }
// Check math equation and print a string to the console
if (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 console
for (let i = 0; i <= 10; i++) {
    console.log(i);
    }

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

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

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

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

分號

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

// A single JavaScript statement
const now = new Date();

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

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

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

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

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

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

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

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

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

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

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

// An example object
const objectName = {};
// Initialize triangle object
const triangle = {
    type: "right",
    angle: 90,
    sides: 3,
};

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

縮進(jìn)

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

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

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

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

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

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

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

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

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

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

身份標(biāo)識(shí)

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

區(qū)分大小寫

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

var myVariable = 1;
var myvariable = 2;

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

const INSURANCE_RATE = 0.4;

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

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

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

保留關(guān)鍵字

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

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

var var = "Some value";

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

SyntaxError: Unexpected token (1:4)

以上就是深入理解JavaScript中的語法和代碼結(jié)構(gòu)的詳細(xì)內(nèi)容，更多關(guān)于JavaScript中的語法和結(jié)構(gòu)的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論