重新组合元素的过滤器不起作用

Question

let wrap = document.querySelector(".wrap");
let temp = document.querySelector(".temp");
temp.addEventListener("click", (event) => {
  // returns pragraph of children[0]. Works fine.
  console.log(wrap.children[0].firstElementChild);

  // returns list of all lis, not pragraphs.
  let filtered = Array.from(wrap.children).filter(item => item.firstElementChild);
  console.log(filtered);
})

    <div>
      <ul class="wrap">
        <li>
          <p class="temp">outer 1</p>
          <ul>
            <li>inset 1</li>
          </ul>
        </li>
        <li>
          <p>outer 2</p>
          <ul>
            <li>inset 1</li>
          </ul>
        </li>
        <li>
          <p>outer 3</p>
          <ul>
            <li>inset 1</li>
          </ul>
        </li>
        <li>
          <p>outer 4</p>
          <ul>
            <li>inset 1</li>
          </ul>
        </li>
        <li>
          <p>outer 5</p>
          <ul>
            <li>inset 1</li>
          </ul>
        </li>
        <li>
          <p>outer 6</p>
          <ul>
            <li>inset 1</li>
          </ul>
        </li>
        <li>
          <p>outer 7</p>
          <ul>
            <li>inset 1</li>
          </ul>
        </li>
      </ul>
    </div>

我想使用filter 方法重新组合所有ps 中的每一个lis，但是该函数一直在奇怪地工作。

// returns pragraph of children[0]. Works fine.
console.log(wrap.children[0].firstElementChild);

使用.firstElementChild 检查单个段落效果很好。但是，当我使用filter() 时，会发生这种情况：

// returns list of all lis, not pragraphs.
let filtered = Array.from(wrap.children).filter(item => item.firstElementChild);
// result: temp.js:5 (7) [li, li, li, li, li, li, li]

我很久以前就使用过这样的过滤器，但由于某种原因它不再起作用了。

我错过了什么吗？

Answer 1

您需要使用map() 而不是filter()

let filtered = Array.from(wrap.children).map(item => item.firstElementChild);

Answer 2

Array.from() 免费为您提供map()。 (Array.from(arrayLike [, mapFn [, thisArg]]))

let filtered = Array.from(wrap.children, item => item.firstElementChild);

---

filter() 期望从回调中返回一个布尔值，如果 true 则包含正在迭代的元素，如果 false 则省略它。

您的调用 Array.from(wrap.children).filter(item => item.firstElementChild); 返回 wrap.children 中的元素数组，.firstChildElement 返回 true。