函数的参数
-> 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 id="dv"></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>