JavaScript-函数-CFANZ编程社区

什么是函数

函数是专门用于封装代码的, 函数是一段可以随时被反复执行的代码块。

函数格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        function 函数名称(形参列表) {
            被封装的代码;
        }
    </script>
</head>
<body>
</body>
</html>

不使用函数的弊端

冗余代码太多
需求变更, 需要修改很多的代码

使用函数的好处

冗余代码变少了
需求变更, 需要修改的代码变少了

先来看看不使用函数的情况下的代码吧如下所示。

<!DOCTYPE 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>

通过如上的代码假如我这时又要 向右变道 那岂不是又要写三行，那么这个时候在来看看使用了函数之后的代码吧，来进行对比一下。

<!DOCTYPE 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 数据; 的格式, 将函数中的计算结果返回给函数的调用者

需求

要求计算两个变量的和。

<!DOCTYPE html>
<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>

当然如上是没有使用到函数在来看看使用了函数的写法吧如下。

<!DOCTYPE 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>

函数的注意点

一个函数可以有形参也可以没有形参 (零个或多个) 什么是形参? 定义函数时函数 () 中的变量我们就称之为形参。

<!DOCTYPE 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>

一个函数可以有返回值也可以没有返回值。

<!DOCTYPE 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。

<!DOCTYPE html>
<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 作用立即结束当前所在的函数。

<!DOCTYPE html>
<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>

调用函数时实参的个数和形参的个数可以不相同，什么是实参? 调用函数时传入的数据我们就称之为实参。

<!DOCTYPE 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 中的函数和数组一样, 都是引用数据类型 (对象类型) 既然是一种数据类型, 所以也可以保存到一个变量中, 将一个函数保存到一个变量中, 将来可以通过变量名称找到函数并执行函数。

<!DOCTYPE html>
<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>