什么是函数
函数是专门用于封装代码的, 函数是一段可以随时被反复执行的代码块。
函数格式
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
function 函数名称(形参列表) {
被封装的代码;
}
</script>
</head>
<body>
</body>
</html>
不使用函数的弊端
- 冗余代码太多
- 需求变更, 需要修改很多的代码
使用函数的好处
- 冗余代码变少了
- 需求变更, 需要修改的代码变少了
先来看看不使用函数的情况下的代码吧如下所示。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
// 向左变道
console.log("打左转向灯");
console.log("踩刹车");
console.log("向左打方向盘");
console.log("回正方向盘");
// 向右变道
console.log("打右转向灯");
console.log("向右打方向盘");
console.log("回正方向盘");
// 向左变道
console.log("打左转向灯");
console.log("踩刹车");
console.log("向左打方向盘");
console.log("回正方向盘");
</script>
</head>
<body>
</body>
</html>
通过如上的代码假如我这时又要 向右变道 那岂不是又要写三行，那么这个时候在来看看使用了函数之后的代码吧，来进行对比一下。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
// 定义向左变道的函数
function toLeft() {
console.log("打左转向灯");
console.log("踩刹车");
console.log("向左打方向盘");
console.log("回正方向盘");
}
// 定义向右变道的函数
function toRight() {
console.log("打右转向灯");
console.log("向右打方向盘");
console.log("回正方向盘");
}
// 向左变道
// 以下代码的含义: 找到名称叫做toLeft的函数, 执行这个函数中封装的代码
toLeft();
// 向右变道
toRight();
// 向左变道
toLeft();
</script>
</head>
<body>
</body>
</html>
函数的定义步骤
- 书写函数的固定格式。
- 给函数起一个有意义的名称，为了提升代码的阅读性，函数名称也是标识符的一种, 所以也需要遵守标识符的命名规则和规范
- 确定函数的形参列表，看看使用函数的时候是否需要传入一些辅助的数据
- 将需要封装的代码拷贝到
{} 中 - 确定函数的返回值，可以通过
return 数据; 的格式, 将函数中的计算结果返回给函数的调用者
需求
要求计算两个变量的和。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
let numOne = 10;
let numTwo = 20;
let resOne = numOne + numTwo;
console.log(resOne);
let valueOne = 30;
let valueTwo = 20;
let resTwo = valueOne + valueTwo;
console.log(resTwo);
</script>
</head>
<body>
</body>
</html>
当然如上是没有使用到函数在来看看使用了函数的写法吧如下。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
// a = numOne, b = numTwo;
function getSum(a, b) {
// 将 a + b 的结果返回给函数的调用者
return a + b;
}
let numOne = 10;
let numTwo = 20;
// let result = res;
// let result = 30;
let result = getSum(numOne, numTwo);
console.log(result);
</script>
</head>
<body>
</body>
</html>
函数的注意点
一个函数可以有形参也可以没有形参 (零个或多个) 什么是形参? 定义函数时函数 () 中的变量我们就称之为形参。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
// 没有形参的函数
function show() {
console.log("hello world");
}
show();
// 有形参的函数
function say(name) {
console.log("hello " + name);
}
say("BNTang");
</script>
</head>
<body>
</body>
</html>
一个函数可以有返回值也可以没有返回值。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
// 没有返回值的函数
function say() {
console.log("hello world");
}
say();
// 有返回值的函数
function getSum(a, b) {
return a + b;
}
let res = getSum(10, 20);
console.log(res);
</script>
</head>
<body>
</body>
</html>
函数没有通过 return 明确返回值, 默认返回 undefined。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
function say() {
console.log("hello world");
// undefined
return;
}
let res = say();
console.log(res);
</script>
</head>
<body>
</body>
</html>
return 的作用和 break 相似, 所以 return 后面不能编写任何语句 (永远执行不到) break 作用立即结束 switch 语句或者循环语句，return 作用立即结束当前所在的函数。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
function say() {
console.log("hello world");
return;
console.log("return后面的代码");
}
say();
</script>
</head>
<body>
</body>
</html>
调用函数时实参的个数和形参的个数可以不相同，什么是实参? 调用函数时传入的数据我们就称之为实参。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
function getSum(a, b) {
console.log(a, b);
return a + b;
}
// 这里的10和20就是实参
let resOne = getSum(10, 20);
console.log(resOne);
let numOne = 10;
let numTwo = 20;
// 这里的 numOne 和 numTwo 也是实参
let resTwo = getSum(numOne, numTwo);
console.log(resTwo);
let resThree = getSum(10);
let resFour = getSum(10, 20, 30);
console.log(resThree);
console.log(resFour);
</script>
</head>
<body>
</body>
</html>
JavaScript 中的函数和数组一样, 都是引用数据类型 (对象类型) 既然是一种数据类型, 所以也可以保存到一个变量中, 将一个函数保存到一个变量中, 将来可以通过变量名称找到函数并执行函数。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
let say = function () {
console.log("hello world");
}
say();
</script>
</head>
<body>
</body>
</html>
