你知道 JavaScript 中的 Arguments 对象都有哪些用途吗?
JavaScript 中 Arguments 对象的用途总结。
前言
相信我们很多人在代码开发的过程中都使用到过一个特殊的对象 —— Arguments 对象。
在实际开发中,Arguments 对象非常有用。灵活使用 Arguments 对象,可以提升使用函数的灵活性,增强函数在抽象编程中的适应能力和纠错能力。
那么 Arguments 对象到底该怎么用呢?今天我们就来总结一下。
Arguments 的基本概念
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对象
在js中一切都是对象,连函数也是对象,函数名其实是引用函数定义对象的变量. 1.什么是arguments? 这个函数体内的arguments非常特殊,实际上是所在函数的一个内置类数组对象,可以用数组的 ...
- JavaScript中通过arguments对象实现对象的重载
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JS对象 JavaScript 中的所有事物都是对象,如:字符串、数值、数组、函数等,每个对象带有属性和方法。
什么是对象 JavaScript 中的所有事物都是对象,如:字符串.数值.数组.函数等,每个对象带有属性和方法. 对象的属性:反映该对象某些特定的性质的,如:字符串的长度.图像的长宽等: 对象的方法: ...
- 函数中的 arguments 对象
JavaScript函数具有像数组一样的对象,这些对象称为arguments,与传递给函数的参数相对应.传递给JavaScript函数的所有参数都可以使用arguments对象来引用. 现在我们开始学 ...
- 详解javascript中的this对象
详解javascript中的this对象 前言 Javascript是一门基于对象的动态语言,也就是说,所有东西都是对象,一个很典型的例子就是函数也被视为普通的对象.Javascript可以通过一定的 ...
- JavaScript中的事件对象
JavaScript中的事件对象 JavaScript中的事件对象是非常重要的,恐怕是我们在项目中使用的最多的了.在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有 ...
- 详解JavaScript中的Object对象
Object是在javascript中一个被我们经常使用的类型,而且JS中的所有对象都是继承自Object对象的.虽说我们平时只是简单地使用了Object对象来存储数据,并没有使用到太多其他功能,但是 ...
- Javascript学习1 - Javascript中的类型对象
原文:Javascript学习1 - Javascript中的类型对象 1.1关于Numbers对象. 常用的方法:number.toString() 不用具体介绍,把数字转换为字符串,相应的还有一个 ...
- javascript中所有函数参数都是按值传递
在看<JavaScript高级程序设计>(第三版)的时候,传递参数这一节,里面提到 ECMAScript中所有函数的参数都是按值传递的 它自己的解释是, 把函数外部的值复制给函数内部的参数 ...
随机推荐
- 微信小程序云开发-云存储-获取带图片的商品列表
一.将商品图片上传至云存储 如下图,已准备5张商品图片,并且已经将商品图片上传至云存储 二.数据库表添加图片字段 在数据库表goods添加字段image,该字段用来存储图片的url信息 image在 ...
- 本地项目的npm安装方法
有些node项目如一些工具类的项目,安装以后通过命令行执行其功能.但是而对于本地自建的项目如何通过npm安装,然后通过命令行(项目定义了命令行)工具执行命令调用其功能呢? 对于这种情况,笔者主要通过两 ...
- npm 报错 : npm ERR! Maximum call stack size exceeded
解决方法:https://blog.csdn.net/caijunfen/article/details/81009797
- Flask之 Marshmallow 踩坑实录
1.Marshmallow.ModelSchema 报错 AttributeError: 'Marshmallow' object has no attribute 'ModelSchema' `fr ...
- []*T *[]T *[]*T 傻傻分不清楚
前言 作为一个 Go 语言新手,看到一切"诡异"的代码都会感到好奇:比如我最近看到的几个方法:伪代码如下: func FindA() ([]*T,error) { } func F ...
- PWA渐进式web应用
PWA(Progressive Web App)是一种理念,使用多种技术来增强web app的功能,可以让网站的体验变得更好,能够模拟一些原生功能,比如通知推送.在移动端利用标准化框架,让网页应用呈现 ...
- 只是想虐下春丽,一不当心玩了下serverless...感觉还不错哟!
事情是这样的-- 前天下午天太热,我在家看电视,换台突然就看到了正在播<西游记>,窗外蝉声特别响,我一下就有种穿越回小学暑假的感觉.当时,我就特别想把我那台小霸王翻出来,玩两盘街霸--虐一 ...
- 3.python编程与计算机的关系,如何执行python文件
上一节预告了这一章想讲如何不停地和世界打招呼,这涉及到编程中一个重要的概念:循环. 但经过了两周断更后细想了一下,不行,我们得对上一章进行补充,而且这个补充非常关键!也印证了上一章所说的: 上一节章很 ...
- 天梯赛 L2-008 最长对称子串
题目是PTA的天梯赛练习集中的L2-008 https://pintia.cn/problem-sets/994805046380707840/problems/994805067704549376 ...
- SaToken学习笔记-03
SaToken学习笔记-03 如果排版有问题,请点击:传送门 核心思想 所谓权限验证,验证的核心就是一个账号是否拥有一个权限码 有,就让你通过.没有?那么禁止访问! 再往底了说,就是每个账号都会拥有一 ...