JavaScript语法（二）：你知道哪些JavaScript语句？-深入学习前端重构知识体系

当前位置:　首页>> 技术小册>> 深入学习前端重构知识体系

### JavaScript语法（二）：你知道哪些JavaScript语句？

在深入探讨JavaScript的广阔世界时，掌握其核心语法结构——特别是各类语句（Statements）——是构建高效、可维护代码的关键。本章节将继续我们的JavaScript语法之旅，聚焦于JavaScript中不可或缺的语句类型，这些语句是编写程序逻辑、控制流程、以及执行各种操作的基础。我们将逐一解析这些语句，并通过示例加深理解。

#### 1. 条件语句

条件语句允许程序根据条件表达式的真假值来执行不同的代码块。JavaScript中主要有`if...else`、`switch`等条件语句。

##### 1.1 `if...else` 语句

`if...else`语句是最基本的条件语句，用于基于条件执行不同的代码块。

```javascript
let score = 75;
if (score >= 60) {
    console.log("及格");
} else {
    console.log("不及格");
}
```

此外，`if`语句还可以嵌套使用，以及配合`else if`来检查多个条件。

```javascript
let age = 20;
if (age < 13) {
    console.log("儿童");
} else if (age < 20) {
    console.log("青少年");
} else {
    console.log("成年人");
}
```

##### 1.2 `switch` 语句

`switch`语句用于基于不同的情况执行不同的代码块，通常比多个`if...else if`语句更简洁易读。

```javascript
let day = new Date().getDay();
switch (day) {
    case 0:
        console.log("星期日");
        break;
    case 1:
        console.log("星期一");
        break;
    // ... 其他情况
    default:
        console.log("未知");
}
```

注意，每个`case`块后需要`break`语句来防止代码自动落入下一个`case`块。

#### 2. 循环语句

循环语句允许代码块重复执行，直到满足特定条件为止。JavaScript提供了多种循环结构，包括`for`、`while`、`do...while`以及ES6引入的`for...of`和`for...in`。

##### 2.1 `for` 循环

`for`循环是最常用的循环结构之一，它包含初始化表达式、条件表达式和更新表达式。

```javascript
for (let i = 0; i < 5; i++) {
    console.log(i);
}
```

##### 2.2 `while` 循环

`while`循环在给定条件为真时重复执行代码块。

```javascript
let count = 0;
while (count < 5) {
    console.log(count);
    count++;
}
```

##### 2.3 `do...while` 循环

与`while`循环类似，但`do...while`循环至少会执行一次代码块，即使条件在第一次检查时为假。

```javascript
let count = 0;
do {
    console.log(count);
    count++;
} while (count < 5);
```

##### 2.4 `for...of` 和 `for...in`

- `for...of`循环用于遍历可迭代对象（如数组、字符串、Map、Set等）的值。
  
```javascript
let fruits = ['Apple', 'Banana', 'Cherry'];
for (let fruit of fruits) {
    console.log(fruit);
}
```

- `for...in`循环用于遍历对象的属性名（包括继承的可枚举属性）。

```javascript
let person = {fname:"John", lname:"Doe", age:25}; 
for (let x in person) {
    console.log(x);
}
```

#### 3. 跳转语句

跳转语句用于改变代码的正常执行流程，包括`break`、`continue`、`return`等。

##### 3.1 `break` 语句

`break`语句用于立即退出循环或`switch`语句。

```javascript
for (let i = 0; i < 10; i++) {
    if (i === 5) {
        break; // 退出循环
    }
    console.log(i);
}
```

##### 3.2 `continue` 语句

`continue`语句用于跳过当前循环的剩余部分，并继续执行下一次循环迭代。

```javascript
for (let i = 0; i < 10; i++) {
    if (i % 2 === 0) {
        continue; // 跳过偶数
    }
    console.log(i);
}
```

##### 3.3 `return` 语句

`return`语句用于从函数返回一个值，并立即退出函数。

```javascript
function sum(a, b) {
    return a + b;
}
console.log(sum(5, 3)); // 输出: 8
```

#### 4. 声明语句

声明语句用于在JavaScript中创建变量、函数等。

##### 4.1 变量声明

JavaScript支持多种变量声明方式，包括`var`、`let`、`const`。

- `var`（函数作用域）
  
```javascript
var x = 10;
```

- `let`（块级作用域）

```javascript
let y = 20;
```

- `const`（块级作用域，不可重新赋值）

```javascript
const PI = 3.14;
```

##### 4.2 函数声明

函数声明定义了一个函数，可以指定参数和函数体。

```javascript
function greet(name) {
    console.log("Hello, " + name);
}
greet("Alice");
```

ES6还引入了箭头函数，提供了一种更简洁的函数书写方式。

```javascript
const greet = (name) => {
    console.log("Hello, " + name);
};
greet("Bob");

// 简写形式（当函数体只有一个表达式时）
const greetShort = name => `Hello, ${name}`;
console.log(greetShort("Charlie"));
```

#### 5. 复合语句（块语句）

复合语句（或称为块语句）是由大括号`{}`包围的一组语句。它们通常与条件语句、循环语句、函数体等一起使用，以组织代码结构。

```javascript
if (true) {
    let x = 10;
    console.log(x);
}

for (let i = 0; i < 2; i++) {
    {
        let temp = i * 2;
        console.log(temp);
    }
}
```

#### 6. 异常处理语句

异常处理语句允许程序优雅地处理运行时错误，防止程序因未捕获的异常而完全崩溃。JavaScript使用`try...catch...finally`结构来实现。

```javascript
try {
    // 尝试执行的代码
    throw new Error("出错了！");
} catch (error) {
    // 处理错误的代码
    console.error("捕获到错误:", error.message);
} finally {
    // 无论是否发生错误都会执行的代码
    console.log("执行完毕");
}
```

### 结语

JavaScript的语句是构建程序逻辑和流程控制的基础。通过掌握条件语句、循环语句、跳转语句、声明语句、复合语句以及异常处理语句，你可以编写出更加高效、灵活和健壮的JavaScript代码。希望本章内容能够帮助你深入理解JavaScript的语法结构，为你在前端开发领域的进一步探索打下坚实的基础。

该分类下的相关小册推荐：

编程入门课：Javascript从入门到实战

javascript设计模式原理与实战

ES6入门指南

Javascript重点难点实例精讲（一）

JavaScript面试指南

web前端开发性能优化实战

经典设计模式Javascript版

Javascript-ES6与异步编程

Flutter核心技术与实战

零基础学JavaScript

剑指javascript-ES6

剑指javascript