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开发者知识体系中不可或缺的一环。

相关推荐
2501_9209317013 分钟前
React Native鸿蒙跨平台医疗健康类的血压记录,包括收缩压、舒张压、心率、日期、时间、备注和状态
javascript·react native·react.js·ecmascript·harmonyos
落霞的思绪29 分钟前
配置React和React-dom为CDN引入
前端·react.js·前端框架
Hacker_Z&Q30 分钟前
CSS 笔记2 (属性)
前端·css·笔记
Anastasiozzzz38 分钟前
LeetCode Hot100 295. 数据流的中位数 MedianFinder
java·服务器·前端
橙露1 小时前
React Hooks 深度解析:从基础使用到自定义 Hooks 的封装技巧
javascript·react.js·ecmascript
Exquisite.1 小时前
Nginx
服务器·前端·nginx
2501_920931701 小时前
React Native鸿蒙跨平台使用useState管理健康记录和过滤状态,支持多种健康数据类型(血压、体重等)并实现按类型过滤功能
javascript·react native·react.js·ecmascript·harmonyos
打小就很皮...1 小时前
dnd-kit 实现表格拖拽排序
前端·react.js·表格拖拽·dnd-kit
Ulyanov2 小时前
从静态到沉浸:打造惊艳的Web技术发展历程3D时间轴
前端·javascript·html5·gui开发
打小就很皮...2 小时前
React 19 + Vite 6 + SWC 构建优化实践
前端·react.js·vite·swc