JavaScript の構文とコード構造をより深く理解する

すべてのプログラミング言語を実行するには、特定のルールに従う必要があります。プログラミング言語の正しい構造を決定する一連の規則は、その文法と呼ばれます。多くのプログラミング言語は、主に構文上のバリエーションを持つ同様の概念で構成されています。

#このチュートリアルでは、JavaScript の構文とコード構造に関する多くのルールと規則について説明します。 [関連コースの推奨事項: JavaScript ビデオ チュートリアル ]

機能性と読みやすさ

JavaScript の使用を開始する場合、機能性と読みやすさ読みやすさは、文法に注意を払う 2 つの重要な理由です。

JavaScript が機能するには、いくつかの構文ルールが必要です。これらに従わない場合、コンソールはエラーをスローし、スクリプトの実行が停止します。

「Hello, World!」の文法上の誤りを考えてみましょう。プログラム:

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

このコード例には閉じ括弧が欠落しており、予想される「Hello, World!」がコンソールに出力されず、次のエラーが発生します:

Uncaught SyntaxError: missing ) after argument list

を追加する必要があります。スクリプトの実行を続行する前に、「)」が不足しています。これは、コードを実行するには正しい構文に従う必要があるため、JavaScript 構文エラーによってスクリプトがどのように壊れる可能性があるかを示す例です。

JavaScript の構文と書式設定の一部の側面は、さまざまな考え方に基づいています。つまり、一部のスタイル ルールまたは選択は必須ではなく、コードの実行時にエラーが発生することはありません。ただし、プロジェクトやコードベースの開発者がこのスタイルに慣れるにつれて、従う価値のある共通の規則が多数あります。一般的な規則に従うと、可読性が向上します。

次の 3 つの変数割り当ての例を考えてみましょう。

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

上記の 3 つの例は出力ではまったく同じように機能しますが、3 番目のオプションgreeting = "Hello"; は、特にコンテキスト内で考慮した場合、コードを記述する最も一般的で読みやすい方法です。プログラムの。

コーディング プロジェクト全体で一貫したスタイルを維持することが重要です。組織ごとにガイドラインが異なるため、柔軟である必要もあります。

JavaScript コードの構文と構造を理解し、質問があるときにこの記事を参照できるように、以下にいくつかのコード例を紹介します。

空白

JavaScript の空白は、スペース、タブ、改行文字 (キーボードの Enter キーを押します) で構成されます。前述したように、JavaScript は文字列の外側の過剰な空白や、演算子と他の記号の間の空白を無視します。これは、次の 3 つの変数割り当ての例では、まったく同じ計算出力が得られることを意味します:

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

userLocation は、スクリプトにどのスタイルが記述されているかに関係なく、「ニューヨーク市、ニューヨーク州」を表します。スペースがタブで書かれているかスペースで書かれているかにかかわらず、JavaScript には影響しません。

最も一般的な空白の規則に従うための良い経験則は、数学および言語の構文と同じ規則に従うことです。

このスタイルの注目すべき例外の 1 つは、複数の変数の代入時です。次の例の = の位置に注意してください。

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

すべての代入演算子 (=) は 1 行にあり、変数の後にスペースが入ります。このタイプの組織構造はすべてのコードベースで使用されるわけではありませんが、可読性を向上させるために使用できます。

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() は関数であり、bracket() のペアには引数が含まれます。この場合、パラメータはそれぞれ数値または 5 です。余分なスペースを含む cube() は、コードが期待どおりに実行されるという点では有効ですが、ほとんど目に見えません。これらをまとめると、関数名を括弧のペアおよび関連する渡された引数と簡単に関連付けることができます。

セミコロン

JavaScript プログラムは、書かれた段落が一連の命令で構成されるのと同じように、ステートメントと呼ばれる一連の命令で構成されます。文章の。文はピリオドで終わりますが、JavaScript ステートメントは通常セミコロン (;) で終わります。

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

2 つ以上のステートメントが隣接する場合は、セミコロンで区切る必要があります。

// 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 中国語 Web サイトの他の関連記事を参照してください。