1.函数

函数是封装了一段可以被重复执行调用的代码块。目的是让大量代码重复使用
封装：将一个或多个功能通过函数的方式进行封装，对外只提供一个简单的函数接口（将主板、CPU等封到主机里）

2.函数使用

2.1 声明函数

function 函数名(){
//函数体
}

function getNum(){
//函数体
console.log(1);
}

1.2 调用函数

函数不调用，自己不执行

//函数名()
getNum()

3.函数的参数

函数内部某些值不固定时，可以通过参数在调用函数时将不同的值传进函数中

3.1形参

定义（声明）函数时的参数

function(形参1,形参2...){
}

3.2实参

调用函数时的参数

函数名(实参1，实参2...)

3.3 实参和形参的执行过程

形参是接受实参的，接受实参的值
函数的参数可以有，也可以没有，个数不限

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function getSum(num1,num2){
            console.log(num1+num2);
        }
        getSum(3,8);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

3.4 函数形参和实参的匹配问题

形参和实参个数相同，正常输出结果
形参个数小于实参个数：只按顺序取形参的个数参与运算
形参个数大于实参个数：相当于多余的形参定义为undefined，所以结果是一个数+undefined=NaN
形参默认值是undefined

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function getSum(num1,num2){
            console.log(num1+num2);
        }
        getSum(3,8);
        getSum(3,8,1);
        getSum(2);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

4.函数的返回值return

语法：

function 函数名(){
	return 需要返回的结果;
}

注意

函数将返回值返回给调用者
函数只是实现某种功能，最终的结果需要通过return返回给调用者
return之后的语句不会在执行
return一次只返回一个值，如果return后用逗号分割了多个值，就返回最后一个逗号之后的值
如果想一次返回多个值，可以将返回的值都放到一个数组中
如果函数没有return.就返回undefined

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script>
       function getMax(num1, num2) {
           return num1 > num2 ? num1 : num2;
       }
       console.log(getMax(1, 3));
       function getA(){

       }
       console.log(getA());
   </script>
</head>

<body>

</body>

</html>

在这里插入图片描述

返回两个数的最大值：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function getMax(num1, num2) {
            return num1 > num2 ? num1 : num2;
        }
        console.log(getMax(1, 3));
    </script>
</head>

<body>

</body>

</html>