详解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 相关文章推荐
Javascript 的addEventListener()及attachEvent()区别分析
May 21 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
Jun 26 Javascript
jQuery中change事件用法实例
Dec 26 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
js插件Jcrop自定义截取图片功能
Oct 14 Javascript
基于JavaScript实现淘宝商品广告效果
Aug 10 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
Jun 14 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
Jun 20 Javascript
VUE+Element环境搭建与安装的方法步骤
Jan 24 Javascript
vue下的@change事件的实现
Oct 25 Javascript
关于React Native 无法链接模拟器的问题
Jun 21 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
PHP学习之整理字符串
2011/04/17 PHP
PHP 获取远程网页内容的代码(fopen,curl已测)
2011/06/06 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
jquery选择器使用详解
2014/04/08 Javascript
js实现图片漂浮效果的方法
2015/03/02 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
2016/04/26 Javascript
详解JavaScript权威指南之对象
2016/09/27 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
Input文本框随着输入内容多少自动延伸的实现
2017/02/15 Javascript
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
Angularjs 1.3 中的$parse实例代码
2017/09/14 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
删除table表格行的实例讲解
2017/09/21 Javascript
vue-music关于Player播放器组件详解
2017/11/28 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
2018/07/18 Javascript
jQuery实现的点击按钮改变样式功能示例
2018/07/21 jQuery
vue prop属性传值与传引用示例
2019/11/13 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
django自带的server 让外网主机访问方法
2018/05/14 Python
python实现一行输入多个值和一行输出多个值的例子
2019/07/16 Python
python计算无向图节点度的实例代码
2019/11/22 Python
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
2016/12/09 HTML / CSS
canvas实现二维码和图片合成的示例代码
2018/08/01 HTML / CSS
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
用C语言实现文件读写操作
2013/10/27 面试题
百度JavaScript笔试题
2015/01/15 面试题
环境科学专业研究生求职信
2013/10/02 职场文书
保险公司年会主持词
2014/03/22 职场文书
高中生操行评语
2014/04/25 职场文书
标准版离职证明书
2014/09/12 职场文书
公司领导班子对照检查材料
2014/09/24 职场文书
JavaScript实现淘宝商品图切换效果
2021/04/29 Javascript