前言JavaScript 函数对参数的值(arguments)没有进行任何的检查。 JavaScript 函数参数与大多数其他语言的函数参数的区别在于:它不会关注有多少个参数被传递,不关注传递的参数的数据类型。 函数未定义参数如果一个函数为定义参数,但是函数内部却用到了2个参数a和b,那么在调用函数的时候,可以给a和b传参。 function func() { console.log(a); console.log(b); var y = 'hello' + a; console.log(y) }
func(a='world', b='x');
虽然上面这种写法不会报错,但是我们一般不这样写,这样的代码很难维护。 函数显式参数与隐藏参数(arguments)显示参数就是在定义函数的时候,在括号里面传的参数,如functionName(parameter1, parameter2, parameter3) ,这里的parameter1,parameter2,parameter3就是3个显示参数 function func1(x, y ,z) { console.log(x, y, z); // do something .... }
函数隐藏参数(arguments)在函数调用时传递给函数真正的值。 func1('a', 'b', 'c'); 默认参数 undefined参数规则: JavaScript 函数定义时参数没有指定数据类型。 JavaScript 函数对隐藏参数(arguments)没有进行检测。 JavaScript 函数对隐藏参数(arguments)的个数没有进行检测。
如果函数在调用时未提供隐式参数,参数会默认设置为:undefined function func1(x, y ,z) { console.log(x, y, z); // do something .... } func1(); // undefined undefined undefined func1('a'); // a undefined undefined func1('a', 'b'); // a b undefined func1('a', 'b', 'c'); // a b c func1('a', 'b', 'c', 'd'); // a b c
在调用函数,实际传参时不会对参数个数检测,如果传参个数少于函数定义的参数,那么其它的参数默认值是undefined。 设置参数默认值(ES5)定义函数参数的时候,可以给参数设置一个默认值 function func1(x, y, z) { y = y || 0; z = z || 0; console.log(x, y, z); // do something .... }
func1(); // undefined 0 0 func1('a'); // a 0 0 func1('a', 'b'); // a b 0 func1('a', 'b', 'c'); // a b c
ES6 支持函数可以自带默认参数 function func1(x, y=0, z=0) { console.log(x, y, z); // do something .... }
func1(); // undefined 0 0 func1('a'); // a 0 0 func1('a', 'b'); // a b 0 func1('a', 'b', 'c'); // a b c
很显然ES6 这种给函数参数设置默认值的语法,更符合我们的习惯。 arguments 对象关键字arguments ,它只在函数内部起作用,利用arguments ,你可以获得调用者传入的所有参数。 也就是说,即使函数不定义任何参数,还是可以拿到参数的值 // 函数不定义任何参数 function func2() { console.log(arguments); // Array.from 转 数组 console.log(Array.from(arguments)); // do something .... }
func2(); // [] func2('a'); // ['a'] func2('a', 'b'); // ['a', 'b'] func2('a', 'b', 'c'); // ['a', 'b', 'c']
arguments 是在函数内部获取传入的所有参数,有个length属性,获取参数的个数,它可以看成一个数组,如果想转真正的数组,可以用Array.from() // 函数不定义任何参数 function func2() { console.log(arguments.length); // do something .... }
func2(); // 0 func2('a'); // 1 func2('a', 'b'); // 2 func2('a', 'b', 'c'); // 3
当我们在函数里面定义了3个参数:x, y, z。调用函数的时候只能按顺序传参 function func2(x, y, z) { console.log(x, y, z); // do something .... }
// 如果只传2个参数,只想给到x和z func2(x='a', z='c'); // a c undefined
虽然在调用的时候指定了z=’c’,最终会发现还是按顺序给到了参数y的值。 为了解决这种情况,可以通过 arguments 判断传入参数的个数,于是会看到这种写法 function func2(x, y, z) { if (arguments.length === 2) { // 实际拿到的参数是x和y,z为undefined z = y; // 把y赋给z y = null; // y变为默认值 } console.log(x, y, z); // do something .... }
// 如果只传2个参数,只想给到x和z func2('a', 'c'); // a null c func2('a', 'b', 'c'); // a b c
还有一种场景,当我们函数定义了2个参数,但是传参给了5个,此时arguments可以拿到多余的参数 function fun3(x, y) { var i, rest = []; if (arguments.length > 2) { for (i = 2; i<arguments.length; i++) { rest.push(arguments[i]); } } console.log(x, y, rest);
}
fun3('a', 'b'); // a b [] fun3('a', 'b', 'c', 'd', 'e'); //a b ['c', 'd', 'e']
在这里可以通过arguments 拿到多余的参数,很显然这种方式并不优雅,于是ES6标准引入了rest参数。 rest 参数ES6标准引入了rest参数,就是为了解决函数定义的时候传不定长参数,接收剩余参数的问题. 这里rest参数是一个真正的数组,... 可以将一个数组转为用逗号分隔的参数序列,于是在定义函数的时候可以接收不定长传参。 function fun3(x, y, ...rest) { console.log(x, y, rest); }
fun3('a', 'b'); // a b [] fun3('a', 'b', 'c', 'd', 'e'); //a b ['c', 'd', 'e']
需注意: rest参数只能写在最后,前面用… 标识,从运行结果可知,传入的参数先绑定x 、y ,多余的参数以数组传给变量rest ,所以,不再需要arguments 我们就获取了全部参数。
|