javascript - 为什么我的 map 方法返回未定义？

Question

我真的很关注这个问题，我在我的代码中找不到任何错误。我只希望数组包含具有 true 类的段落的内部文本。提前致谢。

function x() {
  let correct = document.querySelectorAll(
    `#circle p`
  );
  let pArr = Array.prototype.slice.call(correct);
  let pCorrectArr = pArr.map(cur => {
    if (cur.classList.contains("true")) {
      const innerText = cur.innerText;
      return innerText;
    }
  });
  return pCorrectArr;
}

console.log(x());

<div id="circle">
  <p>Google</p>
  <p class="true">Facebook</p>
  <p>Microsoft</p>
</div>

Answer 1

Map 将返回一个与源数组具有相同数量元素的数组。因此，在您的情况下，当您不输入 if 条件时，您将返回“nothing”。 JavaScript 假设一个没有返回任何内容的函数返回了undefined。

在您的示例中，您的 if 条件返回一个 string，而其他情况仅返回 undefined。这就是您看到 undefined 与您预期的字符串混合的原因。

您可以使用 reduce 来实现您想要的效果，reduce 允许您迭代数组并创建您自己的响应。 (您可以返回一个包含更多项目、更少项目的数组，或者返回一个不是数组本身的对象😊)

这是您的示例代码，经过修改后可以按照您想要的方式使用reduce。我建议reading up on reduce here .

function x() {
  let correct = document.querySelectorAll(
    `#circle p`
  );
  let pArr = Array.prototype.slice.call(correct);
  let pCorrectArr = pArr.reduce(function(acc, cur){
    if (cur.classList.contains("true")) {
      const innerText = cur.innerText;
      acc.push(innerText);
    }
    return acc;
  }, []);
  return pCorrectArr;
}

console.log(x());

<div id="circle">
  <p>Google</p>
  <p class="true">Facebook</p>
  <p>Microsoft</p>
</div>