类数组1. 什么是类数组 2. 常见的类数组对象 3.类数组的数据类型 4.arguments应用实例 5.类数组转数组

1. 什么是类数组

JS中存在一种类数组对象，不能直接调用数组对象，但是又和数组比较相似

2. 常见的类数组对象

下面是几种在日常开发中比较常见的类数组，今天我们主要对第一中arguments展开分析。

1. 函数里面的参数arguments
2. 用 getElementsByTagName/ClassName/Name 获得的 HTMLCollection
3. 用 querySelector 获得的 NodeList

3. 类数组的数据类型

类数组是定义在函数之中的一种数据，既然是数据，那么一定是会有数据类型的，接下来我们就看看arguments是怎样的以及它的数据类型是什么吧？

function foo(name,job) {
    console.log(arguments);
    console.log(Object.prototype.toString.call(arguments));
}

foo('江河','前端实习生');
// [Arguments] { '0': '江河', '1': '前端实习生' }
// [object Arguments]

在这我们可以很清晰看到，当我们给函数传参的时候，参数会存在arguments之中，arguments的类型为[object Arguments]并不是Array。同时,可以看到它里面的数据是按照键值对存在，但是键是下标，这就是为什么叫它类数组的原因，是类但是又非常的像数组。

4. arguments应用实例

当我们可以随意拿到函数中的参数的时候，我们是可以将其用来做许许多多的操作的，比如手写一个add函数，如下：

function add() {
    let count = 0;
    for (let i = 0; i < arguments.length; i++){
        count += arguments[i];
    }
    console.log(count);
    return count;
}

add(1, 2, 3, 4, 5); //15

我们在这在函数内应用arguments拿到传过来的值，然后逐个取出相加，而且我们的操作手法和数组是极其相似，所以类数组是不是越来越像数组了呀？加下来我们一起看看如何吧类数组转换成数组吧。

5. 类数组转数组

1. slice

function foo(name, job) {
    let args = Array.prototype.slice.call(arguments);
    console.log(args);
}

foo('江河', '前端实习生');  // [ '江河', '前端实习生' ]

在这我们可以很清楚的看到，借用Array原型链上的方法直接吧arguments转换成了数组，其原理也是很简单借用一个就可以轻松实现。

2. ES6展开运算符

function foo(name, job) {
    let args = [...arguments]
    console.log(args);
}

foo('江河', '前端实习生');  // [ '江河', '前端实习生' ]

展开运算符yyds

写在最后

类数组的操作和类数组转换成数组的方法可以说是非常非常之多的，在这我也只是进行一个抛砖引玉的作用，大家觉得有什么比较实用的操作和好的转换方法欢迎留言互动！