Erhalten Sie ein tieferes Verständnis der Syntax und Codestruktur in JavaScript

Alle Programmiersprachen müssen sich an bestimmte Regeln halten, um zu funktionieren. Das Regelwerk, das die korrekte Struktur einer Programmiersprache bestimmt, wird als Grammatik bezeichnet. Viele Programmiersprachen bestehen hauptsächlich aus ähnlichen Konzepten mit syntaktischen Variationen.

In diesem Tutorial werden wir die vielen Regeln und Konventionen der JavaScript-Syntax und Codestruktur behandeln. [Verwandte Kursempfehlungen: JavaScript-Video-Tutorial]

Funktionalität und Lesbarkeit

Wenn Sie mit der Verwendung von JavaScript beginnen, werden Funktionalität und Lesbarkeit sind zwei wichtige Gründe, der Grammatik Aufmerksamkeit zu schenken.

Es gibt einige Syntaxregeln, die erforderlich sind, damit JavaScript funktioniert. Wenn Sie diese nicht befolgen, gibt die Konsole einen Fehler aus und das Skript wird nicht mehr ausgeführt.

Bedenken Sie die grammatikalischen Fehler in „Hello, World!“ Programm:

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

In diesem Codebeispiel fehlt die schließende Klammer und das erwartete „Hello, World!“ wird nicht auf der Konsole ausgegeben, was zu folgendem Fehler führt:

Uncaught SyntaxError: missing ) after argument list

muss vorher hinzugefügt werden Das Skript kann weiterhin ausgeführt werden. „)“ fehlt. Dies ist ein Beispiel dafür, wie JavaScript-Syntaxfehler ein Skript beschädigen können, da die korrekte Syntax befolgt werden muss, damit der Code ausgeführt werden kann.

Bestimmte Aspekte der JavaScript-Syntax und -Formatierung basieren auf unterschiedlichen Denkschulen. Das heißt, einige Stilregeln oder -optionen sind nicht obligatorisch und verursachen beim Ausführen des Codes keine Fehler. Es gibt jedoch viele gängige Konventionen, die es wert sind, befolgt zu werden, da Entwickler projekt- und codebasenübergreifend mit diesem Stil vertrauter werden. Das Befolgen allgemeiner Konventionen verbessert die Lesbarkeit.

Betrachten Sie die folgenden drei Beispiele für die Variablenzuweisung.

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

Obwohl die drei obigen Beispiele in der Ausgabe genau gleich funktionieren, ist die dritte Option Greeting = „Hello“ bei weitem die gebräuchlichste und lesbarste Art, Code zu schreiben, insbesondere im Großen und Ganzen, wenn man sie im Kontext betrachtet des Programms.

Es ist wichtig, während Ihres gesamten Codierungsprojekts einen einheitlichen Stil beizubehalten. Von Organisation zu Organisation gibt es unterschiedliche Richtlinien, daher müssen Sie auch flexibel sein.

Im Folgenden stellen wir einige Codebeispiele vor, damit Sie sich mit der Syntax und Struktur von JavaScript-Code vertraut machen und bei Fragen auf diesen Artikel zurückgreifen können.

Leerzeichen

Leerzeichen in JavaScript bestehen aus Leerzeichen, Tabulatorzeichen und Zeilenumbrüchen (drücken Sie die EINGABETASTE). Wie bereits erwähnt, ignoriert JavaScript übermäßige Leerzeichen außerhalb von Zeichenfolgen und Leerzeichen zwischen Operatoren und anderen Symbolen. Das bedeutet, dass die folgenden drei Variablenzuweisungsbeispiele genau die gleiche berechnete Ausgabe haben:

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

userLocation stellt „New York City, NY“ dar, unabhängig davon, welcher dieser Stile im Skript geschrieben ist, sie werden auch dort angezeigt Es hat keinen Einfluss auf JavaScript, unabhängig davon, ob die Leerzeichen mit Tabulatoren oder Leerzeichen geschrieben werden.

Eine gute Faustregel für die Befolgung der gängigsten Leerzeichenkonventionen besteht darin, die gleichen Regeln wie für Mathematik und Sprachsyntax zu befolgen.

Eine bemerkenswerte Ausnahme von diesem Stil ist die Zuweisung mehrerer Variablen. Beachten Sie die Position von = im folgenden Beispiel:

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

Alle Zuweisungsoperatoren (=) stehen in einer Zeile, mit Leerzeichen nach den Variablen. Diese Art von Organisationsstruktur wird nicht von jeder Codebasis verwendet, kann aber zur Verbesserung der Lesbarkeit verwendet werden.

JavaScript ignoriert zusätzliche Zeilenumbrüche. Normalerweise werden zusätzliche Zeilenumbrüche über Kommentaren und nach Codeblöcken eingefügt.

Klammern

Bei Schlüsselwörtern wie if, switch und for werden normalerweise Leerzeichen vor und nach den Klammern eingefügt. Beachten Sie die Vergleichs- und Schleifenbeispiele unten.

// 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-Anweisungen und for-Schleifen haben Leerzeichen auf jeder Seite der Klammern (jedoch nicht innerhalb der Klammern).

Wenn der Code zu einer Funktion, Methode oder Klasse gehört, berühren die Klammern den entsprechenden Namen.

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

Im obigen Beispiel ist Cube() eine Funktion und das Bracket()-Paar enthält die Argumente oder Parameter. In diesem Fall sind die Parameter Zahlen bzw. 5. Obwohl „cube()“ mit zusätzlichem Speicherplatz gültig ist, da der Code wie erwartet ausgeführt wird, ist es nahezu unsichtbar. Wenn Sie sie zusammenfügen, können Sie den Funktionsnamen einfacher mit dem Klammerpaar und allen zugehörigen übergebenen Parametern verknüpfen.

Semikolon

JavaScript-Programme bestehen aus einer Reihe von Anweisungen, die als Anweisungen bezeichnet werden, genau wie ein geschriebener Absatz aus einer Reihe von Anweisungen besteht Sätze. Während Sätze mit einem Punkt enden, enden JavaScript-Anweisungen normalerweise mit einem Semikolon (;).

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

Wenn zwei oder mehr Anweisungen nebeneinander liegen, müssen sie durch ein Semikolon getrennt werden.

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

Ein Semikolon ist optional, wenn Anweisungen durch Zeilenumbrüche getrennt werden.

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

Eine sichere und gängige Konvention besteht darin, Anweisungen unabhängig von Zeilenumbrüchen durch Semikolons zu trennen. Im Allgemeinen gilt es als gute Praxis, sie einzubeziehen, um die Fehlerwahrscheinlichkeit zu verringern.

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

Zwischen der Initialisierung, der Bedingung und dem Inkrementieren oder Dekrementieren einer for-Schleife ist außerdem ein Semikolon erforderlich.

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教程 栏目，欢迎学习！

Das obige ist der detaillierte Inhalt vonErhalten Sie ein tieferes Verständnis der Syntax und Codestruktur in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!