用了queryselectall获取了所有div，是伪数组，什么是伪数组，如何将伪数组转换成真正数组，然后用filter进行一次和二次过滤
什么是伪数组？
伪数组（array-like object）是指具有 length 属性并且元素按索引（如 0, 1, 2）排列的对象，但不具备数组的方法（如 map, filter 等）。常见的伪数组示例有：
NodeList（如document.querySelectorAll()返回的结果）arguments对象（在函数内）
如何将伪数组转换成真正的数组？
你可以使用以下几种方法将伪数组转换成真正的数组：
-
Array.from()方法：javascript
复制代码
const divs = document.querySelectorAll('div'); const divArray = Array.from(divs); -
扩展运算符（
...）：javascript
复制代码
const divs = document.querySelectorAll('div'); const divArray = [...divs]; -
Array.prototype.slice.call()方法：javascript
复制代码
const divs = document.querySelectorAll('div'); const divArray = Array.prototype.slice.call(divs);
使用 filter 进行一次和二次过滤
假设你想对这些 div 元素进行两次不同的过滤，以下是如何实现的示例：
javascript
复制代码
// 获取所有 div 元素的伪数组 const divs = document.querySelectorAll('div'); // 转换为真正的数组 const divArray = Array.from(divs); // 一次过滤：过滤出包含特定类名的 div const firstFilter = divArray.filter(div => div.classList.contains('first-class')); // 二次过滤：从第一次过滤的结果中再筛选包含特定文本的 div const secondFilter = firstFilter.filter(div => div.textContent.includes('specific text')); // 打印结果 console.log('第一次过滤结果:', firstFilter); console.log('第二次过滤结果:', secondFilter);
说明
- 一次过滤：使用
filter筛选出满足条件的div，例如包含特定类名的元素。 - 二次过滤：在第一次过滤的结果基础上进行进一步筛选，如筛选出包含特定文本的元素。
这种方法让你能够逐步完善筛选逻辑，使得代码更加清晰、易于维护。