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

说一说JS伪数组和数组的区别？

article 2024/11/22 23:30:59

- 伪数组和数组在JavaScript中都是用来存储一系列值的容器，但它们有一些关键的区别：
  
  1. 定义方式
  - 数组：通过使用 []（空方括号）创建，或者使用 Array 构造函数。
```
let arr = [1, 2, 3]; 
let arr2 = new Array(1, 2, 3);
```
  - 伪数组：通常不是直接创建的，而是由一些特定的对象实现的，如 arguments 对象（函数中的参数列表）或 DOM 方法返回的结果集，如 document.querySelectorAll 返回的 NodeList。
  2. 原型链
  - 数组：继承自 Array.prototype，拥有数组特有的方法，如 .push(), .pop(), .map(), .filter() 等。
  - 伪数组：通常继承自 Object.prototype，不直接拥有这些数组方法，但可以通过一些转换方法（如 Array.prototype.slice.call()）来获得数组的方法。
  3. .length 属性
  - 数组：.length 属性表示数组中元素的个数，是可变的。
  - 伪数组：也具有 .length 属性，但这个属性是只读的，不能通过 .length 来修改数组的长度。
  4. 方法访问
  - 数组：可以直接访问如 .push(), .pop() 等数组方法。
  - 伪数组：不能直接使用这些方法，但可以通过转换为真正的数组来实现相同的功能。
  5. 示例
  - 数组：
```
let arr = [1, 2, 3];
console.log(arr.length); // 3
arr.push(4);
console.log(arr.length); // 4
```
  - 伪数组：
```
let伪数组 = document.querySelectorAll('li');
console.log(伪数组.length); // 3
// 使用Array.prototype.slice.call()将伪数组转换为真正的数组
let真数组 = Array.prototype.slice.call(伪数组);
真数组.push(4);
console.log(伪数组.length); // 3，伪数组的length属性不可变
```
  转换伪数组为数组
  
  虽然伪数组没有数组的原生方法，但可以通过以下几种方式将其转换为真正的数组：
  - 使用 Array.prototype.slice.call()：
```
let真数组 = Array.prototype.slice.call(伪数组);
```
  - 扩展运算符 ...：
```
let真数组 = [...伪数组];
```
  - Array.from() 方法：
```
let真数组 = Array.from(伪数组);
```
  通过这些方法，可以充分发挥数组的强大功能来处理伪数组。