JavaScript中的函数使用

向右看齐 2023-02-09 13:16 9阅读 0赞

### 函数的基本概述 ###

函数是当它被调用时可重复使用的代码块，JS中的函数类似于Java中的方法。

函数有两种定义方式：命名函数和匿名函数

### 函数的基本使用 ###

函数的格式:

function 函数名(参数列表) {
        函数体;
        [return 返回值];
    }

代码实现自定义函数

需求：定义一个函数实现加法功能

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>两个数相加的函数</title>
    </head>
    <body>
    <script type="text/javascript">
        //函数的定义
        function add(m,n) {
            return m+n;
        }
    
        //函数的调用
        document.write("两个数的和：" + add(5,3));
    </script>
    </body>
    </html>

注意的事项:

1.  形参的类型：在函数定义的时候不用指定类型，因为是可变类型
2.  函数的返回值：如果一个函数中需要返回值，直接使用return返回，如果没有返回值，不写return。
3.  关于函数的重载：在JS中没有函数的重载，同名的函数会覆盖原来的函数，调用的时候，只会调用最后1个函数，而且实参的个数与形参数的个数没有关系。
4.  所有函数的内部都有一个隐藏数组，名字叫：arguments，用来接收调用时提交的所有的参数。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE1MTc5NQ_size_16_color_FFFFFF_t_70][]

演示：定义一个函数，在函数的内部输出arguments的长度和数组中的每个元素。

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>输出隐藏数组</title>
    </head>
    <body>
        <script type="text/javascript">
        	function sum (a,b) {
        		//在函数的内部输出arguments的长度和数组中的每个元素
        		document.write("arguments数组的长度：" + arguments.length + "<hr/>");
        		//输出每个元素
        		for (var i = 0; i < arguments.length; i++) {
        			document.write(arguments[i] + "<br/>");
        		}
        		document.write("a=" + a + "<br />");
        		document.write("b=" + b + "<br />");
        	}
        	//调用
        	sum(3,10,8);
        	//sum(3);
        </script>
    </body>
    </html>

### 匿名函数 ###

语法：

var 变量名 = function(参数列表) {
    	函数体;
    }

函数调用：

//匿名函数
    var sayHi = function(name) {
    	window.alert("Hello, " + name);
    };
    
    //调用
    sayHi("NewBoy");

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE1MTc5NQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200518230353834.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE1MTc5NQ==,size_16,color_FFFFFF,t_70