Javascript 函数介绍

Javascript 函数介绍

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

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

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以内所有奇数和,那读者该怎么实现。很多人很快就写了以下代码:

javascript 复制代码
<!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个范围以内的实现方式如下:

javascript 复制代码
<!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>

在浏览器预览效果如下:

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

  • (1)定义函数;
  • (2)调用函数;

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

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

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

相关推荐
swipe2 小时前
从 0 到 1 实现大文件上传:分片、秒传、断点续传、暂停、重试与服务端合并
前端·javascript·面试
kyriewen3 小时前
AI 生成的代码能跑就行?这 5 个坑迟早炸
前端·javascript·ai编程
kisshyshy3 小时前
🍦 雪糕、食堂、火车厢:三幅漫画吃透栈、队列与链表
javascript·算法
胡志辉4 小时前
从v8源码和react深入浅出理解 JavaScript 作用域链与闭包
前端·javascript
Bolt5 小时前
TypeScript 7.0 来了:当 tsc 用 Go 重写之后
javascript·typescript·go
阳火锅6 小时前
😭测试小姐姐终于不骂我了!这个提BUG神器太香了...
前端·javascript·面试
林希_Rachel_傻希希8 小时前
js里面的proxy理解。以及vue3响应式数据设计底层
前端·javascript·面试
阿黎梨梨8 小时前
AI Loop:告别“人肉写提示词”,让代码替你“鞭策”AI
javascript·人工智能
竹林81812 小时前
用 wagmi v2 + viem 监听链上事件,我踩了三天坑终于搞懂了实时日志与历史补全
javascript
只一12 小时前
😭从回调地狱到 async/await:一文打通 Ajax 与 JS 异步编程
javascript