从0开始学前端 第二十二课：函数

第二十二课：函数

学习目标

在本课结束后，你将能够：

1. 定义并调用自己的函数。
2. 理解函数参数的工作原理以及如何使用返回值。
3. 区分匿名函数和箭头函数，并知道如何使用它们。

学习内容

1. 定义函数

   • 概念: 函数是一段可被重复调用的代码块，用于执行特定任务。
   • 代码示例:

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

   • 预计输出效果: 调用greet("Alice")将在控制台输出"Hello, Alice!"。

2. 调用函数

   • 概念: 定义函数后，可以通过其名称和一对圆括号来调用它。
   • 代码示例:

     greet("Alice");
     

   • 预计输出效果: “Hello, Alice!”。

3. 参数和返回值

   • 概念: 参数是传递给函数的值，函数可以通过参数进行不同的操作。返回值是函数执行后返回给调用者的值。
   • 代码示例:

     function add(a, b) {
       return a + b;
     }
     let sum = add(5, 3);
     console.log(sum);
     

   • 预计输出效果: 上述代码将输出"8"。

4. 匿名函数和箭头函数

   • 概念: 匿名函数是没有名称的函数，通常用作参数传递给其他函数。箭头函数是ES6的新特性，提供了一种更简洁的方式来写函数。
   • 代码示例:

     // 匿名函数
     let show = function (message) {
       console.log(message);
     };
     show("Hello, Anonymous!");
     
     // 箭头函数
     let multiply = (x, y) => x * y;
     console.log(multiply(2, 3));
     

   • 预计输出效果: 第一个例子会输出"Hello, Anonymous!“，第二个例子会输出"6”。

课后练习

1. 定义和调用函数:

   • 创建一个函数calculateArea，接收矩形的长和宽作为参数，返回其面积。

2. 使用参数和返回值:

   • 定义一个函数isEven，接收一个数字作为参数，并返回该数字是否为偶数。

3. 实践匿名函数和箭头函数:

   • 使用匿名函数，编写一个立即执行的函数表达式，输出“这是一个匿名函数”。
   • 使用箭头函数，编写一个函数getMax，接受两个参数，返回它们中较大的那个。

课后练习解析

1. 定义和调用函数:

   • 示例代码：

     function calculateArea(length, width) {
       return length * width;
     }
     let area = calculateArea(5, 3);
     console.log(area);
     

   • 输出应该是"15"。

2. 使用参数和返回值:

   • 示例代码：

     function isEven(number) {
       return number % 2 === 0;
     }
     console.log(isEven(4)); // 应该输出true
     console.log(isEven(5)); // 应该输出false
     

3. 实践匿名函数和箭头函数:

   • 匿名函数示例代码：

     (function () {
       console.log("这是一个匿名函数");
     })();
     

   • 箭头函数示例代码：

     let getMax = (a, b) => a > b ? a : b;
     console.log(getMax(10, 20)); // 应该输出20
     

通过这些练习，你将加深对JavaScript函数的理解，包括如何定义函数、传递参数、使用返回值以及如何使用不同类型的函数表达式。记住，练习是学习编程的最好方式。不断尝试写出自己的函数，并调用它们以查看结果。

---

章节目录
第二十三课：JavaScript 数组基础