在对象数组中搜索值的函数答案

【问题标题】：Search function for a value in an array of objects在对象数组中搜索值的函数
【发布时间】：2021-12-19 16:20:34
【问题描述】：

我试图创建一个函数来搜索书籍对象数组中的标题。由于某种原因，我的代码无法正常工作，我已尝试按逻辑执行每个步骤，并且在我看来它应该可以正常工作。

let book = {
  title: "The 48 Laws of Power",
  author: "Robert Greene",
  numOfPages: 452,
  publisher: "Penguin Books",
  rating: "4.5 stars"
}

let book2 = {
  title: "How to Catch a Turkey",
  author: "Adam Wallace",
  numOfPages: 40,
  publisher: "",
  rating: "5 stars"
}

let book3 = {
  title: "Glitter Every Day: 365 Quotes from Women I Love",
  author: "Andy Cohen",
  numOfPages: 384,
  publisher: "Henry Holt and Co.",
  rating: "3 stars"
}

let bookArr = [book, book2, book3];
let searchBtn = document.getElementById('search-button');
let found = false;

let bookSearch = function() {
  found = false;
  let input = document.getElementById('book-search');
  for (i = 0; i < bookArr.length; i++) {
    if (input.value.toLowerCase == bookArr[i].title.toLowerCase) {
      found = true;
      break;
    }

  }
  if (found) {
    console.log(bookArr[i]);
  } else {
    console.log("The book was not found.");
  }
}
searchBtn.addEventListener('click', bookSearch);

<input type="text" id="book-search" placeholder="Search books...">
<button id="search-button">Search</button>
<script src="object.js"></script>

最后，我是这个论坛的新手，也是编程新手，所以如果这是错误的提问方式，我深表歉意，但我真的很感谢对我的代码的一些批评以及我应该做得更好的地方。谢谢！

【问题讨论】：

您是否尝试过使用浏览器的开发工具调试bookSearch 函数？
toLowerCase 是一个函数，你应该使用() 调用它：toLowerCase()

标签： javascript arrays search javascript-objects

【解决方案1】：

您可以使用Array.find()，它很简单：

var book = bookArr.find(book => book.title.toLowerCase() == input.value.toLowerCase())

工作演示

let book = {
  title: "The 48 Laws of Power",
  author: "Robert Greene",
  numOfPages: 452,
  publisher: "Penguin Books",
  rating: "4.5 stars"
}

let book2 = {
  title: "How to Catch a Turkey",
  author: "Adam Wallace",
  numOfPages: 40,
  publisher: "",
  rating: "5 stars"
}

let book3 = {
  title: "Glitter Every Day: 365 Quotes from Women I Love",
  author: "Andy Cohen",
  numOfPages: 384,
  publisher: "Henry Holt and Co.",
  rating: "3 stars"
}

let bookArr = [book, book2, book3];
let searchBtn = document.getElementById('search-button');
let found = false;

let bookSearch = function() {
  let input = document.getElementById('book-search');
  var book = bookArr.find(book => book.title.toLowerCase() == input.value.toLowerCase())

  if (book) {
    console.log(book);
  } else {
    console.log("The book was not found.");
  }
}
searchBtn.addEventListener('click', bookSearch);

<input type="text" id="book-search" placeholder="Search books...">
<button id="search-button">Search</button>
<script src="object.js"></script>

【讨论】：

【解决方案2】：

如果您只想要第一个匹配项，请使用 Array.find()。

books.find(book => book.title == 'mysearch');

如果您想要一个匹配数组，请使用 Array.filter()。

books.filter(book => book.title == 'mysearch');

如果您使用的是 Typescript，那么您可以添加类型安全性并使搜索功能更易于使用。

function search<Type, Key extends keyof Type>(arr: Type[], prop: Key, match: Type[Key]){
    // For a single item
    return arr.find(item => item[prop] == match);

    // For an array of matches
    return arr.filter(item => item[prop] == match);
}

然后我们为一本书制作一个界面，我们可以在自动完成的同时轻松搜索它。

interface Book {
    title: string;
    author: string;
    numOfPages: number;
    publisher: string
    rating: string;
}

search(books, "title", "Harry Potter")

这是一个 TS 游乐场，您可以自己尝试代码。 Link

【讨论】：

@Icepickle 谢谢。在手机上书写时很难发现错误。