JavaScript arguments对象

函数的参数
-> length 属性
在 js 中凡是定义了一个函数, 就是定义了一个对象.
函数与一般的数据是一样的使用: 赋值, 可以调用.

函数作为对象有一个属性 length 该属性用于描述在定义的时候函数的参数个数

-> arguments 对象
所谓 arguments, 就是参数的复数形式. 也就是在调用函数的时候, 会给函数传入参数
但是有时不确定需要传入多少参数, 所有在调用时传入的参数都会被 arguments 获取到.
简单的说 arguments 中存储的就是参数的集合.

在实际调用的时候 arguments 就是实际调用时传入的所有参数

问题: 如何判断函数参数调用符合函数的定义?
如何判断调用时的参数个数与函数定义时的参数个数一样?
函数名.length === arguments.length

使用 arguments 可以保证在函数定义不写参数的情况下, 也可以获得函数调用时传入的所有参数.
因此在不确定函数有多少参数和需要函数有动态参数的时候使用.
1> 比如, 求两个数组中较大的数字
function max( a, b ) {
return a > b ? a : b;
}
如果需要判断多个数字中较大的数字，代码如下:

    function max(){
        var args = arguments;
        var maxNum = args[0];
        for(var i=1;i<args.length;i++){
            if(maxNum<args[i]){
                maxNum = args[i];
            }
        }
        return maxNum;
    }
    console.log(max(2,3,4,5,6,9))

2> 希望函数有动态参数, 在传入不同参数的时候有不同的结果
在 jq 中, css, attr, val, html, text, ...
接下来实现一个 css 方法, 该方法提供两个参数, 一个是 dom 元素, 第二个是一个字符串
用于解释获得什么样式属性值; 也可以带有三个参数, 第一个参数是 dom 元素, 第二个参数
是字符串, 用于告知需要处理哪一个样式, 第三个参数就是对应的样式值.

css( div, 'border' ) -> 获得 div 元素的 border 样式属性的值
css( div, 'border', '1px solid red' ) 为元素 div 设置 border 的样式.

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div ></div>
</body>
<script>
    function css () {
        var args = arguments;
        // 第 0 个元素是 DOM
        // 第 1 个元素是 对应的样式
        // 第 2 个元素是 需要设置的样式值
        if ( args.length == 3 ) {
            // 设置
            args[ 0 ].style[ args[ 1 ] ] = args[ 2 ]; 
        } else {
            // 获取
            return args[ 0 ].style[ args[ 1 ] ];
        }
    }
    var div = document.getElementById( 'dv' );
    css( div, 'border', '1px solid red' );
    css( div, 'width', '200px');
    css( div, 'height', '100px');
    console.log( css( div, 'width' ) );
</script>
</html>

JavaScript arguments对象

相关推荐