Javascript 函数介绍

小灰灰 2024-02-17 13:06 9阅读 0赞

## Javascript 函数介绍 ##

很多教程书一上来就讲解一堆语法，例如函数定义、函数调用什么。等读者看完了函数这一章都没搞懂什么是函数。

在讲解什么叫函数之前，我们先看下面一段代码：

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript">
            var sum=0;
            for(var i=1;i<50;i+=2)
            {
                sum+=i;
            }
            document.write("50以内所有奇数和为："+sum);
        </script>
    </head>
    <body>
    </body>
    </html>

大家一看就知道了，上面代码实现的是50以内所有奇数的和。如果要分别计算50以内所有奇数和以及100以内所有奇数和，那读者该怎么实现。很多人很快就写了以下代码：

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript">
            var sum1=0;
            for(var i=1;i<50;i+=2)
            {
                sum1+=i;
            }
            document.write("50以内所有奇数和为："+sum1);
            document.write("<br/>");
            var sum2=0;
            for(var j=1;j<100;j+=2)
            {
                sum2+=j;
            }
            document.write("100以内所有奇数和为："+sum2);
        </script>
    </head>
    <body>
    </body>
    </html>

那我现在问一个问题，如果我要你实现50以内所有奇数和、100以内所有奇数和、150以内奇数和、200以内所有奇数和、250以内所有奇数和。那你岂不是要每次都重复编写次类似的代码？要是没有一种简单的实现方法，俺们这些程序猿还用活的？

为了解决减轻这种重复编码的负担，函数这种东西就应运而生。例如实现上面5个范围以内的实现方式如下：

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript">
            //定义函数
            function sum(n)
            {
                var m=0;
                for(var i=1;i<n;i+=2)
                {
                    m+=i;
                }
                document.write(n+"以内所有奇数和为："+m+"<br/>");
            }
            //调用函数，计算50以内所有奇数的和
            sum(50);
            //调用函数，计算100以内所有奇数的和
            sum(100);
            //调用函数，计算150以内所有奇数的和
            sum(150);
            //调用函数，计算200以内所有奇数的和
            sum(200);
            //调用函数，计算250以内所有奇数的和
            sum(250);
        </script>
    </head>
    <body>
    </body>
    </html>

在浏览器预览效果如下：

![387fd21b8575f5c92125bef196eee004.png][]

大家可以看到使用函数可以减少大量重复工作，而函数只需要采用简单2步就可以实现了：

*  （1）定义函数；
 *  （2）调用函数；

现在大家都知道函数是怎么一回事了，我们来总结一下：函数，就是一个一系列JavaScript语句的集合，这是为了完成某一个会重复使用的特定功能。在需要该功能的时候，直接调用函数即可，而不必每次都编写一大堆重复的代码。并且在需要修改该功能的时候，也只要修改和维护这一个函数即可。

总之，将语句集合成函数，好处就是方便代码重用。并且，一个好的函数名，可以让人一眼就知道这个函数实现的是什么功能，方便维护。

在接下来的课程中，我们来给大家详细讲解编程的一大利器——函数。

[387fd21b8575f5c92125bef196eee004.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/f45f7b144c644d658d5e56404f968c7d.png