详解JavaScript中Arguments对象用途


Posted in Javascript onAugust 30, 2021

在实际开发中,Arguments 对象非常有用。灵活使用 Arguments 对象,可以提升使用函数的灵活性,增强函数在抽象编程中的适应能力和纠错能力。

JavaScript 中 Arguments 对象的用途总结。

前言

相信我们很多人在代码开发的过程中都使用到过一个特殊的对象 —— Arguments 对象。

在实际开发中,Arguments 对象非常有用。灵活使用 Arguments 对象,可以提升使用函数的灵活性,增强函数在抽象编程中的适应能力和纠错能力。

那么 Arguments 对象到底该怎么用呢?今天我们就来总结一下。

详解JavaScript中Arguments对象用途

Arguments 的基本概念

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

详解JavaScript中Arguments对象用途

Arguments 是个类似数组但不是数组的对象,说它类似数组是因为其具备数组相同的访问性质及方式,能够由 arguments[n] 来访问对应的单个参数的值,并拥有数组长度属性 length。还有就是 Arguments 对象存储的是实际传递给函数的参数,而不局限于函数声明所定义的参数列表,而且不能显式创建 Arguments 对象。

下面是一个简单使用 Arguments 的示例:

function func1(a, b, c) {
    console.log(arguments[0]);
    console.log(arguments[1]);
    console.log(arguments[2]);
}

func1(1, 2, 3);
// 1
// 2
// 3

我们可以在函数内部,直接通过 arguments 来获取所传入的参数集合,然后以数组的获值形式获取对应位置的参数值。

Arguments 的作用

作为 JavaScript 中的一个特殊对象,Arguments 具有哪些用途,或者说是该怎么用呢?

获取实参和形参的个数

使用 arguments.length 属性可以获取函数的实参个数。使用函数对象的 length 属性可以获取函数的形参个数,该属性为只读属性,在函数体内、体外都可以使用。

下面示例设计一个 checkArg() 函数,用来检测一个函数的形参和实参是否一致,如果不一致则抛出异常。

function checkArg(a) {
    //检测函数实参与形参是否一致
    if (a.length != a.callee.length)
        //如果实参与形参个数不同,则抛出错误
        throw new Error("实参和形参不一致");
}

function f(a, b) {
    //求两个数的平均值
    checkArg(arguments); //根据arguments来检测函数实参和形参是否一致
    return ((a * 1 ? a : 0) + (b * 1 ? b : 0)) / 2; //返回平均值
}
console.log(f(6)); //抛出异常。调用函数f,传入一个参数

修改实参值

在下面示例中使用 for 循环遍历 arguments 对象,然后把循环变量的值传入 arguments,以便于改变实参值。

function f() {
    for (let i = 0; i < arguments.length; i++) {  //遍历arguments对象
        arguments[i] = i;  //修改每个实参的值
        console.log(arguments[i]);  //提示修改的实参值
    }
}

f(3, 3, 6);  //返回提示0、1、2,而不是3、3、6

改变实参的个数

通过修改 length 属性值,也可以改变函数的实参个数。当 length 属性值增大时,则增加的实参值为 undefined;如果 length 属性值减小,则会丢弃 length 长度值之后的实参值。

function f() {
    arguments.length = 2; //修改arguments属性对象的length属性值
    for (let i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
}

f(3, 3, 6); //返回提示3、3

检测参数合法性

在下面示例中,使用 arguments.callee 获取匿名函数,然后通过函数的 length 属性获取函数形参个数,最后比较实参个数与形参个数,以检测用户传递的参数是否符合要求。

function f(x,y,z) {
    let a = arguments.length;  //获取函数实参的个数
    let b = arguments.callee.length;  //获取函数形参的个数
    if (a != b){  //如果实参和形参个数不相等,则提示错误信息
        throw new Error("传递的参数不匹配");
    }else {  //如果实参和形参个数相同,则返回它们的和
        return x + y + z;
    }
}

console.log(f(3,4,5));  //返回值12

arguments.callee 等价于函数名,在上面示例中,arguments.callee 等于 f。

函数的参数个数不确定时,用于访问调用函数的实参值

如果函数的参数个数不确定,或者函数的参数个数很多,而又不想逐一定义每一个形参,则可以省略定义参数,直接在函数体内使用 Arguments 对象来访问调用函数的实参值。

下面示例定义一个求平均值的函数,该函数借助 arguments 对象来计算参数的平均值。在调用函数时,可以传入任意多个参数。

function avg() {
    //求平均值
    let num = 0;
    let length = 0; //声明并初始化临时变量
    for (let i = 0; i < arguments.length; i++) {
        //遍历所有实参
        if (typeof arguments[i] != "number") {
            //如果参数不是数值
            continue; //则忽略该参数值
        }
        num += arguments[i]; //计算参数的数值之和
        length++; //计算参与和运算的参数个数
    }

    return num / length; //返回平均值
}

console.log(avg(1, 2, 3, 4)); //返回2.5
console.log(avg(1, 2, "3", 4)); //返回2.3333333333333335

遍历或访问实参的值

arguments 对象是伪类数组,不是数组,可以通过 length 属性和中括号语法来遍历或访问实参的值。不过,通过动态调用的方法,也可以使用数组的方法,如 push、pop、slice 等。

下面示例使用动态调用的方法,让 arguments 对象调用数组方法 slice(),可以把函数的参数对象转换为数组。

function f() {
    return [].slice.apply(arguments);
    // 也可以使用如下写法
    // return Array.from(arguments);
    // return [...arguments];
}
console.log(f(1, 2, 3, 4, 5, 6)); //返回[1,2,3,4,5,6]

总结

以上就是对 Arguments 对象实际用途的一些总结,希望我们都能够灵活使用 Arguments,写出诗一样的代码!

到此这篇关于详解JavaScript中Arguments对象用途的文章就介绍到这了,更多相关JavaScript中Arguments对象用途内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
浅析jQuery的链式调用之each函数
Dec 03 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
Aug 01 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
Apr 07 Javascript
js事件绑定快捷键以ctrl+k为例
Sep 30 Javascript
详解vue.js2.0父组件点击触发子组件方法
May 10 Javascript
react配合antd组件实现的管理系统示例代码
Apr 24 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
Dec 03 Javascript
Vue起步(无cli)的啊教程详解
Apr 11 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
这应该是最详细的响应式系统讲解了
Jul 22 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
Nov 05 Javascript
详细谈谈JavaScript中循环之间的差异
Aug 23 #Javascript
javascript代码简写的几种常用方式汇总
Aug 23 #Javascript
vue使用Google Recaptcha验证的实现示例
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 #Vue.js
关于React Native使用axios进行网络请求的方法
Aug 02 #Javascript
vscode中使用npm安装babel的方法
Element实现动态表格的示例代码
You might like
优化NFR之一 --MSSQL Hello Buffer Overflow
2006/10/09 PHP
PHP 中关于ord($str)&amp;gt;0x80的详细说明
2012/09/23 PHP
php生成扇形比例图实例
2013/11/06 PHP
php日历制作代码分享
2014/01/20 PHP
ThinkPHP模板自定义标签使用方法
2014/06/26 PHP
php7 参数、整形及字符串处理机制修改实例分析
2020/05/25 PHP
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
jquery 清空file域示例(兼容个浏览器)
2013/10/11 Javascript
动态加载脚本提升javascript性能
2014/02/24 Javascript
Linux下使用jq友好的打印JSON技巧分享
2014/11/18 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
2015/03/26 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
js手动播放图片实现图片轮播效果
2016/09/17 Javascript
react native与webview通信的示例代码
2017/09/25 Javascript
Vue中使用Sortable的示例代码
2018/04/07 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
2020/12/30 Javascript
vue: WebStorm设置快速编译运行的方法
2018/10/18 Javascript
vue.js实现三级菜单效果
2019/10/19 Javascript
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
python实现自动化上线脚本的示例
2019/07/01 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
基于python解线性矩阵方程(numpy中的matrix类)
2019/10/21 Python
基于 Python 实践感知器分类算法
2021/01/07 Python
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
新东方旗下远程教育网站:新东方在线
2020/03/19 全球购物
学期自我鉴定
2013/11/04 职场文书
医院护士的求职信范文
2013/12/26 职场文书
《会变的花树叶》教学反思
2014/02/10 职场文书
餐厅楼面部长岗位职责范文
2014/02/16 职场文书
群众路线教育党课主持词
2014/04/01 职场文书
协议书的格式
2014/04/23 职场文书
答谢会策划方案
2014/05/12 职场文书
2014各大专业毕业生自我评价
2014/09/17 职场文书
领导班子对照检查材料
2014/09/22 职场文书
django注册用邮箱发送验证码的实现
2021/04/18 Python