如何修复表达式不可用错误？答案

【问题标题】：How to fix expression not available error?如何修复表达式不可用错误？
【发布时间】：2019-08-24 23:37:52
【问题描述】：

这里是示例 App.js：

//filtering student list based on keyup search value 
//array length is 0 if no match was found
search.addEventListener('keyup', (e) => {
   // Check to see if search term is empty or not
  if (e.target.value.length > 0) {
        const noResults = document.querySelector(".no-results");
         //how many student names matched the input
        console.log(studentListItems[0].children[0].children[1].textContent);
        const array = Array.from(studentListItems).filter(student => student.children[0].children[1].textContent.includes(e.target.value))
     //No names filtered
     //Every student item disappears, no-results li shows
        if (array.length == 0) {
                Array.from(studentListItems).forEach(student => {
                student.style.display = "none";
                });
                noResults.style.display = "block";
                replaceLinks(array)
            //show ones that match, hide ones that don't 
        } else if (array.length > 0) {
                    displayPage(array,1)
                    replaceLinks(array)
                    Array.from(studentListItems).forEach(item => {
                        if (item.children[0].children[1].textContent.includes(e.target.value)) {
                            item.style.display = "block";
                        } else {
                            item.style.display = "none";
                        }
                    })  
                    noResults.style.display = "none";
        }   
  } else {                  // Display the initial state if search term is empty
        displayPage(studentListItems, 1);
        replaceLinks(studentListItems);
    }

});

这是我的 JS fiddle 的链接：https://jsfiddle.net/6sa4702z/

当我在搜索输入中输入内容时，控制台会提示我“script.js:155 Uncaught TypeError: Cannot read property 'textContent' of undefined' for the filter function 将数组存储在名为 array

的变量

正如您所看到的，当您控制台记录 studentListItems 时，您会得到输出，所以我不明白为什么过滤器功能不起作用？

我也收到了一个表达式不可用的错误，我觉得这与此有关。这与变量范围有关吗？

【问题讨论】：

标签： javascript filter scope

【解决方案1】：

您的console.log 仅测试数组的第一个元素。但是当您运行filter 时，您的数组中可能还有一些其他元素不是您所期望的，因此会引发错误。

根据查看您的 jsfiddle，您将在列表末尾注入一个新的 .no-results 项目。这里的重点是HTMLCollection 对象是“活动的”。这意味着每当 DOM 更新时，数据结构也会更新。因此，您的 studentListItems 变量将在添加后更新以包含此新元素。

您可以立即将此HTMLCollection 对象转换为数组，这样它就不会更新，或者您可以即时过滤掉任何不需要的行。任何一个选项都可以解决您的问题。

有关 HTMLCollection 的更多信息，请参阅documentation here。

【讨论】：

【解决方案2】：

根据您的 jsfiddle，我认为您在 studentListItems 集合的末尾有一个额外的元素，该元素不包含您期望的子元素。试试这个：

const array = Array.from(studentListItems).filter(student => student.children[0].children[1] && student.children[0].children[1].textContent.includes(e.target.value))

结果是，如果student.children[0].children[1] 为空，则不会评估条件的第二部分，也不会抛出您看到的异常。我认为您必须在两个地方进行此更改。

【讨论】：