JavaScript函数--声明和调用、形参与实参

最新推荐文章于 2023-01-11 15:41:50 发布

杨旭华　

最新推荐文章于 2023-01-11 15:41:50 发布

阅读量875

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Yxh666/article/details/103092987

版权

JavaScript 专栏收录该内容

17 篇文章 13 订阅

订阅专栏

1、JavaScript函数的声明和调用：

JavaScript函数的声明和调用:就是把一段相对独立的具有特定功能的代码块封装起来，(写到一个地方)
会形成一个独立实体，就是函数，可以起个名字(函数名)，在后续的开发中可以反复调用

函数的作用就是封装一段代码，将来可以重复使用

函数声明的方式有两种：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
     // 关键字声明
     function 函数名(){
         代码
     }
     // 表达式声明
     var f = function(){
         代码
     }
</script>
</html>

就是上面的两种是我们常用的声明方式：

1. 关键字声明
2. 表达式声明

注意：
函数声明后，里面的代码是不会执行的，即使代码从上往下执行也是不会执行的

那么怎么用我们声明的函数呢，其实很简单
函数中的代码想要执行，必须调用这个函数，不管什么情况下，函数不调用就一定不会执行

接下来，我们看怎么调用函数：

... ...
    function f1(){
        console.log(2);
    }
</script>
</html>

我们看上面的JS的代码，声明了一个函数，但是这样就能打印了吗？
我们说过函数里面的代码要想要执行， 必须调用这个函数，不管什么情况下，函数不调用就一定不会执行

那如何调用的，接着看：

... ...
    function f1(){
        console.log(2);
    }
    f1();
</script>
</html>

函数调用就，函数名字+();

那我们打印，看能不能出来：
在这里插入图片描述

可以看到是能打印出来的，那我们再来尝试调用多次试试，因为上面我们说过函数调用是 可以重复使用

... ...
    function f1(){
        console.log(2);
    }
    f1();
    f1();
    f1();
    f1();
    f1();
</script>
</html>

想这样的我们调用了5次，我们看结果：
在这里插入图片描述
是的，确实打印出了5次

再来尝试一下函数的使用：

这次我们打印1到100的和

... ...
    function s(){
        var n = 0 ;
        for(var i = 0;i<=100;i++){
            n += i;
        }
        console.log(n);
    }
</script>
</html>

这样的结果如下：
在这里插入图片描述
嗯？怎么会没有呢，我们看这个for循环是写到了函数里面的啊，但是我们没有调用，就对正了我们上面说的：函数中的代码想要执行，必须调用这个函数，不管什么情况下，函数不调用就一定不会执行

那我们接着调用一下：

... ...
    function s(){
        var n = 0 ;
        for(var i = 0;i<=100;i++){
            n += i;
        }
        console.log(n);
    }
    s();
</script>
</html>

在这里插入图片描述
这样就打印出来了

2、函数的形参与实参

... ...
<script>
    function s(){
        var n = 0 ;
        for(var i = 0;i<=100;i++){
            n += i;
        }
        console.log(n);
    }
    s();

</script>
</html>

在这里插入图片描述
像这样的只能是计算1到100的和，那我们想要1到60的结果呢，可能有人说了，把100直接改成60就可以了，确实没错，这是正常的想的

但是呢，我们有要求的，就是我们调用函数一次值就变一次，这就意味着，每调用一次值，那么就是不一样的和，这样我们就需要将变化的值传入到函数里，怎么传，这就用到了函数的 形参与实参 了

function fun(形参1,形参2,形参3,…){}
fun(实参1,实参2,实参3,…);

这是形参与实参的书写格式
形参：在声明函数的小括号里写形参，可以有很多个
实参：在调用函数的小括号里写实参，可以有很多个

... ...
    function s(k){
        var n = 0 ;
        for(var i = 0;i<=k;i++){
            n += i;
        }
        console.log(n);
    }
    s(50);

</script>
</html>

我们先看代码，在声明函数的小括号里写一个k，就是一个变量，然后我们下面的原来写数值的改成我们的变量，最后在下面调用小括号里，写数值，就好了，我们看一下效果：
在这里插入图片描述
这样，1到50值的和就出来了

那我们多次调用试试：

    s(50);
    s(80);
    s(121);

在这里插入图片描述
可以看到是可以的，大家可以多尝试一下别的值，看看效果

在看一下多个值的使用：

... ...
    function fn(a,b){
        console.log(a+b);
    }
    fn(1,4);
    fn(10,0);
    fn(8,67);
    fn(132,6);
</script>
</html>

在这里插入图片描述

形参和实参

形式参数：是在声明函数时写的，多个形参使用  ,  隔开，形参的值是不固定，形参仅仅是一个站位
与实参实际传入的值要一一对应

实际参数：实参调用时，实际传入函数中的值，多个值使用  ,  隔开，传入后，
在函数中使用形参获取具体点值；

杨旭华　

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript函数--声明和调用、形参与实参

1、JavaScript函数的声明和调用：JavaScript函数的声明和调用:就是把一段相对独立的具有特定功能的代码块封装起来，(写到一个地方)会形成一个独立实体，就是函数，可以起个名字(函数名)，在后续的开发中可以反复调用函数的作用就是封装一段代码，将来可以重复使用函数声明的方式有两种：<!DOCTYPE html><html lang="en">&l...
复制链接

扫一扫