前端面试 JavaScript— 函数的arguments为什么不是数组？如何转化成数组？

Posted 2022-01-18 aiguangyuan

因为arguments本身并不能调用数组方法，它是一个另外一种对象类型，只不过属性从0开始排，依次为0，1，2...最后还有 callee 和length属性，我们也把这样的对象称为类数组。

常见的类数组还有：

1. 用getElementsByTagName/ClassName()获得的htmlCollection；

2. 用querySelector获得的nodeList。

那这导致很多数组的方法就不能用了，必要时需要我们将它们转换成数组，有哪些方法呢？

Array.prototype.slice.call()

function sum(a, b) 
    // 将类数组转换为数组
    let args = Array.prototype.slice.call(arguments);
    // 对转换为数组的方法调用累加
    let num = args.reduce((sum,cur) =>
        return sum+cur;
    )
    console.log(num);
;
sum(1,2,3,4,5,6);
// 21

Array.from()

function sum(a, b) 
    // 将类数组转换为数组
    let args=Array.from(arguments)
    // 对转换为数组的方法调用累加
    let num = args.reduce((sum,cur) =>
        return sum+cur;
    )
    console.log(num);
;
sum(1,2,3,4,5,6);
// 21

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

ES6展开运算符

function sum(a, b) 
    // 将类数组转换为数组
    let args= [...arguments];
    // 对转换为数组的方法调用累加
    let num = args.reduce((sum,cur) =>
        return sum+cur;
    )
    console.log(num);
;
sum(1,2,3,4,5,6);
// 21

利用concat+apply

function sum(a, b) 
    // 将类数组转换为数组
    // apply方法会把第二个参数展开
    let args=Array.prototype.concat.apply([], arguments);
    // 对转换为数组的方法调用累加
    let num = args.reduce((sum,cur) =>
        return sum+cur;
    )
    console.log(num);
;
sum(1,2,3,4,5,6);
// 21

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