【JavaScript】函数 ⑥ ( 使用 arguments 获取所有实参 | arguments 内置对象 | 伪数组概念 )

韩曙亮

发布于 2024-04-04 10:13:29

1300

发布于 2024-04-04 10:13:29

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

一、使用 arguments 获取所有实参

1、arguments 内置对象

在定义 JavaScript 函数时 , 有时不确定形参的个数 , 形参写少了不够用 , 写多了又很浪费 , 这里推荐使用 arguments 内置参数对象 ;

在 JavaScript 的每个函数的内部都可以访问内置的 arguments 对象 ,

该对象中包含了调用者传递给函数的所有实参 ,

即使在函数形参中没有明确定义的参数 , 仍然可以通过 arguments 内置参数对象进行获取 ;

2、伪数组概念

函数内部的 arguments 对象是一个 " 伪数组 " , 其并不是真正的数组 , 其有如下 3 个特点 :

有 length 属性 : 可以获取元素个数 ;
索引存储 : 在 arguments 对象中的元素 , 是按照索引存储的 , 可以通过索引值获取元素值 ;
没有数组方法 : 无法使用数组的 pop() / push() 等函数 ;

3、arguments 实参遍历

arguments 伪数组对象中的元素个数 , 可以使用 arguments.length 属性获取 ,

同时也可以使用索引下标访问 arguments 中的实参 ;

在下面定义的函数中 , 遍历 arguments 内置伪数组对象代码示例如下 :

        // 定义函数
        function add(num1, num2) {
            // 遍历实参
            for (var i = 0; i < arguments.length; i++) {
                console.log(arguments[i]);
            }
        }

4、arguments 代码示例 - 基本使用

在下面的代码中 , 第一次传入 1, 2 实参 , 将 arguments 参数打印出来 , 可以将这两个值打印出来 , 在浏览器命令行中可展开查看这两个值 ;

第二次传入 3, 4, 5, 6, 7, 8, 9, 10 值 , 也可以在浏览器中查看传入的 8 个值 ;

代码示例 :

<!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>
        // JavaScript 函数

        // 定义函数
        function add(num1, num2) {

            // 打印所有的实参
            console.log(arguments);

            // 返回返回值
            return num1 + num2;
        }

        // 函数有返回值
        var ret = add(1, 2);
        console.log("函数返回值 : " + ret);

        ret = add(3, 4, 5, 6, 7, 8, 9, 10);
        console.log("函数返回值 : " + ret);
    </script>
</head>

<body>
</body>

</html>

执行结果 :

5、arguments 代码示例 - 遍历实参

代码示例 :

<!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>
        // JavaScript 函数

        // 定义函数
        function add(num1, num2) {

            // 打印所有的实参
            console.log(arguments);

            // 遍历实参
            for (var i = 0; i < arguments.length; i++) {
                console.log(arguments[i]);
            }

            // 返回返回值
            return num1 + num2;
        }

        ret = add(3, 4, 5, 6, 7, 8, 9, 10);
        console.log("函数返回值 : " + ret);
    </script>
</head>

<body>
</body>

</html>

执行结果 :