当前位置：首页 > news >正文

前端知识点---伪数组是什么 , 伪数组如何转换为真数组(Javascript)

news 来源：原创 2025/8/6 6:53:49

在这里插入图片描述

伪数组是什么 , 伪数组如何转换为真数组(Javascript)

在 JavaScript 中，伪数组对象是具有类似数组特性的对象，但并不是数组（即不继承 Array.prototype）。这些对象通常有一个 length 属性以及以数字索引为键的属性，但不具有数组的方法，比如 push、pop 等

01 常见伪数组对象

1. arguments 对象

定义：函数内部默认提供的一个类数组对象，包含传递给函数的所有参数。
特点：
有 length 属性，表示参数的数量。
可以通过索引访问参数值。
不具备数组的方法（如 map、filter 等）。

function example() {console.log(arguments); // 类数组对象console.log(arguments[0]); // 第一个参数console.log(arguments.length); // 参数个数
}example(1, 2, 3); // 输出 [Arguments] { '0': 1, '1': 2, '2': 3 }

2. DOM 的 NodeList

定义：如 document.querySelectorAll 返回的结果，是类数组对象，表示匹配的 DOM 节点集合。
特点：
有 length 属性，表示匹配到的元素数量。
可以通过索引访问节点。
在某些环境中（如现代浏览器），支持部分数组方法（如 forEach）。

const elements = document.querySelectorAll('div');
console.log(elements); // NodeList(类数组)
console.log(elements[0]); // 第一个匹配到的 div 元素
console.log(elements.length); // div 元素的数量

3. HTMLCollection

定义：通过 document.getElementsByTagName或 document.getElementsByClassName返回的集合。
特点：
有 length 属性。
可以通过索引访问节点。
不支持数组方法。

const elements = document.getElementsByTagName('p');
console.log(elements); // HTMLCollection
console.log(elements[0]); // 第一个 <p> 元素
console.log(elements.length); // <p> 元素的数量

4. 字符串

定义：字符串虽然是原始数据类型，但具有类数组行为。
特点：
可以通过索引访问字符。
有 length 属性。
不支持数组方法。

const str = 'hello';
console.log(str[0]); // 'h'
console.log(str.length); // 5

5. 自定义类数组对象

定义：任何手动添加 length 属性和数字索引属性的对象，也可以被视为类数组对象。

const customArrayLike = {0: 'a',1: 'b',2: 'c',length: 3
};console.log(customArrayLike[0]); // 'a'
console.log(customArrayLike.length); // 3

02伪数组转换为真数组

使用 Array.from() 方法
Array.from() 可以将类数组对象转换为一个新的数组实例：

let arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
let realArray = Array.from(arrayLike);console.log(realArray); // ["a", "b", "c"]

使用扩展运算符 (…)
扩展运算符可以将类数组对象“展开”成真正的数组：

let arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
let realArray = [...arrayLike];console.log(realArray); // ["a", "b", "c"]

使用 Array.prototype.slice.call() 方法
slice() 方法通常用于数组，但可以通过 call() 方法来调用它，转换类数组对象为数组：

let arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
let realArray = Array.prototype.slice.call(arrayLike);console.log(realArray); // ["a", "b", "c"]

方法四
先准备一个新的空数组，然后遍历伪数组，赋值给你创建的空数组。(不推荐使用)