函数是要创建的任何应用程序的构建基块。 利用函数,可以创建命名的、可重用的代码节,以帮助使其更易于阅读和维护。 此模块介绍函数的核心概念。
简介
当我们考虑编写代码时,我们总是要确保代码是可读的。 虽然这句话听起来有悖直觉,但代码的读取次数确实比写入次数要多得多。
开发人员工具箱中确保代码的可维护性的一个核心工具是函数。 从本质上来说,函数是可以按需运行的代码块。 此代码可能会执行任务(例如转到网站的其他部分)或计算值(如两个数字之和)。
函数概述
函数是编写代码的关键构建基块。 函数是可重用的代码行集合,可在程序中执行某些操作。
函数非常适合需要多次执行同一任务的情况。 可以将逻辑集中在一个位置,而不是在多个位置重复逻辑(这会使得以后难以更新代码)。 这样,每当需要再次执行操作时,就可以调用它。 甚至可以从其他函数调用函数!
同样重要的是能够命名函数。 尽管命名函数看似简单,但名称提供了记录代码节的快速方法。 可以将命名视为按钮上的标签。
创建和调用函数
函数接受一些输入,然后返回通过某种方式转换输入的输出。
函数由三个不同的组件组成:
- 函数主体是调用函数时运行的代码块。
- 参数是传递给函数的输入的另一个名称。
- 最后,还有一个返回值,即函数的输出。
编写函数时,参数和返回值是可选的。
每当你想要调用该函数时,可以使用函数的名称,后跟一对括号 (()
)。 值得注意的是,你可以在决定调用函数之前或之后定义函数。 无论哪种方式,JavaScript 都将找到该函数,只要它在调用范围内。
最佳实践
创建函数时,请记住几个最佳做法:
-
使用描述函数用途的描述性名称。 例如,名称
displayGreeting
可以清楚地表明函数的用途是显示问候语。 对于执行相同任务的函数而言,类似于greet
的名称有点含糊不清。 它可能会显示问候语,但也可能执行不同的操作。 -
使用 camelCasing 合并单词。 若要使用 camelCase 进行编写,请将变量或函数的第一个词保持为小写,并大写每个后续单词。 由于函数和变量名称不能包含空格,因此 camelCasing 使代码中的单词更易于阅读。 例如,
displayGreeting
比displaygreeting
更易于阅读。 -
使函数集中于特定任务。 这样做不仅会使函数在整个程序中更易于重用,还可以更轻松地调试代码。 如果遇到函数未执行你想要执行的任务的问题,则你知道问题包含在该函数中。
-
使用注释文本批注代码,并描述函数的作用。 为提高代码的可读性,请在注释中包含每个函数任务的简短说明。 可以通过键入一个双斜杠 (
//
),然后键入说明来创建注释。 开始新行时,注释结束。
函数参数
为了使函数可重用性更高,将经常需要向其中传递信息。 此类型的输入称为参数。 参数有时也称为自变量,是发送到函数的其他信息。
参数在函数的定义中列出,并包含在括号 (()
) 中。 可以有多个以逗号分隔的参数,如下所示:
function name(param, param2, param3) {
}
默认值
可以通过添加更多参数,使函数更加灵活。设置值的方式与设置变量值的方式大致相同。
function displayGreeting(name, salutation='Hello') {
console.log(`${salutation}, ${name}`);
}
调用函数时,可以决定是否为称呼设置一个值,如下所示:
displayGreeting('Christopher');
// displays "Hello, Christopher"
displayGreeting('Christopher', 'Hi');
// displays "Hi, Christopher"
返回值
如果函数应返回某些内容,则使用 return
关键字,通常后跟值或对要返回的内容的引用。 不过,也可以单独使用 return
来退出函数。
创建函数
创建示例页面
首先,在 Visual Studio Code 中创建一个新页面。
打开 Visual Studio Code 终端或命令窗口。
若要创建新目录并对其进行更改,请运行以下命令之一:
# Windows
md functions && cd functions
# macOS or Linux
mkdir functions && cd functions
若要在 Visual Studio Code 中打开新目录,请运行以下命令:
code .
在“资源管理器”窗格中,将鼠标悬停在“函数”上,然后选择“新建文件”图标。
添加代码以显示消息
现在可以添加代码以显示消息。
在 index.html 文件中,以下 HTML 代码来创建 HTML 文件的核心:
<!DOCTYPE html>
<html>
<head>
<title>Message</title>
</head>
<body>
<script>
// TODO: Add hello code
// TODO: Add setTimeout code
</script>
</body>
</html>
在 index.html 文件中,在注释行 //TODO: Add hello code
下方,通过添加以下代码来创建一个函数。
函数采用一个名为 name
的参数,并返回一个字符串,其中显示“Hello”和提供该输入的人员的姓名:
// TODO: Add hello code
function getMessage(name) {
return 'Hello, ' + name + '...';
}
在刚才添加的代码中的右大括号 (}
) 下方,添加以下代码以获取消息,并使用 document.write
将其显示在网页上。
const message = getMessage('Ornella');
document.write(message);
选择“文件”>“保存”来保存文件。
查看页面
在 Visual Studio Code 中,通过选择 Ctrl+Shift+P (Windows) 或 Cmd+Shift+P (Mac) 打开“命令面板”。
在“命令面板”中,通过键入“Live Server”打开 Live Server,然后选择“Live Server: 使用 Live Server 打开”。
在浏览器中打开
完整代码
<!DOCTYPE html>
<html>
<head>
<title>Message</title>
</head>
<body>
<script>
// TODO: Add hello code
function getMessage(name) {
return 'Hello, ' + name + '...';
}
const message = getMessage('Ornella');
document.write(message);
// TODO: Add setTimeout code
</script>
</body>
</html>
匿名函数
可以通过使用函数名称并传入任何适当的参数来按需调用函数。
回调简介
从本质上来说,回调是将函数作为参数传递给另一个函数的方式。 此参数的行为方式与任何其他参数(如字符串或数字)的行为方式相同,不同之处在于它可以被调用,因为它是一个函数。
回调经常用于各种框架和库中,用于指示当某些事情发生或完成时要运行的代码。
使用回调
回调是一种常规函数,你可以像创建过去编写的任何函数一样创建回调。
setTimeout
回调是允许创建计时器的内置函数。 计时器完成后,它将调用作为第一个参数传入的函数。 第二个参数指示在调用函数之前要等待的毫秒数。
如果要设置 3 秒超时,并且代码在运行完成后显示“完成!”,你可以使用 setTimeout
,如下所示:
// timer value is in milliseconds
setTimeout(displayDone, 3000);
匿名函数
匿名函数是没有名称的函数。 匿名函数的行为方式与常规函数相同,它们也是开发人员通常设置回调的方式。
setTimeout(
function() { // anonymous function
console.log('Done!');
},
3000 // 3000 milliseconds (3 seconds)
)
箭头函数
箭头函数或胖箭头函数是创建匿名函数的一种略有不同的方式。 箭头函数使用 =>
运算符指示函数主体的开头。
setTimeout(
() => { // anonymous function
console.log('Done!');
},
3000 // 3000 milliseconds (3 seconds)
)
创建匿名函数
完整代码:
<!DOCTYPE html>
<html>
<head>
<title>Message</title>
</head>
<body>
<script>
// TODO: Add hello code
function getMessage(name) {
return 'Hello, ' + name + '...';
}
const message = getMessage('Ornella');
document.write(message);
// TODO: Add setTimeout code
setTimeout(
() => { document.write('...Hello again!')},
2000
);
</script>
</body>
</html>
-
返回到浏览器窗口。
“...Hello again!”消息可能已经显示,因为 Live Server 已经刷新了窗口。
-
刷新浏览器窗口。 请注意,显示原始消息,然后在 2 秒后,该消息被替换为“...Hello again!”消息。
已使用匿名函数使消息在延迟后显示。