JavaScript中有哪些語(yǔ)法和代碼結(jié)構(gòu)

JavaScript中有哪些語(yǔ)法和代碼結(jié)構(gòu)？相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

JavaScript的作用是什么

1、能夠嵌入動(dòng)態(tài)文本于HTML頁(yè)面。2、對(duì)瀏覽器事件做出響應(yīng)。3、讀寫HTML元素。4、在數(shù)據(jù)被提交到服務(wù)器之前驗(yàn)證數(shù)據(jù)。5、檢測(cè)訪客的瀏覽器信息。6、控制cookies，包括創(chuàng)建和修改等。7、基于Node.js技術(shù)進(jìn)行服務(wù)器端編程。

概述

所有編程語(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 program
console.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 & 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代碼的語(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 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語(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 cube
function cube(number) {
    return Math.pow(number, 3);
}
// Invoke the function
cube(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)。

分號(hào)

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

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

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

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

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

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

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

// Two statements separated by newlines and semicolons
const 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 square
function square(number) {
    return Math.pow(number, 2);
}
// Calculate the area of a number greater than 0
if (number > 0) {
    square(number);
}

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

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

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

縮進(jìn)

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

下面是一個(gè)條件if/else語(yǔ)句的例子，它要么寫在一行上，要么用換行符和縮進(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
        }

請(qǐng)注意，塊中包含的任何代碼都是縮進(jìn)的?？s進(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 newlines
if (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 true
        return true;
    } else {      return false;
    }
}

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

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

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

區(qū)分大小寫

這些名稱區(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 class
class ExampleClass {
    constructor() { }
}

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

保留關(guān)鍵字

標(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)

看完上述內(nèi)容，你們掌握J(rèn)avaScript中有哪些語(yǔ)法和代碼結(jié)構(gòu)的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！