JS中的argument,你真的会用吗

也许在平常的js编写中,我们很少使用argument,但不妨碍我们了解它的强大之处,在本文我将举出各种例子带大家感受它为方法实现带来的便利。

先简单介绍一下argument

arguments是一个类数组对象,它自动出现在每一个函数内部,包含了调用该函数时传入的所有参数。尽管它看起来像数组,但实际上并不是真正的数组,当我们调用Object.prototype.toString.call()时,返回的值为[object Arguments]。作为一个类数组,它拥有数组的.length属性和索引访问能力,但是如forEachmap等方法它是不拥有的。

使用场景

这是一段 js代码,旨在让初学者更好地了解 argument。

js 复制代码
function add(){
     if(arguments.length>2){
         return arguments;
     }
    }
console.log(add(1,2,3,4))  // 输出:[Arguments] { '0': 1, '1': 2, '2': 3, '3': 4 }

可见输出了一个类似于map的对象,实际前面的便是后面值的下标,可以像数组那样获取对应的值。

实现一个简单的求和方法

我们可以通过下标获取arguments中的值。

js 复制代码
function sum() { 
    let total = 0; 
    for (let i = 0; i < arguments.length; i++) { 
        total += arguments[i];
        }
        return total; 
        } 
        console.log(sum(1, 2, 3)); // 输出 6

在这个方法中我们可以传任意个number,不受参数个数的约束。

扩展

对于上面的方法我们也可以运用rest运算符...来实现

js 复制代码
const add = (...args) => {
    return args.reduce((a,b) => a+b,0)
}
console.log(add(1,2,3));

只需要一句代码就能够完成 。但看到这段代码可能就有掘友会问了,reduce()是什么方法。

reduce()

这是mdn上对reduce()的解释,可见它是属于数组的一个方法,常用于数组内元素的求和,rest运算符就是将输入的实参放在数组中。也正因为有了es6提出的rest运算符...,argument就逐渐淡出我们的使用场景,它可以代替绝大多数argument的使用且更为简洁。

要注意的地方

arguments对象是一个非常特殊的内置对象,它与函数的执行密切相关,所以在使用它的时候也有很多我们需要注意的地方。

  • 性能方面: 频繁访问arguments可能会影响性能,尤其是在一些高性能要求的循环或密集计算场景中,因为访问arguments比直接访问命名参数要慢。
  • 函数嵌套: 当函数嵌套时该注意些什么呢?例如:
js 复制代码
function outerFunction() { 
    console.log(arguments); // 正常显示传入的参数 innerFunction();
function innerFunction() {
    console.log(arguments); // 同样可以访问到外层的arguments 
    } 
}
outerFunction(1, 2, 3); // 输出两次相同的参数列表:[1, 2, 3]

arguments同其它变量一样,遵守作用域规矩,innerFunction被调用时,并没有直接向它传递任何参数。然而,innerFunction能够访问到其外部作用域中的变量和对象,包括 outerFunctionarguments对象,所以这里实际上是访问并打印了外部函数 outerFunctionarguments

  • 箭头函数:箭头函数不绑定自己的arguments,它会捕获其所在上下文的arguments。例如:
js 复制代码
function outerArrowFunction() {
    console.log(arguments); 
    const innerArrowFunction = () => {
      console.log(arguments); 
    };
    
    innerArrowFunction(1,2,3);
  }
  
  outerArrowFunction(4,5,6); // 输出两次相同的参数列表:[4,5,6]

当调用 innerArrowFunction(1,2,3)时,尽管你传递了参数 1, 2, 3innerArrowFunction,但由于箭头函数没有自己的 arguments,它仍然访问的是外部 outerArrowFunctionarguments

结语

本文的精髓在于最后一部分"要注意的地方 ",如有略过的掘友建议回去看一遍。虽然rest运算符的出现让arguments的使用不如往昔那般频繁,但它依然是每位JavaScript开发者知识体系中不可或缺的一环。

相关推荐
Martin -Tang18 分钟前
vite和webpack的区别
前端·webpack·node.js·vite
迷途小码农零零发19 分钟前
解锁微前端的优秀库
前端
王解1 小时前
webpack loader全解析,从入门到精通(10)
前端·webpack·node.js
老码沉思录1 小时前
写给初学者的React Native 全栈开发实战班
javascript·react native·react.js
我不当帕鲁谁当帕鲁1 小时前
arcgis for js实现FeatureLayer图层弹窗展示所有field字段
前端·javascript·arcgis
那一抹阳光多灿烂1 小时前
工程化实战内功修炼测试题
前端·javascript
放逐者-保持本心,方可放逐2 小时前
微信小程序=》基础=》常见问题=》性能总结
前端·微信小程序·小程序·前端框架
毋若成4 小时前
前端三大组件之CSS,三大选择器,游戏网页仿写
前端·css
红中马喽4 小时前
JS学习日记(webAPI—DOM)
开发语言·前端·javascript·笔记·vscode·学习
Black蜡笔小新5 小时前
网页直播/点播播放器EasyPlayer.js播放器OffscreenCanvas这个特性是否需要特殊的环境和硬件支持
前端·javascript·html