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

Question

我有一个由构造函数创建的对象数组。这些对象比这个例子有更多的键值对。但这一切都很好，所以不相关。让我们尽量保持简洁:)

示例数组:

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。你猜对了。此字段旨在搜索联系人对象数组以查找任何匹配值。

这个字段的内容被 trim 复制到一个字符串数组，除以(1 个或更多)空格。

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 返回一个字符串，或一个只有 1 个字符串的数组时，它工作正常。如果数组包含更多字符串，则只会搜索并返回第一个字符串的结果。但它也有点困惑，考虑到对象将来可能有更多的键值对。因此版本 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 数组有超过 1 个值时，第二个值仍然被忽略。经过大量的尝试和错误，我希望有人能指出我的错误。

这是版本 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中的任何字符串。

非常感谢您提供的所有提示和见解!

Answer 1

我过去所做的是通过将所有值连接在一起来创建一个大的 index 字符串。然后你可以在你的 $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)