JavaScript的arguments对象_arguments对象可以foreach-CSDN博客

本文链接：https://blog.csdn.net/weixin_55355282/article/details/126842675

arguments对象

定义

arguments 是一个对应于传递给函数的参数的类数组对象。

---------MDN

<!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>
    <style>
        #box{
            width: 100px;
            height: 100px;
            border:1px solid #f00;
        }
    </style>
</head>
<body>
    <script>
        /**
         * css( box,'width')          两个参数代表获取属性的值
         * css(box,'width','300px')   三个属性代表设置属性的值
         * getComputedStyle           获取计算后的样式
         * **/
        window.onload=function(){
            var box=document.getElementById("box");
            console.dir(getComputedStyle(box).width);// 100px
            function css(){
                if(arguments.length==2){  
                    //说明现在传了两个参数，获取元素的属性值
                   //arguments[0]   box
                   //width     arguments[1]
                    return getComputedStyle(arguments[0]).[arguments[1]];
                }
                if(arguments.length==3){
                    //说明现在传了三个参数，设置元素的属性值
                    //arguments[0].getComputedStyle[arguments[1]]='300px';
                    arguments[0].style[arguments[1]]=arguments[2];
                }
            }
            console.log(css(box,'width'));//100px
            css(box,'height','300px');
        }
    </script>
    <div id="box"></div>
</body>
</html>

这段代码使用arguments对象获取元素属性值和设置元素属性值。

使用 arguments.length来确定传递给函数参数的个数，然后使用arguments对象来处理每个参数。

arguments可以用来获取元素的属性，也可以设置元素的属性。

arguments简单应用

遍历求和

    <script>
        window.onload=function(){
            function add(){
                var sum=0;
                len=arguments.length;
                for(var i=0;i<len;i++){
                    sum+=arguments[i];
                    console.log(sum); //依次显示遍历后的和  1，3，6，10
                }
                return sum;
               // console.log(sum);   无效
            }
            add(1,2,3,4);
           // console.log(sum);  报错
           //console.log(add(1,2,3,4));    ok
            
        }
            
    </script>

Rest parameters剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组。

语法

function(a, b, ...theArgs) {
  // ...
}

函数的最后一个参数以...为前缀命名，它将会是一个有剩余参数组成的真数组

如代码，第一个实参映射到a，第二个映射到b，其余的（3，4，5，6，7个）映射给剩余参数。

剩余参数和arguments对象之间的区别：

剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的所有实参。
arguments对象不是一个真正的数组，而剩余参数是真正的 Array实例，也就是说你能够在它上面直接使用所有的数组方法，比如 sort，map，forEach或pop。
arguments对象还有一些附加的属性（如callee属性）。

剩余参数可以被解构

解构赋值 - JavaScript | MDN (mozilla.org)