如何搜索数组属性中的项目？

Question

我正在尝试制作一个简单的网站（没有 CSS3）来搜索数组中的项目。我实现此目标的方法是在数组中的项目的 'title' 或 'desc' 属性中搜索。如果标题包含来自输入的关键字，我的预期结果是在控制台中获得 titleOfItem + 'fizz'。相反，我收到以下错误：

这是我的 HTML5 代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>replit</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <input id="keywordText" type="text">
    <button id="submit" onclick="search()">Search</button>
    <script src="script.js"></script>
  </body>
</html>

这是我的 JS 代码：

const items = {
  john:{title:'john', desc:"doe", elem:document.getElementById('john')},
  jane:{title:'jane', desc:"doe", elem:document.getElementById('jane')}
}

let allItems = []
for (var key in items) {
  allItems.push(items[key])
}



function search() {
  let keyword = document.getElementById('keywordText').value;
  for (let count = 0; allItems.length; count++) {
    let titleOfItem = allItems[count].title
    if (titleOfItem.includes(keyword)) {
      console.log(titleOfItem + ' fizz')
    } else {
      console.log(titleOfItem + ' buzz')
    }
  }
}

我在这段代码中做错了什么吗？此外，出于组织目的，是否有某种方法可以直接从第一个数组中获取此信息？

Answer 1

for (let count = 0; count < allItems.length; count++) {

}

您收到错误是因为您没有指定计数值将在 for 循环中持续多长时间。您可以通过像这样更新代码来解决问题。

Answer 2

您可能错过了 for 循环中的条件。将您的代码更改为：

for (let count = 0; count < allItems.length; count++)

Answer 3

原因是标题未定义。这可能是因为您的代码中没有正确复制标题，或者是因为您将数组遍历到 outOfBounds，其中标题不可访问且未定义。

修正这部分：

for (let count = 0; count < allItems.length; count++) {
    let titleOfItem = allItems[count].title
    if (titleOfItem.includes(keyword)) {
      console.log(titleOfItem + ' fizz')
    } else {
      console.log(titleOfItem + ' buzz')
    }
  }

应该这样做，但如果不检查 allItems 的值以查看它是否一直具有属性

如何搜索数组属性中的项目？

How to search for items in array properties?

html

javascript

arrays

sorting

search