阅读 125

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

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

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

类数组

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

  • 函数参数对象arguments,箭头函数没有arguments参数
function fn() {
    console.log(arguments);
}
复制代码
  • 利用querySelectorAllgetElementsByName获取到的NodeList,利用getElementsByTagNamegetElementsByClassName获取到的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. 类数组不能调用数组的方法,通过下图可知

image-20211009123055671.png

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

类数组转数组

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

借用数组方法

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

文章分类
前端
文章标签