javascript 函数参数个数 js中函数参数

转载

互联网小思悟 2023-05-26 14:11:56

文章标签 隐式参数显式 html 文章分类 JavaScript 前端开发

JavaScript函数参数

1、显式参数与隐式参数

在先前的教程中，我们已经学习了函数的显式参数:

functionName(parameter1, parameter2, parameter3) {    // 要执行的代码…… }

函数显式参数在函数定义时列出。

函数隐式参数是在函数调用时传递给函数真正的值

举个简单的例子就明白了

在以下代码中,a和b就是显式参数，4和3就是隐式参数

var myFunction = function (a, b) {return a * b};
var x = myFunction(4, 3);

2、参数规则

JavaScript 函数定义显式参数时没有指定数据类型。
JavaScript 函数对隐式参数没有进行类型检测。
JavaScript 函数对隐式参数的个数没有进行检测
ES5 中如果函数在调用时未提供隐式参数，参数会默认设置为： undefined

有时这是可以接受的，但是建议最好为参数设置一个默认值

function myFunction(x, y) {
    if (y === undefined) {
          y = 0;
    } 
}
//或者以下方式
function myFunction(x, y) {
    y = y || 0;
}

在上边的实例代码中，如果 y 已经定义，y || 0返回 y，因为 y 是 true，否则返回 0，因为 undefined 为 false

ES6 支持函数带有默认参数，用作未提供隐式参数时的参数默认值

function myFunction(x, y = 10) {
    return x + y;
}
 
myFunction(0, 2) // 输出 2
myFunction(5); // 输出 15, 因为 y 参数的默认值为 10

如果函数调用时设置了过多的参数，参数将无法被引用，因为无法找到对应的参数名。 只能使用 arguments 对象来调用

3、arguments对象

JavaScript 函数有个内置的对象 arguments 对象。argument 对象包含了函数调用的参数数组。
我们通过两个简单的例子来大概了解以下arguments对象的使用

arguments使用练习

查找最大参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>arguments练习1：查找最大参数</title>
</head>
<body>

<p>查找最大参数。</p>
<p id="demo"></p>

<script>
x = findMax(1, 123, 500, 115, 44, 88);      //x是一个函数，其参数为1, 123, 500, 115, 44, 88

function findMax() {
    var i, max = arguments[0];

    if(arguments.length < 2) return max;    //如果数组长度小于2，说明只有一个参数，最大值直接返回这个参数

    for (i = 0; i < arguments.length; i++) {
        if (arguments[i] > max) {
            max = arguments[i];
        }
    }
    return max;
}
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

统计所有参数的和

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>arguments练习2：计算所有参数之和</title>
</head>
<body>

<p>计算所有参数之和为：</p>
<p id="demo"></p>
<script>
var x = sumAll(1,123,500,115,44,88);        //函数先调用再声明
function sumAll() {
    var i, sum = 0;
    for(i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>