JavaScript函数

JavaScript函数

 

1.JavaScript函数

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7 </head>
 8 <body>
 9     <script>
10         //fn  是函数名
11         // a, b 是形参，形式上的参数，定义的时候你其实并不知它会是什么
12         //形参是用来接收实参的
13         function  fn( a,b){
14             var sum  = a+b;
15             //return 只能返回一个值，如果想要返回多个值，请使用数组
16             return sum;
17         }
18         //fn(1,2)是在调用函数，1，2 是实参，即实际的参数
19         alert(fn(1,2));
20 
21     </script>
22 </body>
23 </html>

 

 2. 形参实参个数不匹配问题

（1）当实参个数大于形参个数时，按顺序用形参来接收形参即可，多余的实参不用管。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7 </head>
 8 <body>
 9     <script>
10        function fn( x,y ){
11           return x + y ;
12        }
13        //当实参个数大于形参个数时，按顺序用形参来接收形参即可，多余的实参不用管。
14        alert(fn(1,2,3,4,5));
15     </script>
16 </body>
17 </html>

 

 

 

（2）当实参的个数小于形参的个数时

即没有接收到实参的形参就是一个变量，但是没有赋值，即undefined，最后返回的结果是  NaN

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7 </head>
 8 <body>
 9     <script>
10        function fn( x,y ){
11           return x + y ;
12        }
13        // 当实参的个数小于形参的个数时即没有接收到实参的形参就是一个变量，但是没有赋值，即undefined，最后返回的结果是  NaN
14        alert(fn(1));
15     </script>
16 </body>
17 </html>

 

 

 

3.arguments

当我们并不确定会传递多少个参数时，可以通过arguments来获取传递的所有的实参。

arguments是当前函数内置的一个对象,它的展示形式其实是一个伪数组，即具有数组的length属性（长度），也可以通过索引的方法获取或修改数组元素，但是不具备数组的 push(),pop()等方法。所以我们可以通过遍历数组的方式遍历arguments。

实例：求任意个数值的最大值

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7 </head>
 8 <body>
 9     <script>
10         //可以通过arguments来获取传递的所有的实参,那么这个获取任意个数值的最大值的
11         //函数就没有必要写形参了，因为你不知道要写多少个形参
12         function getMax(){
13 
14             //arguments的展示形式是一个为数组，我们先让这个伪数组中第一个元素作为最大值
15             var max = arguments[0];
16             //然后遍历 arguments
17             for (var i=0; i< arguments.length ; i ++){
18                 if(arguments[i] > max){
19                     max = arguments[i];
20                 }
21             }
22             return max;
23         }
24 
25         var m1 = getMax(1,2);
26         var m2 = getMax(1,2,3,4,5,6);
27         var m3 = getMax(9*99 , 8*110);
28         console.log(m1);
29         console.log(m2);
30         console.log(m3);
31         
32         
33         
34     </script>
35 </body>
36 </html>

 

 

 

 

4.匿名函数

既没有函数名的函数，那么怎么取调用匿名函数呢？

（1）把它放到一个变量里，这样这个变量就成为了一个函数，还可以通过变量名向这个匿名函数传递参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //fn 是一个变量名，而不是函数名
        var fn = function(a,b){
            return a+b;
        }
        alert(fn(2,3));
    </script>
</body>
</html>

 

 

 

（2）干脆不要名字，直接执行

（匿名函数）（参数）；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

        (function(a,b){
            alert(a+b);
        })(5,5);
    </script>
</body>
</html>

 

 

（3）利用事件去调用（DOM操作）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7 </head>
 8 <body>
 9     <button class="b1">this</button>
10 
11     <script>
12         var btn  = document.querySelector(".b1");
13         btn.onclick = function(){
14             alert("利用事件调用匿名函数")
15         }
16     </script>
17 </body>
18 </html>

 

posted @ 2020-04-25 16:23  瑾言**  阅读(210)  评论(0)  编辑  收藏  举报