文章目录
- 一、JavaScript 函数
- 1、函数引入
- 2、函数声明
- 3、函数调用
- 4、代码示例 - 函数声明调用
一、JavaScript 函数
1、函数引入
JavaScript 代码编写时 , 会遇到 定义 大量相同或相似代码的 场景 , 这些代码可能需要重复使用 , 这种情况下就需要 将 这些代码 定义在 函数 中 ;
JavaScript 函数 是一段可以重复使用的代码块 ,
" 函数 " 可以 接受 若干输入参数 , 在 函数体 中进行 计算 或 执行操作，并返回 返回值 ;
借助 函数 可以 组织和重用代码 , 使代码更加清晰和易于维护 ;
函数 的 目的 就是 重复使用代码 ;
使用函数 就是 声明函数 和 调用函数 ;
2、函数声明
在 JavaScript 中 , 使用 function 关键字 声明函数 ;
函数定义语法格式 :
// 声明 JavaScript 函数
function functionName(parameter1, parameter2, ...) {
// 函数体：执行的代码块
}
functionName是 函数 的 函数名 ;parameter1, parameter2, ...是 传递给函数的 形式参数列表 , 这些 形式参数 在 函数体代码中 可与作为局部变量使用 ;
代码示例 :
// 声明函数
function hello(name) {
console.log(`Hello, ${name}!`);
}
在上述代码中 , 声明了一个名为 hello 的函数 , 该函数接受一个参数 name , 在函数体中 使用 console.log 在 浏览器 命令行 中 打印出 Hello, ${name}! 字符串 ;
3、函数调用
函数声明后 , 本身不会自动执行 函数体中的代码 , 只有 调用函数后 , 才会执行 函数体代码 ;
函数调用 语法格式 :
functionName(argument1, argument2, ...);
functionName是 要调用函数 的 函数名 ;argument1, argument2, ...是传递给函数的 实参列表 , 该 实参列表 与 函数定义的 形参列表一一对应 , 这些实际参数值值将替换函数定义中的形式参数 , 并在函数执行时 作为 函数体的 局部变量 使用 ;
4、代码示例 - 函数声明调用
在下面的代码中 , 定义了 hello 函数 , 传入 name 形参 , 在 函数体中 , 该形参可以作为局部变量使用 ;
调用 hello() 函数时 , 传入 实参 'Tom' 字符串 , 在函数体中会向 浏览器控制台 打印 Hello , Tom! 字符串 ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置 meta 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript</title>
<style></style>
<script>
// 函数使用
// 声明函数
function hello(name) {
console.log(`Hello, ${name}!`);
}
// 调用函数
hello('Tom');
</script>
</head>
<body>
</body>
</html>
执行结果 :
