深入了解JavaScript中的語法和程式碼結構

所有程式語言都必須遵守特定的規則才能運作。確定程式語言的正確結構的這組規則稱為語法。許多程式語言主要由具有語法變化的類似概念組成。

在本教學中，我們將介紹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)

本文来自 js教程 栏目，欢迎学习！

以上是深入了解JavaScript中的語法和程式碼結構的詳細內容。更多資訊請關注PHP中文網其他相關文章！