一、arguments对象

01、函数里的arguments

对于一个普通函数fn，函数内部内置了一个 arguments 对象，当用于接收实参的形参个数不确定时，可以用arguments接收。

function fn(){
    console.log(arguments) 
    // [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
}
fn(1,2,3)

arguments展示形式是一个伪数组。

02、什么是伪数组

伪数组也叫类数组，并不是真正意义上的数组，是一组具有数组的length属性以及下标，但是不具有数组的push、pop、reverse等方法的对象。

01. 具有length属性和下标：

function fn(){
    console.log(arguments.length) // 3
    console.log(arguments[1]) // 2
}
fn(1,2,3)

1. 可以遍历

function fn() {
    for (var i = 0; i < arguments.length; i++) {
        console.log(arguments[i]) // 1 2 3
    }
}
fn(1, 2, 3)

1. 不具有数组的 push , pop等方法

function fn() {
    arguments.push(4) 
    // Uncaught TypeError: arguments.push is not a function
}
fn(1, 2, 3)

03、箭头函数里的arguments

箭头函数里不能使用arguments获取参数列表。

var fn = (a,b,c) => {
    console.log(arguments) // 并不是参数列表
}
fn(1,2,3)

但是可以使用剩余参数获取参数列表。

二、剩余参数

01、简介

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

function fn(...arguments) {
    console.log(arguments) // [1,2,3]
 }
 fn(1, 2, 3)

02、可以与扩展运算符一起使用

function fn(a, ...arguments) {
    console.log(a) // a
    console.log(arguments) // [2,3]
 }
 fn(1, 2, 3)

03、剩余参数是真正的 Array

具有伪数组不具有的pop、push、sort方法等。

function fn(...arguments) {
    return arguments.sort()
}
console.log(fn(3, 2, 1)); //  [1, 2, 3]

三、伪数组转真正的数组

01、Array.prototype.slice.call()

function fn() {
    var args = Array.prototype.slice.call(arguments);
    args.push(4)
    return args
}
console.log(fn(1,2,3)); // [1,2,3,4]

02、Array.from()

function fn() {
    var args = Array.from(arguments);
    args.push(4)
    return args
}
console.log(fn(1,2,3)); // [1,2,3,4]

03、结构赋值

function fn() {
    let arr = [...arguments]
    console.log(arr)
}
console.log(fn(1, 2, 3)); //  [1, 2, 3]

四、剩余参数和arguments对象之间的区别

1. 剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的所有实参。

2. 剩余参数是真正的数组，arguments对象不是一个真正的数组。

3. arguments对象还有一些附加的属性。

arguments对象的属性：

callee: ƒ fn()
length: 3
Symbol(Symbol.iterator): ƒ values()
arguments: (...)
caller: (...)
length: 0
name: "values"
__proto__: ƒ ()
[[Scopes]]: Scopes[0]
__proto__: Object

END

下一篇：7种不同函数内的this指向问题

推荐阅读：

1. 高阶函数(Higher-order function)

2. 闭包（closure）

剩余参数和arguments对象