📕 重学JavaScript:函数的入参(arguments)是什么类型?我能怎么使用它?

简介: arguments是一个特殊的对象👏,它可以存储我们给函数传递的所有参数。只不过它的属性从0开始排,依次为0,1,2…最后还有callee和length属性。我们也把这样的对象称为类数组。

📕 重学JavaScript:函数的入参(arguments)是什么类型?我能怎么使用它?

嗨,大家好!这里是道长王jj~ 🎩🧙‍♂️

平时我们写代码的时候,有没有想到过这样的问题:🤔

  1. 类似于func01(num, name){} 中的 num, name 到底是什么类型的呢?它有可能是一个数组在函数中运行吗?
  2. 我们搞懂它有什么意义?

其实,这两个问题都和arguments有关。arguments是一个特殊的对象👏,它可以存储我们给函数传递的所有参数。只不过它的属性从0开始排,依次为0,1,2…最后还有callee和length属性。我们也把这样的对象称为类数组。

arguments可以让我们在函数里面访问这些参数,不管有多少个,也不管有没有名字。arguments就像一个收纳盒,可以装下所有的参数📦

常见的类数组还有:

  • getElementByTagName 获得的 HTMLCollection
  • querySlector获得的nodeList

它们和数组长得很像,但是不能用数组的方法,比如push或pop。类数组就像一个假冒的数组,长得像但是不能用数组的方法😅

所以,它和数组的性质是完全不一样的呢❗️

❓ 既然不是数组,那我怎么样去操作它呢?

既然是类数组,那我们只要把它们转化成数组格式,即可使用操作数组的技巧使用它们了!

如果用这种思路的话,那就好办了,其实有几种常见的方法可以转化这种类数组对象。

方法一:Array.prototype.slice.call()

利用slice方法可以从一个类数组对象中返回一个新的数组。我们只需要把类数组对象作为call方法的第一个参数传入,就可以得到一个真正的数组。

function sum(a, b) {
   
  let args = Array.prototype.slice.call(arguments);
  console.log(args.reduce((sum, cur) => sum + cur));//args可以调用数组原生的方法啦
}
sum(1, 2);//3

方法二:Array.from()

这个方法是ES6新增的一个方法,它可以把一个类数组对象或者可迭代对象转换成一个新的数组。我们只需要把类数组对象作为参数传入,就可以得到一个真正的数组。

function sum(a, b) {
   
  let args = Array.from(arguments);
  console.log(args.reduce((sum, cur) => sum + cur));//args可以调用数组原生的方法啦
}
sum(1, 2);//3

这种方法也可以用来转换Set和Map哦!👏

方法三:ES6展开运算符

这个方法也是ES6新增的一个语法糖,它可以把一个类数组对象或者可迭代对象展开成一个新的数组。我们只需要在类数组对象前面加上三个点(…),就可以得到一个真正的数组。看看下面的例子:

function sum(a, b) {
   
  let args = [...arguments];
  console.log(args.reduce((sum, cur) => sum + cur));//args可以调用数组原生的方法啦
}
sum(1, 2);//3

展开运算符不仅可以用在函数参数里,还可以用在其他地方,比如合并两个数组或者复制一个数组。😎

方法四:利用concat+apply

利用concat方法可以把两个数组拼接成一个新的数组,和apply方法可以把第二个参数展开,就像把一个鸡蛋打碎一样🥚。我们只需要把一个空数组和类数组对象作为apply方法的参数传入,就可以得到一个真正的数组。看看下面的例子:

function sum(a, b) {
   
  let args = Array.prototype.concat.apply([], arguments);//apply方法会把第二个参数展开
  console.log(args.reduce((sum, cur) => sum + cur));//args可以调用数组原生的方法啦
}
sum(1, 2);//3

方法五:直接暴力循环

最原始的方法就是再创建一个数组,用for循环把类数组的每个属性值放在里面,过于简单,就不浪费篇幅了😜


🎉 你觉得怎么样?这篇文章可以给你带来帮助吗?如果你有任何疑问或者想进一步讨论相关话题,请随时发表评论分享您的想法,让其他人从中受益。🚀✨

目录
相关文章
|
9天前
|
JavaScript 前端开发 安全
JavaScript函数详解
JavaScript函数的详细解析,包括函数的定义和调用方式(如一般格式、匿名函数、构造函数、自调用函数、箭头函数和严格模式)、函数参数(arguments对象、可变参数、默认参数值)、闭包的概念和应用实例。
JavaScript函数详解
|
8天前
|
JavaScript 前端开发
JavaScript函数可以返回两个值
JavaScript函数可以返回两个值
|
8天前
|
自然语言处理 分布式计算 JavaScript
JavaScript函数
JavaScript函数
|
11天前
|
JSON JavaScript 数据格式
手写JS实现深拷贝函数
本文介绍了如何实现一个深拷贝函数`deepClone`,该函数可以处理对象和数组的深拷贝,确保拷贝后的对象与原始对象在内存中互不干扰。通过递归处理对象的键值对和数组的元素,实现了深度复制,同时保留了函数类型的值和基础类型的值。
15 3
|
9天前
|
缓存 JavaScript 前端开发
了解js基础知识中的作用域和闭包以及闭包的一些应用场景,浅析函数柯里化
该文章详细讲解了JavaScript中的作用域、闭包概念及其应用场景,并简要分析了函数柯里化的使用。
了解js基础知识中的作用域和闭包以及闭包的一些应用场景,浅析函数柯里化
|
11天前
|
前端开发 数据可视化 开发者
D3.js 内置的动画函数
D3.js 内置的动画函数
|
12天前
|
JavaScript 前端开发
JavaScript 函数参数
JavaScript 函数参数
23 3
|
12天前
|
存储 JavaScript 前端开发
JavaScript 函数定义
JavaScript 函数定义
17 3
|
11天前
|
JavaScript 前端开发
js防抖函数返回值问题解决方案
本文介绍了如何在JavaScript中创建一个带有返回值的防抖函数,通过结合Promise来实现。这种防抖函数可以在事件触发一定时间后再执行函数,并能处理异步操作的返回值。文章提供了防抖函数的实现代码和如何在实际项目中使用该防抖函数的示例。
16 1
|
11天前
|
JavaScript 前端开发
JS 偏函数、函数柯里化~
该文章介绍了JavaScript中偏函数和函数柯里化的概念、实现方法和使用场景,通过代码示例展示了如何创建预设参数的函数以及如何将多参数函数转换成单参数函数的链式调用。
12 0
JS 偏函数、函数柯里化~
下一篇
无影云桌面