JavaScript图书搜索项目filterBooks函数测试用例不通过问题

核心问题分析 #

你遇到的filterBooks函数在IDE中返回0个结果的原因，主要来自以下几个代码缺陷：

• 重复且低效的扁平化计算：在filterBooks的循环中，每次迭代都调用flattenObjectValuesIntoArray(listOfBooks)，重复将整个书籍数组扁平化处理10次。若IDE的JS环境对重复计算的处理有差异，或flat()方法支持不足，会直接导致匹配失败。
• 参数被强制覆盖：函数内部直接用listOfBooks = books和searchString = captureSearchValue()覆盖传入参数，破坏了函数通用性，也可能在IDE执行上下文里引发变量作用域冲突。
• 大小写敏感的匹配：默认includes()是大小写敏感的，若IDE中输入关键词的大小写与书籍标签不一致（比如误输入Fantasy），也会导致匹配失败。

修复后的完整代码 #

1. 修复script.js中的核心函数

// 获取搜索输入值（优化变量声明，添加预处理）
const captureSearchValue = () => {
    const searchValue = document.getElementById("search-bar").value;
    return searchValue.trim().toLowerCase(); // 去除空格+转小写，实现大小写不敏感搜索
};

// 过滤书籍的核心函数
const filterBooks = (searchString, listOfBooks) => {
    // 提前生成所有书籍的扁平化数组，仅执行一次
    const flattenedBooks = flattenObjectValuesIntoArray(listOfBooks);
    const filteredList = [];
    const lowerCaseSearch = searchString.toLowerCase();

    for(let i = 0; i < listOfBooks.length; i++) {
        // 检查当前书籍的扁平化值中是否包含搜索关键词
        if(flattenedBooks[i].some(item => typeof item === 'string' && item.toLowerCase().includes(lowerCaseSearch))) {
            filteredList.push(listOfBooks[i]);
        }
    }
    return filteredList;
};

// 简化HTML结构生成函数
const structureBooksAsHtml = (books) => {
    return books.map(structureBookAsHtml);
};

const searchBtnClickHandler = (books) => {
    const searchValue = captureSearchValue();
    const filteredBooks = filterBooks(searchValue, books);
    const structuredBooks = structureBooksAsHtml(filteredBooks);
    renderBooksToDom(structuredBooks);    
};

const searchBtn = document.getElementById("search-btn");
searchBtn.addEventListener("click", () => searchBtnClickHandler(books));

2. 兼容低版本环境的flattenObjectValuesIntoArray（可选）

如果IDE环境不支持ES2019的flat()方法，修改helper.js中的该函数：

const flattenObjectValuesIntoArray = (arrOfObjs) => {
    const flattenedObjsArr = [];
    for (let obj of arrOfObjs) {
        const objValues = Object.values(obj);
        const flattened = [];
        // 手动展开嵌套数组，替代flat()
        objValues.forEach(value => {
            if(Array.isArray(value)) {
                flattened.push(...value);
            } else {
                flattened.push(value);
            }
        });
        flattenedObjsArr.push(flattened);
    }
    return flattenedObjsArr;
};

修复说明 #

1. 避免重复计算：将flattenObjectValuesIntoArray的调用移到循环外，仅执行一次，大幅提升效率，同时避免重复处理带来的环境差异问题。
2. 大小写不敏感搜索：将搜索关键词和书籍内容统一转为小写，确保无论用户输入大小写都能匹配到结果。
3. 参数合规性：不再覆盖传入的参数，函数可接收任意书籍数组和搜索关键词，提升可维护性。
4. 兼容低版本环境：手动实现数组展开逻辑，替代flat()方法，确保在旧版JS环境中也能正常运行。

内容的提问来源于stack exchange，提问作者jdevries90