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>

Answer 2

您可以通过映射此属性来过滤并返回innerText。

Array#map为每个项目返回另一个值，但不过滤数组。

在这种情况下，请使用Array#filter并为所需属性添加一个映射。

function x() {
    let correct = document.querySelectorAll('#circle p'); // no need for template strings
    return Array.prototype.slice
        .call(correct)
        .filter(cur => cur.classList.contains("true"))    // filter
        .map(({ innerText }) => innerText);               // map
}

console.log(x());

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

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

2 个答案: