伪数组转换为真正的数组

在 JavaScript 中，**伪数组（类数组对象）**是指具有数字索引和 length 属性，但不具备数组原生方法的对象。常见的伪数组包括函数的 arguments 对象、DOM 集合（如 document.querySelectorAll 的返回值）等。

要将伪数组转换为真正的数组，可以使用以下几种方法：

---

1. 使用 Array.from()

Array.from() 是一种简洁且高效的方法，可以将伪数组转换为真正的数组。

示例：

const pseudoArray = document.querySelectorAll('div'); // 返回一个伪数组（NodeList）
const realArray = Array.from(pseudoArray);

console.log(realArray); // 现在是一个真正的数组

Array.from() 还可以接受一个映射函数，对转换后的数组进行处理：

const pseudoArray = document.querySelectorAll('div');
const realArray = Array.from(pseudoArray, element => element.textContent);

console.log(realArray); // 现在是一个包含文本内容的数组

---

2. 使用扩展运算符（...）

扩展运算符可以将伪数组展开为真正的数组。

示例：

const pseudoArray = document.querySelectorAll('div');
const realArray = [...pseudoArray];

console.log(realArray); // 现在是一个真正的数组

扩展运算符同样可以结合映射函数使用：

const pseudoArray = document.querySelectorAll('div');
const realArray = [...pseudoArray].map(element => element.textContent);

console.log(realArray); // 现在是一个包含文本内容的数组

---

3. 使用 Array.prototype.slice.call()

Array.prototype.slice.call() 是一种较老但仍然有效的方法，可以将伪数组转换为数组。

示例：

const pseudoArray = document.querySelectorAll('div');
const realArray = Array.prototype.slice.call(pseudoArray);

console.log(realArray); // 现在是一个真正的数组

---

4. 使用 Array.concat()

Array.concat() 方法也可以用来将伪数组转换为数组，但需要先将伪数组作为参数传递。

示例：

const pseudoArray = document.querySelectorAll('div');
const realArray = Array.concat.apply([], pseudoArray);

console.log(realArray); // 现在是一个真正的数组

---

5. 使用 for 循环手动转换

如果需要兼容较旧的浏览器，可以手动使用 for 循环将伪数组转换为数组。

示例：

const pseudoArray = document.querySelectorAll('div');
const realArray = [];

for (let i = 0; i < pseudoArray.length; i++) {
  realArray.push(pseudoArray[i]);
}

console.log(realArray); // 现在是一个真正的数组

---

总结

• 推荐使用 Array.from() 或扩展运算符（...） ，因为它们简洁且高效。
• 如果需要兼容旧版本浏览器，可以使用 Array.prototype.slice.call() 或手动循环。
• 如果需要对转换后的数组进行进一步处理，Array.from() 和扩展运算符结合映射函数非常方便。