JavaScript 从基础到进阶 02：控制流程与函数

控制流程与函数

- 条件语句
- - [1. if语句](#1. if语句)
  - [2. else if语句](#2. else if语句)
  - [3. switch语句](#3. switch语句)
- 循环语句
- - [1. for循环](#1. for循环)
  - [2. while循环](#2. while循环)
  - [3. do...while循环](#3. do...while循环)
- 控制流程的关键概念
- - [1. break语句](#1. break语句)
  - [2. continue语句](#2. continue语句)
  - [3. 标签（label）](#3. 标签（label）)
- 总结
- 函数的定义
- - [1. 函数声明](#1. 函数声明)
  - [2. 函数表达式](#2. 函数表达式)
- 函数的调用
- 函数的参数
- - 形参和实参
  - 默认参数
- 函数的返回值
- 函数的作用域
- 常见用例
- 总结

当学习JavaScript时，了解控制流程是非常重要的，因为它们允许您控制程序的执行顺序和逻辑。在本博客文章中，我们将深入研究JavaScript中的控制流程，包括条件语句（if、else、switch）、循环语句（for、while、do...while）和其他控制流程的关键概念。

条件语句

条件语句用于根据条件的真假来决定不同的代码路径。以下是一些常见的条件语句：

1. if语句

if 语句用于在满足条件时执行一段代码块。

javascript 复制代码

let age = 18;
if (age >= 18) {
  console.log("成年人");
} else {
  console.log("未成年人");
}

2. else if语句

else if 语句用于在多个条件之间进行选择。

javascript 复制代码

let num = 5;
if (num > 0) {
  console.log("正数");
} else if (num < 0) {
  console.log("负数");
} else {
  console.log("零");
}

3. switch语句

switch 语句用于根据不同的条件值执行不同的代码块。

javascript 复制代码

let day = "Monday";
switch (day) {
  case "Monday":
    console.log("星期一");
    break;
  case "Tuesday":
    console.log("星期二");
    break;
  default:
    console.log("其他天");
}

循环语句

循环语句允许您多次执行相同的代码块，直到满足特定条件。

1. for循环

for 循环用于按照指定的条件重复执行代码块。

javascript 复制代码

for (let i = 0; i < 5; i++) {
  console.log("循环次数：" + i);
}

2. while循环

while 循环在满足条件时执行代码块。

javascript 复制代码

let count = 0;
while (count < 3) {
  console.log("计数：" + count);
  count++;
}

3. do...while循环

do...while 循环首先执行代码块，然后检查条件是否满足，如果满足，则继续执行。

javascript 复制代码

let num = 1;
do {
  console.log("数字：" + num);
  num++;
} while (num <= 3);

控制流程的关键概念

控制流程的学习还涉及一些关键概念，如循环中断（break） 、循环继续（continue）、**标签（label）**等。

1. break语句

break 语句用于在循环中提前退出循环，或者在 switch 语句中终止执行。

javascript 复制代码

for (let i = 0; i < 5; i++) {
  if (i === 3) {
    break; // 提前退出循环
  }
  console.log("循环次数：" + i);
}

2. continue语句

continue 语句用于跳过当前循环迭代，继续执行下一次迭代。

javascript 复制代码

for (let i = 0; i < 5; i++) {
  if (i === 3) {
    continue; // 跳过第3次迭代
  }
  console.log("循环次数：" + i);
}

3. 标签（label）

标签允许您在嵌套循环中标识特定循环，并使用 break 和 continue 来控制外部和内部循环。

javascript 复制代码

outerLoop: for (let i = 0; i < 3; i++) {
  innerLoop: for (let j = 0; j < 3; j++) {
    if (i === 1 && j === 1) {
      break outerLoop; // 退出外部循环
    }
    console.log(i, j);
  }
}

总结

本博客文章涵盖了JavaScript中的控制流程，包括条件语句（if、else、switch）、循环语句（for、while、do...while）以及与控制流程相关的关键概念（break、continue、标签）。掌握这些知识将使您能够编写更具逻辑和灵活性的JavaScript代码，以满足各种不同的编程需求。通过实际练习和项目，您可以深入了解这些概念，并将其应用到实际开发中。

当学习JavaScript时，理解函数是非常重要的，因为函数是JavaScript编程的核心。函数允许您封装可重用的代码块，并以一种有组织的方式组织您的程序。在本博客文章中，我们将深入探讨JavaScript中的函数，包括函数的定义、参数、返回值、作用域和常见用例。

函数的定义

JavaScript中的函数可以通过多种方式定义，以下是其中两种常见的方式：

1. 函数声明

函数声明是定义函数的标准方式，它使用 function 关键字，后跟函数名、参数列表和函数体。

javascript 复制代码

function greet(name) {
  return "Hello, " + name + "!";
}

2. 函数表达式

函数表达式是将函数赋值给变量的方式，它通常用于创建匿名函数或将函数作为参数传递给其他函数。

javascript 复制代码

const greet = function(name) {
  return "Hello, " + name + "!";
};

函数的调用

要使用函数，您需要调用它，这意味着执行函数体中的代码。函数调用使用函数名后跟一对圆括号，圆括号内包含传递给函数的参数。

javascript 复制代码

const message = greet("Alice");
console.log(message); // 输出 "Hello, Alice!"

函数的参数

函数可以接受参数，这些参数是函数在调用时接收的值。参数允许您将数据传递给函数以进行处理。

形参和实参

形参（形式参数）：函数定义中声明的参数，用于接收传递给函数的值。
实参（实际参数）：函数调用时传递给函数的值，用于赋给函数中的形参。

javascript 复制代码

function add(a, b) { // a和b是形参
  return a + b;
}

const result = add(2, 3); // 2和3是实参
console.log(result); // 输出 5

默认参数

您可以为函数的参数设置默认值，如果调用时未传递参数，则使用默认值。

javascript 复制代码

function greet(name = "Guest") {
  return "Hello, " + name + "!";
}

console.log(greet()); // 输出 "Hello, Guest!"
console.log(greet("Alice")); // 输出 "Hello, Alice!"

函数的返回值

函数可以返回一个值，该值可以用于进一步的计算或操作。

javascript 复制代码

function multiply(a, b) {
  return a * b;
}

const result = multiply(4, 5);
console.log(result); // 输出 20

如果函数没有明确的返回语句，则它将返回 undefined。

javascript 复制代码

function noReturn() {
  // 没有返回语句
}

const value = noReturn();
console.log(value); // 输出 undefined

函数的作用域

JavaScript中的作用域规定了变量的可见性和生命周期。了解作用域是理解函数行为的关键。

全局作用域

在全局作用域中声明的变量可以在整个程序中访问。

javascript 复制代码

const globalVar = "I am global";

function sayGlobalVar() {
  console.log(globalVar); // 可以访问全局变量
}

sayGlobalVar();

函数作用域

在函数内部声明的变量具有函数作用域，只能在函数内部访问。

javascript 复制代码

function sayLocalVar() {
  const localVar = "I am local";
  console.log(localVar); // 可以访问局部变量
}

sayLocalVar();
console.log(localVar); // 报错，无法访问局部变量

闭包

闭包是指函数可以访问其外部作用域中的变量，即使外部函数已经执行完毕。

javascript 复制代码

function outer() {
  const outerVar = "I am outer";
  function inner() {
    console.log(outerVar); // 闭包：可以访问外部函数的变量
  }
  return inner;
}

const innerFunc = outer();
innerFunc(); // 输出 "I am outer"

常见用例

函数在JavaScript中具有广泛的用例，包括但不限于：

封装和模块化： 函数可以将代码封装在一个可重用的单元中，有助于保持代码的结构性和可维护性。
事件处理： 函数可以用于处理各种事件，例如按钮点击、键盘输入等。
异步操作： 函数可以用于执行异步任务，例如Ajax请求、定时器等。
迭代和遍历： 函数可以用于迭代数组、对象或其他数据结构的元素。
递归： 函数可以递归地调用自身来解决复杂的问题。

总结

本博客文章深入探讨了JavaScript中的函数，包括函数的定义、调用、参数、返回值、作用域和常见用例。函数是JavaScript编程中不可或缺的组成部分，它们可以使您的代码更加模块化、可维护，并且可以实现各种不同的功能。通过学习函数的基本概念和实际应用，您将能够更有效地编写JavaScript代码。在日常编程中，不断练习和掌握函数的使用是提高编程技能的重要一步。