JavaScript的語法格式和代碼結構介紹

這篇文章將為大家詳細講解有關JavaScript的語法格式和代碼結構介紹，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

功能性和可讀性

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

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

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

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

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

Uncaught SyntaxError: missing ) after argument list

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

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

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

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

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

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

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

空白

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

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

userLocation將代表“New York City，NY”，無論這些樣式中的哪一種都寫在腳本中，它們也不會對JavaScript產生影響，無論空格是用標簽還是空格寫的。

一個很好的經驗法則，能夠遵循最常見的空白約定，就是遵循與數學和語言語法相同的規則。

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

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

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

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

括弧

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

// 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循環在括號的每一側都有空格（但不在括號內）。

當代碼屬于函數，方法或類時，括號將觸及相應的名稱。

// 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（）是一個函數，括號（）對將包含參數或參數。在這種情況下，參數分別為數字或5。盡管帶有額外空間的多維數據集（）是有效的，因為代碼將按預期執行，但幾乎看不到它。將它們放在一起有助于輕松地將函數名與括號對以及任何關聯的傳遞參數關聯起來。

分號

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

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

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

// 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)

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

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

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

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);
    }

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

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

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

縮進

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

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

// 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
        }

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

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

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

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

任何嵌套的block語句都將進一步縮進。

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

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

身份標識

變量、函數或屬性的名稱在JavaScript中稱為標識符。標識符由字母和數字組成，但不能包含$和u之外的任何符號，也不能以數字開頭。

區分大小寫

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

var myVariable = 1;
var myvariable = 2;

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

const INSURANCE_RATE = 0.4;

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

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

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

保留關鍵字

標識符也不能由任何保留關鍵字組成。關鍵字是JavaScript語言中具有內置功能的單詞，如var、if、for和this。

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

var var = "Some value";

由于JavaScript理解var為關鍵字，因此會導致語法錯誤：

SyntaxError: Unexpected token (1:4)

關于JavaScript的語法格式和代碼結構介紹就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。