javascript - indexOf问题。此代码如何工作？

我一直在玩本教程，该教程向您展示如何制作自定义搜索过滤器。它完美地工作。当您在搜索栏中输入字母时，列出的书籍项目会显示或消失，具体取决于是否在标题中找到搜索输入中的字母。所以我的问题是，当您完全删除搜索栏中的字母时，列表中的所有书籍又有可能再次显示吗？如果字符串完全为空，并且使用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";
        }
    })

});

最佳答案

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

换句话说，问题的答案是：“长度为零的字符串是否出现在该非空字符串中？”永远是“是”。

您可以在浏览器控制台中尝试以下操作：

"hello world".indexOf("");

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

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