函数，它接受字符串和书籍列表，并返回与搜索输入匹配的所有书籍

Function that takes in a string and a list of books and returns all the books that match the search input

提问人：Anthony Luth Jr. 提问时间：9/5/2023 最后编辑：vanowmAnthony Luth Jr. 更新时间：9/6/2023 访问量：149

问：

“我一直在用头撞墙，我不知道该何去何从。我正在尝试构建一个函数，该函数接受字符串和书籍列表，然后返回与搜索输入匹配的所有书籍。

它应该接收一系列对象，然后过滤它们并吐出火柴，但我不知道该去哪里。我对此比较陌生，很容易迷路，所以任何帮助将不胜感激。

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"]
}
]

// Click handler for search button
const captureSearchValue = () => {
 let input = document.getElementById('search-bar').value;
return input;
};

const filterBooks = (books) => {
  let flattenedObj;
   const flattenedObjsArr = [];
   for (let obj = 0; obj < books.length; obj++) {
    const objValues = Object.values(books[obj]);
    flattenedObj = [objValues.flat()];
    flattenedObjsArr.push(flattenedObj)
   } 
   return flattenedObjsArr;
} 

console.log(filterBooks(books)) //returns all 10 books`

我应该展平对象，然后返回搜索的匹配项。这里的示例是搜索“幻想”应该返回 2 个结果。但这拉了 10 个。

JavaScript 数组对象 匹配 扁平化

评论

答：

0赞 user22496707 9/5/2023 #1

下面是捕获搜索输入并返回筛选的书籍的函数的更新版本：filterBooks

const books = [
  {
    title: "The City We Became",
    author: "N. K. Jemisin",
    tags: ["fantasy", "fiction", "afrofuturism", "science fiction", "sci-fi"]
  },
  // ... (other books)
];

const filterBooks = () => {
  // Click handler for search button
  const captureSearchValue = () => {
    let input = document.getElementById('search-bar').value;
    return input.toLowerCase(); // Convert input to lowercase for case-insensitive search
  };

  const searchInput = captureSearchValue();

  return books.filter((book) => {
    // Check if the search input is found in the book's title, author, or tags
    const searchString = searchInput.toLowerCase();
    return (
      book.title.toLowerCase().includes(searchString) ||
      book.author.toLowerCase().includes(searchString) ||
      book.tags.some((tag) => tag.toLowerCase().includes(searchString))
    );
  });
};

// Example usage when the search button is clicked
document.getElementById('search-button').addEventListener('click', () => {
  const filteredBooks = filterBooks();
  console.log(filteredBooks);
});

该函数现在在函数中定义。该参数由函数获取。搜索按钮事件侦听器也位于该方法中，它调用以获取筛选的书籍，然后再将其记录到控制台。有关书籍过滤的所有内容现在都包含在函数中。captureSearchValuefilterBookssearchInputfilterBooksfilterBooksfilterBooksfilterBooks

评论

0赞 Anthony Luth Jr. 9/6/2023
这些都是很好的例子，但我认为它都需要在filterBooks函数中。这是我正在参加的考试，它一直在踢它 🙄
0赞 9/6/2023
我理解需要将所有内容都包含在函数中。filterBooks
0赞 Anthony Luth Jr. 9/6/2023
我还是能弄清楚的
0赞 vanowm 9/5/2023 #2

所以，你得到了一个关键字数组数组（是的，一个额外的数组）。现在，您需要遍历此数组并找到与您的关键字匹配的任何项目：

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"]
}
]

// Click handler for search button
const captureSearchValue = () => {
 let input = document.getElementById('search-bar').value;
return input;
};

const filterBooks = (books) => {
  let flattenedObj;
   const flattenedObjsArr = [];
   for (let obj = 0; obj < books.length; obj++) {
    const objValues = Object.values(books[obj]);
    //don't need enclose into another array
    flattenedObj = objValues.flat();
    //convert to lower case
    flattenedObj = flattenedObj.map(a=>a.toLowerCase());
    flattenedObjsArr.push(flattenedObj)
   } 
   return flattenedObjsArr;
} 

const search = value =>
{
  value = value.toLowerCase();
  //if books object is static, booksKeywords should be moved to parent scope.
  const booksKeywords = filterBooks(books);
  const result = [];
  for(let i = 0; i < booksKeywords.length; i++)
  {
    if (booksKeywords[i].includes(value))
      result.push(books[i]);
  }
  return result;
}

console.log(filterBooks(books)) //returns all 10 books`
console.log(search("fantasy")); //returns 2
<input oninput="console.clear();console.log(search(this.value))">

这是一个简单的解决方案，它只匹配完整的关键字，它不会在多单词关键字中搜索单个单词。

评论

0赞 Anthony Luth Jr. 9/6/2023
这些都是很好的例子，但我认为它都需要在filterBooks函数中。这是我正在参加的考试，它一直在踢它 🙄
0赞 vanowm 9/6/2023
嗯，这是你必须自己弄清楚的事情，你得到了零件，现在把它们放在一起 😉
0赞 Anthony Luth Jr. 9/6/2023
很公平..你说答案就在某个地方
0赞 danh 9/6/2023 #3

如果我们只搜索标签，并且输入标签以小写形式给出，那么搜索可以用一行表示：

const filterBooks = tag => books.filter(book => book.tags.includes(tag));

这将标签作为约定俗成的参数。它也可能像这样将数组作为参数......

const filterBooks = (books, tag) => books.filter(book => book.tags.includes(tag));

如果唯一的参数是一个数组，我们需要一种方法从函数中获取标签，就像这样......

const filterBooks = books => {
  const tag = // get the searched tag from the UI somehow
  return books.filter(book => book.tags.includes(tag));
}

如果有更复杂的搜索，例如匹配作者或其他字段，您也可以分解谓词，如下所示......

const filterBooks = books => {
  const term = // get the searched tag from the UI somehow
  cost predicate = book => {
    return book.tags.includes(term) ||
           book.author.includes(term) // || etc
  }
  return books.filter(predicate);
}

最后，正如另一位用户所建议的那样，如果需要不区分大小写，请将正在搜索的内容和正在搜索的值转换为相同的大小写。

这是最简单的想法演示...

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 filterBooks = tag => books.filter(book => book.tags.includes(tag));

console.log(filterBooks("fantasy"));

评论

0赞 Anthony Luth Jr. 9/6/2023
MAAAAAAN谢谢你..这奏效了......进入第 3 步，我在 2 天后去

上一个：如何找出哪些值对应于另一个数据帧中的范围？[复制]

下一个：JREPL - 如何仅替换文本文件中的第二个匹配项？