首页>>前端>>JavaScript->类数组是什么?如何转换为数组?

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

时间:2023-11-29 本站 点击:0

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

类数组

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

函数参数对象arguments,箭头函数没有arguments参数

functionfn(){console.log(arguments);}

利用querySelectorAllgetElementsByName获取到的NodeList,利用getElementsByTagNamegetElementsByClassName获取到的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属性,数组上并不存在

类数组不能调用数组的方法,通过下图可知

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

类数组转数组

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

借用数组方法

可以使用callapply改变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就是一个数组了


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:/JavaScript/701.html