JavaScript 函数 - 绿叶网

JavaScript 函数是什么？

很多教程都喜欢搞这一套，一上来就介绍 “函数定义、函数参数、函数调用……”，然后滔滔不绝地开始讲函数的语法。小伙伴们几乎把函数这一章看完了，都不知道函数究竟是怎样一个东西！

为了再次避免这种悲剧的发生，在讲解函数语法之前，我们先给大家介绍一下函数是怎样的一个东西。先看一个例子。

示例 1：不使用 JavaScript 函数

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        let sum = 0;
        for (let i = 1; i <= 50; i ++) {
            sum += i;
        }
        console.log("50 以内所有整数之和为：" + sum);
    </script>
</body>
</html>

大家一看就知道上面这段代码实现的功能是：计算 50 以内所有整数之和。如果要分别计算 “50 以内所有整数之和” 以及 “100 以内所有整数之和”，那应该怎么实现呢？不少小伙伴很快就写下了以下代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        let sum1 = 0;
        for (let i = 1; i <= 50; i++) {
            sum1 += i;
        }
        console.log("50以内所有整数之和为：" + sum1);


        let sum2 = 0;
        for (let i = 1; i <= 100; i++) {
            sum2 += i;
        }
        console.log("100以内所有整数之和为：" + sum2);
    </script>
</body>
</html>

那我现在又提一个问题：如果要你分别实现 “50 以内、100 以内、150 以内、200 以内、250 以内” 所有整数之和。那岂不是要重复写 5 次相同的代码？

为了减轻这种重复编码的负担，JavaScript 引入了函数的概念。如果我们想要实现上面 5 个范围内所有整数之和，用函数可以这样来实现。

示例 2：使用 JavaScript 函数

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        // 定义函数
        function getSum(n) {
            let m = 0;
            for (let i = 1; i <= n; i++) {
                m += i;
            }
            console.log(n + " 以内所有整数之和为：" + m);
        }

        // 调用函数，计算50以内所有整数之和
        getSum(50);

        // 调用函数，计算100以内所有整数之和
        getSum(100);

        // 调用函数，计算150以内所有整数之和
        getSum(150);

        // 调用函数，计算200以内所有整数之和
        getSum(200);

        // 调用函数，计算250以内所有整数之和
        getSum(250);
    </script>
</body>
</html>

运行结果如下。

50 以内所有整数之和为：1275
100 以内所有整数之和为：5050
150 以内所有整数之和为：11325
200 以内所有整数之和为：20100
250 以内所有整数之和为：31375

分析：

对于这段代码，大家暂时看不懂没关系，学完这一章就明白了。从上面我们也可以看出，使用函数可以大量减少重复工作，这简直是编程的一大神器呐！

JavaScript 函数的用途

函数一般是用来实现某一种重复使用的功能，在需要该功能的时候，直接调用函数就可以了，而不需要重复地编写一大堆重复的代码。并且在需要修改该函数功能的时候，也只需要修改和维护这一个函数就行，而不会影响其他代码。

函数一般会在两种情况下使用：一种是 “重复使用的功能”，另外一种是 “特定的功能”。

在 JavaScript 中，如果我们想要使用函数，一般只需要简单的 2 步。

定义函数。
调用函数。