类数组是什么？如何转换为数组？

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

类数组作为JS中比较特殊的存在，新手在刚接触到类数组时往往会存在一些疑惑，有哪些类数组的情况？类数组和数组的区别是什么？可以当作数组使用吗？如何把类数组转换为真正的数组？

类数组

JS中类数组主要分为这两类类：

• 函数参数对象arguments，箭头函数没有arguments参数

function fn() {
    console.log(arguments);
}

• 利用querySelectorAll、getElementsByName获取到的NodeList，利用getElementsByTagName、getElementsByClassName获取到的HTMLCollection

html内容：

<ul id="ul">
  <li name="li" class="li">11</li>
  <li name="li" class="li">22</li>
  <li name="li" class="li">33</li>
</ul>

四种类数组的获取方式：

document.querySelectorAll("li");
document.getElementsByTagName('li');
document.getElementsByClassName('li');
document.getElementsByName('li');

类数组&&数组

以arguments为类数组代表和Array进行对比

类数组：

function fn() {
  console.log(arguments); // Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ] 
  console.log(arguments.length); // 2
  console.log(typeof arguments); // object
  console.log(Object.prototype.toString.call(arguments)); // [object Arguments]
}

fn(1, 2);

数组：

const arr = [1, 2];
console.log(arr); // (2) [1, 2]
console.log(arr.length); // 2
console.log(typeof arr); // object
console.log(Object.prototype.toString.call(arr)); // [object Array]

通过上述打印可以看到类数组和数组的共同点和差异：

共同点：

都具备length属性，可以获取其元素个数

差异：

1. 类数组上明显多了一个callee属性，数组上并不存在
2. 类数组不能调用数组的方法，通过下图可知

综上可知不能将类数组当作数组去使用

类数组转数组

既然类数组不能直接使用数组的一些函数，那么在开发的过程中我们有些时候期望拿到类数组之后，将其当作数组使用，可以调用数组的一些函数，那么有哪些方式呢？

借用数组方法

可以使用call、apply改变this指向来调用数组的方法

function fn() {
	console.log(Array.prototype.slice.call(arguments)); // [1, 2]
}

fn(1, 2);

首先借用数组的slice函数，返回的就是一个真正的数组

Array.from

可以利用数组自带的from函数将类数组转换为数组

cosnt arr = Array.from(arguments);

其返回一个数组

扩展运算符

可以如下使用：

const arr = [...arguments]

也可以直接在函数接受参数时使用：

function fn(...args) {}

此时在函数内部args就是一个数组了