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

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

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

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

1. 条件语句

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

1.1 `if...else` 语句

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

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

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

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

1.2 `switch` 语句

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

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循环是最常用的循环结构之一，它包含初始化表达式、条件表达式和更新表达式。

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

2.2 `while` 循环

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

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

2.3 `do...while` 循环

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

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

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

for...of循环用于遍历可迭代对象（如数组、字符串、Map、Set等）的值。

let fruits = ['Apple', 'Banana', 'Cherry'];
for (let fruit of fruits) {
    console.log(fruit);
}

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

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语句。

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

3.2 `continue` 语句

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

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

3.3 `return` 语句

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

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

4. 声明语句

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

4.1 变量声明

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

var（函数作用域）

var x = 10;

let（块级作用域）

let y = 20;

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

const PI = 3.14;

4.2 函数声明

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

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

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

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

5. 复合语句（块语句）

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

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结构来实现。

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

结语

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