js 類數組arguments詳解

arguments並不是一個真正的數組，而是一個“類似數組（array-like）”的對象；

就像下面的這段輸出，就是典型的類數組對象：

[12, 23, callee: ƒ, Symbol(Symbol.iterator): ƒ]

 

一、類數組 VS 數組

相同點：

• 都可用下標訪問每個元素
• 都有length屬性

不同點：

• 數組對象的類型是Array，類數組對象的類型是Object；
• 類數組對象不能直接調用數組API；
• 數組遍歷可以用for in和for循環，類數組只能用for循環遍歷；

function calc(){
    console.log(arguments);        // ["sky", "moon", callee: ƒ, Symbol(Symbol.iterator): ƒ]
    console.log(arguments[0]);    // sky
    console.log(arguments.length);    // 2
    // arguments.pop();   // 報錯，arguments.pop is not a function
}

calc('sky', 'moon');

 

類數組對象轉為數組對象方法： Array.prototype.slice.call ( arguments );

function calc(){
    var newArr = Array.prototype.slice.call(arguments);
    newArr.pop();    
    console.log(newArr);    // ["sky"]
}

calc('sky', 'moon');

 

二、類數組的用法

1、實現重載(overload)：當函數的參數個數不明確時，函數體根據參數的不同進行相應處理；

比如我們要實現：一個參數時，做乘法運算；二個參數時，做加法運算；

看下面代碼，我們可以這樣實現：

// 實現重載(overload)
function calc(){
    //傳1個參數，求平方
    if(arguments.length == 1){
        return arguments[0] * arguments[0];  
    }
    //傳2個參數，求和
    else if(arguments.length == 2){
        return arguments[0] + arguments[1];
    }
}
console.log(calc(5));//25
console.log(calc(12,23));//35

 

2、實現遞歸：在函數內部反復的調用函數本身

首先我們用最原始的方法，實現數字的疊加

function calc(num){
    if(num <= 0){
        return 0;
    }else{
        return num += calc(num - 1);
    }
}

console.log(calc(3));    // 6

 

然后我們用類數組來實現同樣的功能：

arguments.callee：返回當前函數本身

function calc(num){
    if(num <= 0){
        return 0;
    }else{
        return num += arguments.callee(num - 1);
    }
}
console.log(calc(3));  // 6

 

下面舉個栗子，來說明這兩種調用的一點小區別：

如果寫成 return num += calc(num - 1) 會報錯；原因很簡單，當執行calc = null 后，calc已經不是一個函數；

但是寫成 return num += arguments.callee(num - 1) 不會報錯；因為arguments.callee指的是“當前函數”，並不是“calc”

function calc(num){
    console.log(arguments);
    if(num <= 0){
        return 0;
    }else{
        return num += arguments.callee(num - 1);
        // return num += calc(num - 1);  // 報錯 Uncaught TypeError: calc is not a function
    }
}
var result = calc;
calc = null;
console.log(result(3));

 

注意： arguments.callee的用法在嚴格模式下是不允許的；

Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them

"use strict";
function calc(num){
    if(num <= 0){
        return 0;
    }else{
        return num += arguments.callee(num - 1);
    }
}
console.log(calc(3));