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

Question

I am really focusing on this problem, I can not find any mistake in my code. I just want the array to contain the inner text of the paragraphs which has the class of true. Thanks in advance.

 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 would return an array with the same number of elements as the source array. Hence in your case, when you do not enter the if condition, you return "nothing". Javascript assumes a function which has returned nothing to have returned undefined .

In your example, your if condition returns a string , while the other case just returns undefined . This is the reason you're seein undefined mixed with your expected strings.

You could use reduce instead to achieve what you want, reduce allows you to iterate over an array and create your own response. (you could return an array with more items, fewer items or an object that is not an array itself 😊)

Here is your example code modified to work with reduce the way you want it. I'd suggest 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

You could filter and return innerText by mapping this property.

Array#map returns another value for every item, but does not filter an array.

For this case, take Array#filter and add a mapping for the wanted property.

 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>