8.9 KiB

Raw Permalink Blame History Unescape Escape

JavaScript 基础：方法与函数

Tomomi Imura 的手绘笔记

课前测验

在编写代码时，我们总是希望代码具有良好的可读性。虽然这听起来有些反直觉，但代码被阅读的次数远远多于被编写的次数。开发者工具箱中的一个核心工具就是函数，它能帮助我们确保代码的可维护性。

🎥 点击上方图片观看关于方法与函数的视频。

你可以在 Microsoft Learn 上学习本课程！

函数

从本质上讲，函数是一段可以按需执行的代码块。这非常适合需要多次执行相同任务的场景；与其在多个地方重复逻辑（这样会导致更新时非常麻烦），不如将逻辑集中在一个地方，并在需要时调用它——甚至可以从其他函数中调用函数！

函数的命名同样重要。虽然这看起来很简单，但函数名为代码段提供了一种快速的文档化方式。你可以将其想象成按钮上的标签。如果我点击一个写着“取消计时器”的按钮，我就知道它会停止计时。

创建和调用函数

函数的语法如下所示：

function nameOfFunction() { // function definition
 // function definition/body
}

如果我想创建一个显示问候语的函数，它可能看起来像这样：

function displayGreeting() {
  console.log('Hello, world!');
}

每当我们想调用（或执行）函数时，只需使用函数名并加上 ()。值得注意的是，函数可以在定义之前或之后调用；JavaScript 编译器会帮你找到它。

// calling our function
displayGreeting();

NOTE: 有一种特殊类型的函数叫做方法，你已经在使用了！事实上，我们在上面的演示中使用 console.log 时就见过了。方法与函数的区别在于，方法附属于一个对象（在我们的例子中是 console），而函数是独立的。你会发现许多开发者会将这两个术语交替使用。

函数的最佳实践

创建函数时需要牢记以下最佳实践：

一如既往地使用描述性名称，这样你就知道函数的作用是什么
使用 camelCasing（驼峰命名法）来组合单词
让函数专注于完成一个特定任务

向函数传递信息

为了让函数更具复用性，你通常需要向函数传递信息。以我们上面的 displayGreeting 示例为例，它只会显示 Hello, world!。这并不是一个非常实用的函数。如果我们想让它更灵活，比如允许用户指定要问候的人的名字，我们可以添加一个参数。参数（有时也称为 参数值）是传递给函数的额外信息。

参数在定义部分列于括号内，并用逗号分隔，如下所示：

function name(param, param2, param3) {

}

我们可以更新 displayGreeting 来接受一个名字并显示出来。

function displayGreeting(name) {
  const message = `Hello, ${name}!`;
  console.log(message);
}

当我们调用函数并传递参数时，只需在括号内指定参数值。

displayGreeting('Christopher');
// displays "Hello, Christopher!" when run

默认值

我们可以通过添加更多参数使函数更加灵活。但如果我们不希望每个值都必须指定呢？继续以问候语为例，我们可以将名字设为必需（我们需要知道要问候谁），但允许用户根据需要自定义问候语。如果用户不想自定义，我们可以提供一个默认值。要为参数提供默认值，我们可以像为变量设置值一样设置——parameterName = 'defaultValue'。完整示例如下：

function displayGreeting(name, salutation='Hello') {
  console.log(`${salutation}, ${name}`);
}

调用函数时，我们可以决定是否为 salutation 设置值。

displayGreeting('Christopher');
// displays "Hello, Christopher"

displayGreeting('Christopher', 'Hi');
// displays "Hi, Christopher"

返回值

到目前为止，我们创建的函数会始终输出到 console。有时这正是我们想要的，尤其是当我们创建的函数会调用其他服务时。但如果我想创建一个辅助函数来执行计算并将值返回，以便在其他地方使用呢？

我们可以通过使用 返回值 来实现。返回值由函数返回，并可以像存储字符串或数字这样的字面值一样存储在变量中。

如果函数返回某些内容，则使用关键字 return。return 关键字需要一个值或引用作为返回值，如下所示：

return myVariable;

我们可以创建一个函数来生成问候语并将值返回给调用者：

function createGreetingMessage(name) {
  const message = `Hello, ${name}`;
  return message;
}

调用此函数时，我们会将返回值存储在变量中。这与将变量设置为静态值（如 const name = 'Christopher'）的方式非常相似。

const greetingMessage = createGreetingMessage('Christopher');

函数作为函数的参数

随着你在编程生涯中的进步，你会遇到一些接受函数作为参数的函数。这种巧妙的技巧通常用于我们不知道某件事情何时会发生或完成，但我们知道需要在响应时执行某些操作的场景。

例如，setTimeout 会启动一个计时器，并在计时完成时执行代码。我们需要告诉它我们想执行的代码。这听起来是一个非常适合函数的任务！

如果运行以下代码，3 秒后你会看到消息 3 seconds has elapsed。

function displayDone() {
  console.log('3 seconds has elapsed');
}
// timer value is in milliseconds
setTimeout(displayDone, 3000);

匿名函数

让我们再看看我们构建的内容。我们创建了一个带有名称的函数，但它只会被调用一次。随着应用程序变得更加复杂，我们可能会创建许多只会被调用一次的函数。这并不理想。事实证明，我们并不总是需要提供名称！

当我们将函数作为参数传递时，可以跳过提前创建函数，而是在参数中直接构建它。我们使用相同的 function 关键字，但将其作为参数构建。

让我们重写上面的代码以使用匿名函数：

setTimeout(function() {
  console.log('3 seconds has elapsed');
}, 3000);

如果运行我们的新代码，你会注意到我们得到了相同的结果。我们创建了一个函数，但不需要给它命名！

箭头函数

许多编程语言（包括 JavaScript）中常见的一种简化方式是使用所谓的 箭头函数 或 胖箭头函数。它使用一个特殊的符号 =>，看起来像一个箭头——因此得名！通过使用 =>，我们可以省略 function 关键字。

让我们再一次重写代码以使用箭头函数：

setTimeout(() => {
  console.log('3 seconds has elapsed');
}, 3000);

何时使用哪种策略

现在你已经看到了三种将函数作为参数传递的方法，可能会想知道何时使用哪一种。如果你知道函数会被多次使用，就按常规方式创建它。如果只会在一个地方使用，通常最好使用匿名函数。至于使用箭头函数还是传统的 function 语法，这取决于你，但你会发现大多数现代开发者更喜欢 =>。

🚀 挑战

你能用一句话说明函数和方法的区别吗？试试看！

课后测验

复习与自学

值得多了解一些箭头函数，因为它们在代码中被越来越多地使用。练习编写一个函数，然后用这种语法重写它。

作业

函数的乐趣

免责声明：
本文档使用AI翻译服务Co-op Translator进行翻译。虽然我们努力确保翻译的准确性，但请注意，自动翻译可能包含错误或不准确之处。原始语言的文档应被视为权威来源。对于重要信息，建议使用专业人工翻译。我们对因使用此翻译而产生的任何误解或误读不承担责任。

8.9 KiB Raw Permalink Blame History Unescape Escape