什么是伪数组和类数组？

伪数组（Pseudo-array）和类数组（Array-like）是描述具有类似数组结构的对象的术语，虽然它们并不是真正的数组。它们通常具有下列特性：

伪数组（Pseudo-array）

伪数组指的是一种对象，它看起来像数组，因为它具有索引属性和 length 属性，但并不具备数组的所有方法（如 push, pop, forEach）。伪数组的关键特征包括：

• 索引属性：对象的属性名是数字，通常从0开始递增。
• length 属性：包含一个表示对象元素个数的 length 属性。

类数组（Array-like）

类数组是指任何具有 length 属性和索引属性的对象，这些对象看起来像数组，但并不真正是数组。类数组对象可以是：

• HTMLCollection：例如，document.getElementsByTagName() 返回的对象。
• NodeList：例如，document.querySelectorAll() 返回的对象。
• 函数的 arguments 对象：函数内部的 arguments 对象也是类数组。

示例

HTMLCollection（类数组）：

const elements = document.getElementsByTagName("div");
console.log(elements instanceof Array); // false
console.log(elements.length); // 结果为 div 元素的数量
console.log(elements[0]); // 第一个 div 元素

函数的 arguments 对象（伪数组）：

function example() {
  console.log(arguments instanceof Array); // false
  console.log(arguments.length); // 参数个数
  console.log(arguments[0]); // 第一个参数
}
example(1, 2, 3);

区别

• 伪数组：

  • 具备数组的外观（索引和 length 属性），但不具备数组的方法。
  • 例如，arguments 对象。

• 类数组：

  • 具备 length 属性和数值索引属性，但不具备数组的方法。
  • 例如，document.getElementsByTagName() 返回的对象。

转换为真正的数组

可以使用 Array.from() 或扩展运算符（spread operator）将伪数组或类数组转换为真正的数组：

使用 Array.from()：

const array = Array.from(arguments);

使用扩展运算符：

const array = [...arguments];