基于一个单独的搜索数组，使用分层的.reduce()或.filter()函数，在对象数组中查找对象？

Question

基于一个单独的搜索数组，使用分层的.reduce()或.filter()函数，在对象数组中查找对象？

3

我有一个由构造函数创建的对象数组。这些对象有比这个例子更多的键值对。但是它们都很好地运作，所以不相关。让我们尝试简洁明了:
示例数组:

let contactsArr = [
  {id: 1, firstName: "Lucas", email: "lucas@fake.com"},
  {id: 2, firstName: "Adrian", email: "adrian@fake.com"},
  {id: 3, firstName: "Betrand", email: "zorro@fake.com"}
  }
];

在 HTML 中，我有一个搜索字段 #search。你猜对了。这个字段旨在搜索联系对象数组中的任何匹配值。

该字段的内容被修剪并复制到一个字符串数组中，由一个或多个空格分隔。

const $input = $("#search").val().toLowerCase().trim().split(/[\s]+/);

没问题。接下来，我想找到并返回contactsArr内与$input中的字符串相等（或包含部分）的对象的任何值。首先版本，我想出了这段代码：

const filteredArr = contactsArr.filter(contact => {
            return contact.firstName.toLowerCase().includes($input) ||
                contact.email.toLowerCase().includes($input) ||
                ... // and more key-value pairs to check
        });

当 $input 返回字符串或只有一个字符串的数组时，这很有效。如果数组包含多个字符串，则仅搜索并返回第一个字符串的结果。但这也有点混乱，因为对象在将来可能会有更多的键值对。因此，版本2如下所示：

const filteredArr = contactsArr.filter(contact => {
            return Object.values(contact).some(x => {
                if (typeof x === "number") x = x.toString();
                return x.toLowerCase().includes($input);
            });
        });

版本2返回的结果与版本1完全相同，只是它适用于比代码中列出的更多的键值对。太好了！但是当$input数组有多个值时，第二个值仍然被忽略。经过许多尝试和错误，我希望有人能指出我的错误。

这是版本3：（甚至可能是33）:)

const filteredArr = contactsArr.filter(contact => {
            return Object.values(contact).some(x => {
                // contact.id number to string
                if (typeof x === "number") x = x.toString();
                // match with lowercase (same as $input)
                x = x.toLocaleLowerCase();
                // check if includes and return true or false
                return $input.some(word => x.includes(word));
            });
        });

预期结果：目标是拥有与 $input 中任何字符串匹配的所有联系人。

非常感谢您提供的任何提示和见解！

- TVBZ

你能解释一下什么是“匹配（部分）字符串”吗？提供一些例子会更好。 - Phil

感谢 @CertainPerformance。我跳过得太快了。已更正。 - TVBZ

@Phil，我已经更正了描述。希望现在更清楚了？ - TVBZ

可能是重复的问题：Javascript：如何根据属性过滤对象数组？ - evolutionxbox

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Phil · Accepted Answer

过去我所做的是通过将所有值连接在一起创建一个大的“索引”字符串。然后，您可以在$input数组上使用Array.prototype.some()。"最初的回答"

let contactsArr = [
  {id: 1, firstName: "Lucas", email: "lucas@fake.com"},
  {id: 2, firstName: "Adrian", email: "adrian@fake.com"},
  {id: 3, firstName: "Betrand", email: "zorro@fake.com"}
];
let searchVal = 'lu rian'
const $input = searchVal.toLowerCase().trim().split(/\s+/);

const filteredArr = contactsArr.filter(contact => {
  // create an index string by joining all the values
  const indexString = Object.values(contact).join(' ').toLowerCase()
  
  // now you can perform a single search operation
  return $input.some(word => indexString.includes(word))
})

console.info(filteredArr)