HTML5学堂-码匠 HTML5学堂

您当前位于:JavaScript基础 ——> JavaScript | 详细讲解函数arguments知识

JavaScript | 详细讲解函数arguments知识

2015/07/05 11:23:50 | 作者:HTML5学堂(码匠) | 分类:JavaScript基础 | 关键词:arguments,函数,形参,实参

说说arguments

HTML5学堂:在JavaScript当中,我们每个开发者都在接触着函数,但是并不是每个开发者都了解arguments是什么,也都不是很清楚它的用法,今天我们就一起走进这个让初学者有些陌生的东西。

函数的参数

在具体说arguments之前,我们先来看一个实例:当实参和形参数量不符合的时候,是否会出现函数的执行问题,报错呢?

  1. function sum(num, num2) {
  2.     var result = num + num2;
  3.     console.log(result);
  4. }
  5. sum(1, 2);
  6. sum(1);
  7. sum(1, 2, 3);

在上面这段代码中,三次打印出来的值分别是3、NaN、3。并没有出错误。那么此时我们可以了解到的是对于未接收到实参的形参默认为undefined(上面sum(1)对函数的调用就没有传入第二个实参,此时num2这个形参的值为undefined),针对undefined进行数学运算,得到的是NaN。如果实参数量多于形参数量,此时,并不会对函数的运行造成影响。

那么为何要说上面的这个呢?大家想想,我们进行一个求和运算,有时候是不能够确定,让多少个数进行求和运算,如果我们将求和函数封装成上面的这个样子,就只能够进行两个数的求和运算,并没有达到良好的扩展性。想提高扩展性?那么arguments就能够派上用场了。

欢迎沟通交流~HTML5学堂

arguments是什么

arguments是在函数内部以一个类似数组的形式来存储参数的东西,而这个“东西”是对象,不是数组~!

函数在被调用时,传递进去的参数被保存在arguments对象中(再次强调:类似数组的方式),arguments的长度取决于传进函数的参数个数。如果传进的参数少于函数定义接收的个数,那么后面的参数视为未定义(即假设函数接收3个参数,如果只传进2个,那么第3个参数值视为undefined)。如果传进的参数大于函数定义接收的个数,多出来的参数值也会被保存在arguments中,只是在函数执行时,多出来的参数不会被使用。

那么我们使用arguments优化一下我们的sum功能函数代码:

  1. function sum() {
  2.     var result = 0;
  3.     for (var i = 0; i < arguments.length; i++) {
  4.         result += arguments[i];
  5.     };
  6.     console.log(result);    // HTML5学堂提示:此处代码应在测试后删除
  7.     return: result;
  8. }
  9. var a = sum(1, 2);
  10. var b = sum(1);
  11. var c = sum(1, 2, 3);

此时打印出的内容分是3、1、6。这样我们就实现了一个有扩展性的求和函数,而不需要受到参数数量的限制。

arguments“对象”

arguments并非是一个数组,是一个对象。不过它和数组有些类似,可以使用方括号的语法访问它的每一个元素,用length属性来确定传递进来的参数个数。但是,arguments并不支持数组的一系列方法(这也就证明了arguments的本质是一个对象,而非数组)——当然,也可以使用console.log(typeof arguments)进行数据类型的检测。

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端