JavaScript中的Arguments对象

简介: JavaScript中的Arguments对象

JavaScript中的Arguments对象

arguments是一个对应于传递给函数的参数的类数组(array-like)对象。

arguments对象是所有(非箭头)函数中都可用的局部变量。你可以使用arguments对象在函数中引用函数的参数。此对象包含传递给函数的每个参数,第一个参数在索引0处。


1.arguments 的基本使用

对arguments对象常见的操作有三种:


获取参数的长度

根据索引值获取某一个参数

callee获取当前arguments所在的函数

示例代码如下:

function foo (num1, num2, num3) {
    // 类数组对象中(长的像是一个数组, 本质上是一个对象): arguments
    console.log(arguments) // [Arguments] { '0': 10, '1': 20, '2': 30, '3': 40, '4': 50 }
    // 常见的对arguments的操作是三个
    // 1.获取参数的长度
    console.log(arguments.length) // 5
    // 2.根据索引值获取某一个参数
    console.log(arguments[2]) // 30
    console.log(arguments[3]) // 40
    console.log(arguments[4]) // 50
    // 3.callee获取当前arguments所在的函数
    console.log(arguments.callee) // 打印结果如下图所示
    // arguments.callee()
}
foo(10, 20, 30, 40, 50)

console.log(arguments.callee)打印结果:

2.arguments转array数组

arguments对象不是一个 Array 。它类似于Array,但除了length属性和索引元素之外没有任何Array属性。例如,它没有 pop 方法。但是它可以被转换为一个真正的Array:

function foo(num1, num2) {
  // 方法一:自己遍历
  // var newArr = []
  // for (var i = 0; i < arguments.length; i++) {
  //   newArr.push(arguments[i] * 10)
  // }
  // console.log(newArr)
  // 方法二:Array.prototype.slice将arguments转成array
  var newArr2 = Array.prototype.slice.call(arguments)
  console.log(newArr2)
  // 也可以直接使用一个空数组[]
  var newArr3 = [].slice.call(arguments)
  console.log(newArr3)
  // 方法三:ES6的语法
  var newArr4 = Array.from(arguments)
  console.log(newArr4)
  // 也可以使用展开运算符(spread operator)
  var newArr5 = [...arguments]
  console.log(newArr5)
}
foo(10, 20, 30, 40, 50)

3.箭头函数中没有arguments

之前在学习this的时候,就提到了 箭头函数没有this与arguments。接下来就用案例测试一下:

// 1.案例一: 由于箭头函数中没有arguments,JS会和this一样向他的外层作用域去找,此处的上一层作用域为window对象,在浏览器中环境下是没有arguments的,会提示报错;  但是在node环境下是有arguments的,有兴趣可自行打印看看
var foo1 = () => {
    console.log(arguments)
}
foo1()
// 2.案例二:
function foo2 () {
    var bar = () => {
        console.log(arguments) // 上层作用域为foo2
    }
    return bar
}
var fn = foo2(123)
fn() // [Arguments] { '0': 123 }

4.扩展 —— ES6 剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组。

语法:

function(a, b, ...theArgs) {
  // ...
}

描述:如果函数的最后一个命名参数以…为前缀,则它将成为一个由剩余参数组成的真数组,其中从0(包括)到theArgs.length(排除)的元素由传递给函数的实际参数提供。

示例代码如下:

// rest parameters
function sum (num1, ...nums) {
    console.log(nums)
}
sum(10) // []
sum(10, 20) // [ 20 ]
sum(10, 20, 30)// [ 20, 30 ]
sum(10, 20, 30, 40, 50) // [ 20, 30, 40, 50 ]
目录
相关文章
|
8天前
|
JavaScript
JS 获取对象数据类型的键值对的键与值
JS 获取对象数据类型的键值对的键与值
|
18天前
|
JavaScript 前端开发
Math对象:JavaScript中的数学工具
Math对象:JavaScript中的数学工具
27 1
N..
|
25天前
|
存储 JavaScript 前端开发
JavaScript中的对象
JavaScript中的对象
N..
10 0
|
1月前
|
JavaScript 前端开发
JavaScript对象系列(菜菜出品,必看!!!)
JavaScript对象系列(菜菜出品,必看!!!)
|
2月前
|
JavaScript 前端开发
JS将两个数组和合并成数组包对象格式的方法
JS将两个数组和合并成数组包对象格式的方法
25 0
|
11天前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
1月前
|
存储 JavaScript 前端开发
在JavaScript中,对象和数组是如何进行扩展的?
在JavaScript中,对象和数组是如何进行扩展的?
22 4
|
3天前
|
JavaScript
【Js】检查Date对象是否为Invalid Date
【Js】检查Date对象是否为Invalid Date
7 0
|
4天前
|
存储 JavaScript 前端开发
JavaScript的引用数据类型主要包括对象
【4月更文挑战第16天】JavaScript的引用数据类型主要包括对象
16 4
|
8天前
|
JavaScript
js 字符串String转对象Object
该代码示例展示了如何将一个以逗号分隔的字符串(`&#39;1.2,2,3,4,5&#39;`)转换为对象数组。通过使用`split(&#39;,&#39;)`分割字符串并`map(parseFloat)`处理每个元素,将字符串转换成浮点数数组,最终得到一个对象数组,其类型为`object`。