类数组作为JS中比较特殊的存在,新手在刚接触到类数组时往往会存在一些疑惑,有哪些类数组的情况?类数组和数组的区别是什么?可以当作数组使用吗?如何把类数组转换为真正的数组?
类数组
JS中类数组主要分为这两类类:
函数参数对象arguments
,箭头函数没有arguments
参数
functionfn(){console.log(arguments);}
利用querySelectorAll
、getElementsByName
获取到的NodeList
,利用getElementsByTagName
、getElementsByClassName
获取到的HTMLCollection
html内容:
<ulid="ul"><liname="li"class="li">11</li><liname="li"class="li">22</li><liname="li"class="li">33</li></ul>
四种类数组的获取方式:
document.querySelectorAll("li");document.getElementsByTagName('li');document.getElementsByClassName('li');document.getElementsByName('li');
类数组&&数组
以arguments
为类数组代表和Array
进行对比
类数组:
functionfn(){console.log(arguments);//Arguments(2)[1,2,callee:ƒ,Symbol(Symbol.iterator):ƒ]console.log(arguments.length);//2console.log(typeofarguments);//objectconsole.log(Object.prototype.toString.call(arguments));//[objectArguments]}fn(1,2);
数组:
constarr=[1,2];console.log(arr);//(2)[1,2]console.log(arr.length);//2console.log(typeofarr);//objectconsole.log(Object.prototype.toString.call(arr));//[objectArray]
通过上述打印可以看到类数组和数组的共同点和差异:
共同点:
都具备length
属性,可以获取其元素个数
差异:
类数组上明显多了一个callee
属性,数组上并不存在
类数组不能调用数组的方法,通过下图可知
综上可知不能将类数组当作数组去使用
类数组转数组
既然类数组不能直接使用数组的一些函数,那么在开发的过程中我们有些时候期望拿到类数组之后,将其当作数组使用,可以调用数组的一些函数,那么有哪些方式呢?
借用数组方法
可以使用call
、apply
改变this
指向来调用数组的方法
functionfn(){console.log(Array.prototype.slice.call(arguments));//[1,2]}fn(1,2);
首先借用数组的slice
函数,返回的就是一个真正的数组
Array.from
可以利用数组自带的from
函数将类数组转换为数组
cosntarr=Array.from(arguments);
其返回一个数组
扩展运算符
可以如下使用:
constarr=[...arguments]
也可以直接在函数接受参数时使用:
functionfn(...args){}
此时在函数内部args
就是一个数组了