详解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代码
Aug 13 Javascript
很全的显示阴历(农历)日期的js代码
Jan 01 Javascript
json格式的时间显示为正常年月日的方法
Sep 08 Javascript
Node.js开源应用框架HapiJS介绍
Jan 14 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
Jun 15 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
Jun 13 Javascript
Bootstrap table使用方法总结
May 10 Javascript
关于Bootstrap按钮组件消除黄框的方法
May 19 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
Jun 29 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
Jul 12 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
Sep 14 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
Apr 30 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 at(@)符号的用法简介
2009/07/11 PHP
php使浏览器直接下载pdf文件的方法
2013/11/15 PHP
php全角字符转换为半角函数
2014/02/07 PHP
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
PHP创建自己的Composer包方法
2018/04/09 PHP
laravel框架查询数据集转为数组的两种方法
2019/10/10 PHP
js验证模型自我实现的具体方法
2013/06/21 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
JavaScript简单获取系统当前时间完整示例
2016/08/02 Javascript
Bootstrap基本插件学习笔记之按钮(21)
2016/12/08 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
JavaScript中校验银行卡号的实现代码
2016/12/19 Javascript
jQuery超简单遮罩层实现方法示例
2018/09/06 jQuery
vue生命周期和react生命周期对比【推荐】
2018/09/19 Javascript
js实现移动端tab切换时下划线滑动效果
2019/09/08 Javascript
jQuery操作选中select下拉框的值代码实例
2020/02/07 jQuery
Python的Flask框架中实现登录用户的个人资料和头像的教程
2015/04/20 Python
Python的函数的一些高阶特性
2015/04/27 Python
Python中的迭代器与生成器高级用法解析
2016/06/28 Python
Python操作word常见方法示例【win32com与docx模块】
2018/07/17 Python
python的pip安装以及使用教程
2018/09/18 Python
python logging模块的使用总结
2019/07/09 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
探索HTML5本地存储功能运用技巧
2016/03/02 HTML / CSS
英国香水店:The Perfume Shop
2017/03/27 全球购物
美国第二大连锁书店:Books-A-Million
2017/12/28 全球购物
澳大利亚优质葡萄酒专家:Vintage Cellars
2019/01/08 全球购物
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
小饰品店的创业计划书范文
2013/12/28 职场文书
小学运动会班级口号
2014/06/09 职场文书
医学会议开幕词
2016/03/03 职场文书
python解决12306登录验证码的实现
2021/04/18 Python
拒绝盗图!教你怎么用python给图片加水印
2021/06/04 Python
Windows Server 2016服务器用户管理及远程授权图文教程
2022/08/14 Servers