求助：实现可匹配搜索字符串的书籍列表过滤函数

问题分析 #

你当前的filterBooks函数仅完成了书籍对象的扁平化处理，没有添加任何过滤逻辑，因此无论输入什么搜索词都会返回全部书籍。要实现需求，需要让函数接收搜索词参数，并检查每本书的标题、作者、标签是否匹配搜索内容。

修正后的完整代码 #

const books = [
{
  title: "The City We Became",
  author: "N. K. Jemisin",
  tags: ["fantasy", "fiction", "afrofutursim", "science fiction", "sci-fi"]
},
{
title: "The Catcher in the Rye",
author: "J. D. Salinger",
tags: ["fiction", "young adult", "YA", "realism", "coming of age", "classic"]
},
{
title: "The Hundred Thousand Kingdoms",
author: "N. K. Jemisin",
tags: ["fantasy", "fiction", "adventure", "series"]
},
{
title: "Sapiens: A Brief History of Humankind",
author: "Yuval Noah Harari",
tags: ["nonfiction", "history", "anthropology", "science", "sociology"]
},
{
title: "Behave: The Biology of Humans at Our Best and Worst",
author: "Robert M. Sapolsky",
tags: ["nonfiction", "anthropology", "science", "sociology", "biology"]
},
{
title: "The Parable of the Talents",
author: "Octavia Butler", 
tags: ["fiction", "dystopian", "science fiction"]
},
{
title: "1984",
author: "George Orwell", 
tags: ["fiction", "dystopian", "science fiction", "classics", "adult"]
},
{
title: "Remarkably Bright Creatures",
author: "Shelby Van Pelt",
tags: ["fiction", "mystery", "magical realism"]
},
{
title: "Crying in H Mart",
author: "Michelle Zauner",
tags: ["memoir", "nonfiction", "autobiography"]
},
{
title: "Wild: From Lost to Found on the Pacific Crest Trail",
author: "Cheryl Strayed",
tags: ["nonfiction", "memoir", "adventure", "travel"]
}
]

// 获取搜索框输入值
const captureSearchValue = () => {
 let input = document.getElementById('search-bar').value;
return input;
};

// 过滤书籍的核心函数
const filterBooks = (books, searchTerm) => {
  // 统一转为小写并去除前后空格，实现不区分大小写的搜索
  const lowerCaseSearch = searchTerm.toLowerCase().trim();
  
  // 如果搜索词为空，直接返回空数组
  if (!lowerCaseSearch) return [];

  // 使用filter方法筛选符合条件的书籍
  return books.filter(book => {
    // 检查标题是否匹配
    const titleMatch = book.title.toLowerCase().includes(lowerCaseSearch);
    // 检查作者是否匹配
    const authorMatch = book.author.toLowerCase().includes(lowerCaseSearch);
    // 检查标签数组中是否存在匹配项
    const tagMatch = book.tags.some(tag => tag.toLowerCase().includes(lowerCaseSearch));

    // 只要标题、作者、标签中有一个匹配，就保留该书籍
    return titleMatch || authorMatch || tagMatch;
  });
};

// 搜索点击处理函数
const handleSearch = () => {
  const searchInput = captureSearchValue();
  const matchedBooks = filterBooks(books, searchInput);
  console.log(matchedBooks); // 搜索'fantasy'会返回2条结果
};

关键改动说明 #

• 函数参数调整：让filterBooks接收两个参数：books数组和searchTerm搜索词，这样才能基于输入内容做过滤。
• 不区分大小写处理：将搜索词和书籍字段统一转为小写，避免因大小写差异导致匹配失败（比如用户搜Fantasy也能匹配到fantasy标签）。
• 过滤逻辑实现：
  • 使用数组的filter方法遍历书籍数组，自动返回符合条件的元素集合。
  • 分别检查书籍的title、author是否包含搜索词，用some方法检查tags数组中是否有匹配的标签。
  • 只要任意一个字段匹配，就保留该书籍。
• 边界处理：当搜索词为空（或仅含空格）时，返回空数组，避免无效搜索返回全部书籍。

原代码问题点 #

原filterBooks函数只是将每个书籍对象的属性值扁平化后存入数组，没有添加任何判断条件，因此无论输入什么搜索词，都会返回所有书籍的扁平化结果，完全没有实现过滤功能。

内容的提问来源于stack exchange，提问作者Anthony Luth Jr.