【JavaScript】函数 ② ( 函数参数 | 形式参数 | 实际参数 )

韩曙亮

发布于 2024-04-02 09:58:59

1030

发布于 2024-04-02 09:58:59

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

一、JavaScript 函数参数

在 JavaScript 语言中 , 参数分为以下两种 :

形式参数 Parameter , 简称 " 形参 " , 是在函数定义时列出的变量 , 用于预期函数将接收的输入值 ;
实际参数 Argument , 简称 " 实参 " , 是在函数调用时传递给函数的实际值 , 用于替换形参并执行函数 ;

形参与实参是函数参数的两个重要概念 , 二者用于定义函数如何处理外部输入参数 ;

1、形式参数

形式参数简称形参 , 是在函数声明时定义的参数列表 ;

形参表示的是函数想要接受的输入参数对应的占位符 ;

在函数调用时 , 形参会被替换为实参 ;

函数声明的语法结构如下 , 在函数名后面的小括号中的 parameter1, parameter2, ... 就是形式参数列表 ;

function functionName(parameter1, parameter2, ...) {  
  // 函数体：执行的代码块 
}

形参的个数可以有 0 - n 个 , 可以不设置形参 , 也可以设置多个形参 ;

2、实际参数

实际参数简称 " 实参 " , 实参是调用函数时传递给函数的实际参数值 ;

传入的实际参数值会替换函数声明时的形式参数 ;

函数调用的语法结构如下 , argument1, argument2, ... 是传递给函数的实际参数值 , 实参的个数和次序建议与形参一一对应 , 在 JavaScript 中如果不匹配也不会报错 ;

functionName(argument1, argument2, ...);

3、代码示例 - 形参和实参

在下面的代码中 , 声明了 add 函数 , 该函数有 2 个形式参数 , 分别是 num1 和 num2 ;

在函数体中 , 将 num1 和 num2 相加 , 并打印到浏览器控制台中 ;

        // 声明函数
        // 形参数 num1 和 num2
        function add(num1, num2) {
            console.log(num1 + " + " + num2 + " = " + (num1 + num2));
        }

调用函数时 , 下面的代码中 , 传入实参 1 和 2 , 实参 1 传递给形参 num1 , 实参 2 传递给形参 num2 ;

        // 调用函数
        // 实参是 1 和 2
        add(1, 2);

代码示例 :

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

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 函数使用

        // 声明函数
        // 形参数 num1 和 num2
        function add(num1, num2) {
            console.log(num1 + " + " + num2 + " = " + (num1 + num2));
        }

        // 调用函数
        // 实参是 1 和 2
        add(1, 2);
        // 实参是 3 和 4 
        add(3, 4);
        // 实参是 5 和 6
        add(5, 6);
    </script>
</head>

<body>
</body>

</html>

执行结果 :