JavaScript 函数的定义与调用

CSSCSSBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

在本实验中,学生将探索 JavaScript 中定义和调用函数的基本概念。实验全面介绍了函数的基础知识,涵盖了创建简单函数、使用参数以及理解函数返回值等关键技能。参与者将学习如何构建函数、执行它们,并使用控制台输出来展示其功能。

通过一系列动手练习,学习者将练习创建没有返回值的函数、实现带参数的函数,并探索调用和使用函数的不同方式。到实验结束时,学生将获得编写可重用代码块、理解函数语法以及在 JavaScript 编程中应用函数概念的实践经验。

理解函数基础

在这一步中,你将学习 JavaScript 中函数的基本概念。函数是可重用的代码块,用于执行特定任务,并帮助组织你的编程逻辑。

函数使用 function 关键字定义,后跟函数名、括号 () 以及用花括号 {} 包裹的代码块。以下是一个基本的函数结构:

function functionName() {
  // Code to be executed
}

让我们创建一个简单的示例来演示函数的基础知识。打开 WebIDE,在 ~/project 目录下创建一个名为 functions.js 的新文件。

// 定义一个简单的函数
function greet() {
  console.log("Hello, JavaScript Functions!");
}

// 调用函数
greet();

当你运行这段代码时,你将看到以下输出:

示例输出:
Hello, JavaScript Functions!

关于函数需要理解的关键点:

  • 函数使用 function 关键字定义
  • 它们可以被多次调用
  • 它们有助于减少代码重复
  • 函数可以是简单的,也可以是复杂的

尝试多次调用 greet() 函数,看看它是如何工作的。

创建没有返回值的简单函数

在这一步中,你将学习如何创建执行操作但不返回值的函数。这些函数通常用于执行特定任务或显示信息。

打开 WebIDE,在 ~/project 目录下创建一个名为 simple_functions.js 的新文件。我们将创建一些没有返回值的函数示例。

// 显示欢迎信息的函数
function displayWelcome() {
  console.log("Welcome to JavaScript Functions!");
}

// 打印乘法表的函数
function printMultiplicationTable(number) {
  console.log(`Multiplication Table for ${number}:`);
  for (let i = 1; i <= 10; i++) {
    console.log(`${number} x ${i} = ${number * i}`);
  }
}

// 调用函数
displayWelcome();
printMultiplicationTable(5);

当你运行这段代码时,你将看到以下输出:

示例输出:
Welcome to JavaScript Functions!
Multiplication Table for 5:
5 x 1 = 5
5 x 2 = 10
5 x 3 = 15
5 x 4 = 20
5 x 5 = 25
5 x 6 = 30
5 x 7 = 35
5 x 8 = 40
5 x 9 = 45
5 x 10 = 50

关于没有返回值的函数的关键点:

  • 它们执行诸如打印或修改数据的操作
  • 它们使用 console.log() 来显示信息
  • 它们可以接受参数以使其更加灵活
  • 它们不使用 return 关键字来返回值

尝试通过创建自己的函数或修改现有函数来显示不同的信息或执行各种任务。

创建带参数和返回值的函数

在这一步中,你将学习如何创建接受参数并返回值的函数。这些函数更加通用,可以执行计算或转换操作。

打开 WebIDE,在 ~/project 目录下创建一个名为 parameter_functions.js 的新文件。我们将创建一些演示参数和返回值的函数。

// 计算矩形面积的函数
function calculateRectangleArea(length, width) {
  return length * width;
}

// 检查数字是否为偶数的函数
function isEven(number) {
  return number % 2 === 0;
}

// 向某人问候的函数
function createGreeting(name) {
  return `Hello, ${name}! Welcome to JavaScript.`;
}

// 演示函数调用和返回值
let rectangleArea = calculateRectangleArea(5, 3);
console.log(`Rectangle Area: ${rectangleArea} square units`);

let checkNumber = 6;
console.log(`Is ${checkNumber} even? ${isEven(checkNumber)}`);

let personalGreeting = createGreeting("Alice");
console.log(personalGreeting);

当你运行这段代码时,你将看到以下输出:

示例输出:
Rectangle Area: 15 square units
Is 6 even? true
Hello, Alice! Welcome to JavaScript.

关于带参数和返回值的函数的关键点:

  • 参数允许函数接受输入
  • return 关键字从函数中返回一个值
  • 函数可以执行计算并返回结果
  • 返回值可以用于进一步的计算或日志记录

尝试通过创建具有不同参数和返回类型的函数来进行实验。

练习函数实现

在这一步中,你将通过创建一个小程序来练习实现函数,该程序展示了各种函数技术。我们将构建一个简单的计算器应用程序,以巩固你对函数实现的理解。

打开 WebIDE,在 ~/project 目录下创建一个名为 calculator.js 的新文件。我们将实现几个数学函数:

// 加法函数
function add(a, b) {
  return a + b;
}

// 减法函数
function subtract(a, b) {
  return a - b;
}

// 乘法函数
function multiply(a, b) {
  return a * b;
}

// 除法函数,包含错误处理
function divide(a, b) {
  if (b === 0) {
    return "Error: Division by zero";
  }
  return a / b;
}

// 计算数字平方的函数
function square(x) {
  return x * x;
}

// 演示计算器函数
console.log("Addition: 5 + 3 =", add(5, 3));
console.log("Subtraction: 10 - 4 =", subtract(10, 4));
console.log("Multiplication: 6 * 7 =", multiply(6, 7));
console.log("Division: 15 / 3 =", divide(15, 3));
console.log("Square of 4 =", square(4));
console.log("Division by zero:", divide(10, 0));

当你运行这段代码时,你将看到以下输出:

示例输出:
Addition: 5 + 3 = 8
Subtraction: 10 - 4 = 6
Multiplication: 6 * 7 = 42
Division: 15 / 3 = 5
Square of 4 = 16
Division by zero: Error: Division by zero

关于函数实现的关键点:

  • 创建具有明确单一职责的函数
  • 使用参数使函数更加灵活
  • 在必要时实现错误处理
  • 使用不同的输入测试你的函数
  • 使用有意义的函数和变量名称

尝试通过添加更多数学函数或修改现有函数来进行实验。

探索函数调用与输出

在这一步中,你将学习 JavaScript 中不同的函数调用方式以及各种输出技术。我们将创建一个综合示例,展示多种函数调用策略和输出方法。

打开 WebIDE,在 ~/project 目录下创建一个名为 function_output.js 的新文件:

// 生成个性化问候语的函数
function createGreeting(name, time) {
  return `Good ${time}, ${name}!`;
}

// 计算含税总价的函数
function calculateTotalPrice(price, taxRate = 0.1) {
  return price + price * taxRate;
}

// 带多个参数和默认值的函数
function displayUserInfo(name, age = "Not specified", city = "Unknown") {
  console.log(`Name: ${name}`);
  console.log(`Age: ${age}`);
  console.log(`City: ${city}`);
}

// 演示不同的函数调用技术
let morningGreeting = createGreeting("Alice", "morning");
console.log(morningGreeting);

let eveningGreeting = createGreeting("Bob", "evening");
console.log(eveningGreeting);

let productPrice = 100;
let totalPrice = calculateTotalPrice(productPrice);
console.log(`Product Price: $${productPrice}`);
console.log(`Total Price (with tax): $${totalPrice}`);

// 使用不同参数组合调用函数
displayUserInfo("Charlie");
displayUserInfo("David", 30);
displayUserInfo("Eve", 25, "New York");

当你运行这段代码时,你将看到以下输出:

示例输出:
Good morning, Alice!
Good evening, Bob!
Product Price: $100
Total Price (with tax): $110
Name: Charlie
Age: Not specified
City: Unknown
Name: David
Age: 30
City: Unknown
Name: Eve
Age: 25
City: New York

关于函数调用和输出的关键点:

  • 函数可以使用不同数量的参数调用
  • 默认参数值提供了灵活性
  • 使用模板字面量进行格式化输出
  • console.log() 可用于显示函数结果
  • 你可以将函数返回值存储在变量中

尝试通过创建更复杂的函数调用和输出场景来进行实验。

总结

在本实验中,参与者探索了 JavaScript 函数的基本概念,学习了如何定义、创建和调用具有不同特性的函数。实验引导学习者理解函数的基础知识,包括函数语法、声明和执行,重点在于创建可重用的代码块以执行特定任务。

学习过程涵盖了创建没有返回值的简单函数、实现带参数的函数,并展示了如何使用函数来组织编程逻辑、打印输出和执行计算。通过练习函数实现和探索各种函数调用技术,参与者获得了编写模块化和高效 JavaScript 代码的实用技能。

您可能感兴趣的其他 CSS 教程