伪数组(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];