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

0
74

介绍

在学习写口语之前,您必须首先学习语法规则。 以下是您可能会用英语找到的几个规则示例:

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

同样,所有的编程语言都必须遵守特定的规则才能运行。 确定编程语言的正确结构的这组规则被称为语法 许多程序设计语言主要包含与语法变化相似的概念。

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

功能和可读性

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

有一些语法规则是JavaScript功能强制的。 如果不遵循,则控制台会发出错误,脚本将停止执行。

在“Hello,World!”中考虑一个语法错误 程序:

broken.js
// 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"方式是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将代表“纽约市,纽约市”,无论这些样式中的哪一种都是在脚本中编写的,也不会对JavaScript产生影响,无论空格是用制表符还是空格写入。

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

例如, let x = 5 * ylet x=5*y更可读。

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

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

所有的赋值运算符( = )都是排列在空格之后的变量。 这种类型的组织结构不被每个代码库使用,但可用于提高可读性。

JavaScript也忽略了多余的换行符。 通常,一个额外的换行符将被插入到一个注释之上和一个代码块之后。

括号

对于诸如ifswitchfor关键字,通常在括号之前和之后添加空格。 观察以下比较和循环的例子。

// 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()是一个函数,一对括号()将包含参数或参数。 在这种情况下,参数分别为number5 虽然具有额外空间的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
}

任何类型的块语句都不包括分号,例如iffordowhileclassswitchfunction 这些块语句包含在大括号{} 请注意以下示例。

// 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
}

请注意,块中包含的任何代码都是缩进的。 缩进可以用两个空格,四个空格或按Tab键来完成。 是否使用选项卡或空格取决于您的个人偏好(单独项目)或组织的指导(协作项目)。

在上面的例子中,包括第一行末尾的开放大括号是结构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.jsd3.min.js )。

身份标识

变量,函数或属性的名称称为JavaScript中的标识符 标识符由字母和数字组成,但不能包含$_之外的任何符号,不能以数字开头。

区分大小写

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

var myVariable = 1;
var myvariable = 2;

JavaScript名称的约定是它们写在camelCase中,这意味着第一个单词是小写的,但每个后续单词都以大写字母开头。 您还可以看到全局变量或常量,全部大写,以下划线分隔。

const INSURANCE_RATE = 0.4;

这个规则的例外是类名,它们通常以每个以大写字母(PascalCase)开头的单词来写。

// Initialize a class
class ExampleClass {
    constructor() { }
}

为了确保代码可读,最好在程序文件中使用清晰的标识符。

保留关键字

标识符也不能包含任何保留关键字。 关键字是JavaScript语言中具有内置功能的词,例如varifforthis

例如,您不能为一个名为var的变量赋值。

var var = "Some value";

由于JavaScript了解var为关键字,这将导致语法错误:

产量
SyntaxError: Unexpected token (1:4)

有关完整的参考,请查看保留关键字列表(MDN)

结论

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

我们在本文中回顾了JavaScript语法和风格的许多常见约定,但最后一件最重要的事情是要灵活地与您的团队或组织保持一致。

发表评论