了解JavaScript中的语法和代码结构

来自菜鸟教程
跳转至：导航、​搜索

介绍

在学习口语写作之前，你必须先学习语法规则。 以下是您可能会在英语中找到的一些规则示例：

  • 一个句子以大写字母开头。
  • 一个句子以句号结尾。
  • 新段落缩进。
  • 口语对话放在双引号内。

同样，所有编程语言都必须遵守特定规则才能发挥作用。 这组确定编程语言正确结构的规则称为 语法 。 许多编程语言主要由具有不同语法变化的相似概念组成。

在本教程中，我们将讨论 JavaScript 语法和代码结构的许多规则和约定。

功能性和可读性

当您开始使用 JavaScript 时，功能性和可读性是关注语法的两个重要原因。

JavaScript 功能有一些语法规则是强制性的。 如果不遵循它们，控制台将抛出错误并且脚本将停止执行。

考虑“Hello, World!”中的语法错误。 程序：

破碎的.js 

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

此代码示例缺少右括号，而不是打印预期的“Hello, World！” 到控制台，会出现以下错误： 

OutputUncaught 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 来说，空格是用制表符还是空格写的都不会有所不同。

能够遵循最常见的空白约定的一个好的经验法则是遵循与数学和语言语法相同的规则。

例如，let x = 5 * y 比 let x=5*y 更具可读性。

您可能会看到这种风格的一个显着例外是在分配多个变量期间。 请注意以下示例中 = 的位置： 

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 syntax
for () { }

// 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 function
function 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() 是一个函数，一对括号 () 将包含参数或自变量。 在这种情况下，参数分别为 number 或 5。 尽管带有额外空格的 cube () 是有效的，因为代码将按预期执行，但几乎从未见过。 将它们放在一起有助于轻松地将函数名称与括号对和任何关联的传递参数相关联。

分号

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
}

分号是 not 包含在任何类型的块语句之后，例如 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 中不像在其他语言中那样常见，但并非闻所未闻。

任何嵌套的块语句都将进一步缩进。 

// Initialize a function
function 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 中称为 标识符 。 标识符由字母和数字组成，但不能包含 $ 和 _ 之外的任何符号，并且不能以数字开头。

区分大小写

这些名称区分大小写。 以下两个示例 myVariable 和 myvariable 将引用两个不同的变量。 

var myVariable = 1;
var myvariable = 2;

JavaScript 名称的约定是它们以驼峰形式书写，这意味着第一个单词是小写的，但后面的每个单词都以大写字母开头。 您可能还会看到全部大写的全局变量或常量，用下划线分隔。 

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)

如需完整参考，请查看此 保留关键字列表 (MDN)

结论

本文概述了 JavaScript 的基本语法和代码结构。 语法对于程序的正确执行和代码的可读性和可维护性都很重要。

我们在本文中回顾了 JavaScript 语法和样式的许多常见约定，但归根结底，要记住的最重要的事情是要灵活并与您的团队或组织保持一致。

取自“https://cainiaojiaocheng.com/index.php?title=了解JavaScript中的语法和代码结构&oldid=29246”
Powered by MediaWiki