javascript - 问题索引。这段代码是如何工作的？

Question

我一直在研究本教程，该教程向您展示如何制作自定义搜索过滤器。它工作完美。当您在搜索栏中输入字母时，列出的图书项目会显示或消失，具体取决于搜索输入中的字母是否可以在标题中找到。所以我的问题是，当你完全删除搜索栏中的字母时，列表中的所有书籍怎么可能再次显示？如果一个字符串完全为空，并且使用 indexOf 方法将其与完全没有空格的单字标题进行比较，那么返回的结果不是 -1 吗？代码中没有任何内容告诉图书列表中的所有图书再次显示，但它仍然显示，如何？

html

<header>
            <div id="page-banner">
                <h1 class="title">Bookorama</h1>
          <p>Books for Ninjas</p>
          <form id="search-books">
            <input type="text" placeholder="Search books..." />
          </form>
            </div>
        </header>
        <div id="book-list">
            <h2 class="title">Books to Read</h2>
            <ul>
                <li>
                    <span class="name">Name of the Wind</span>
                    <span class="delete">delete</span>
                </li>
                <li>
                    <span class="name">Wise</span>
                    <span class="delete">delete</span>
                </li>
                <li>
                    <span class="name">Kafka on the Shore</span>
                    <span class="delete">delete</span>
                </li>
                <li>
                    <span class="name">The Master and the Margarita</span>
                    <span class="delete">delete</span>
                </li>
            </ul>
        </div>

JavaScript

const list = document.querySelector('#book-list ul');

const searchBar = document.forms['search-books'].querySelector('input');
searchBar.addEventListener('keyup', function(e){
    const term = e.target.value.toLowerCase();
    const books = list.querySelectorAll('li');
    books.forEach(function(book){
        const title = book.firstElementChild.textContent;
        if(title.toLowerCase().indexOf(term) != -1){
            book.style.display = "block";
        } else {
            book.style.display = "none";
        }
    })

});

Answer 1

使用空字符串调用 .indexOf() 将始终匹配。

换句话说，就是“这个非空字符串中是否出现零长度字符串？”这个问题的答案。始终是"is"。

您可以在浏览器控制台中尝试此操作:

"hello world".indexOf("");

因此，当“keyup”事件发生时，搜索输入完全为空，列表中的每本书都会匹配。

请注意，在过滤列表之前，我强烈倾向于 .trim() 搜索字符串。