为客户端搜索进行多参数过滤的优雅方式

Question

所以，假设我有一个如下所示的对象：

const DEVICES: { mac: string; name: string; ip: string; type: number }[] = [
  {
    mac: 'xx:xx:xx:xx:xx',
    name: 'something',
    ip: 'xx.xx.xx.xx.xx',
    type: 0,
  },
  {
    mac: 'xx:xx:xx:xx:yy',
    name: 'something1',
    ip: 'xx.xx.xx.xx.yy',
    type: 1,
  },
  // and so on...
];

当我想要有多个可搜索参数（名称、mac、ip）时 - 我的直觉是将一些 ||（OR）放入我的过滤器函数中，例如：

 DEVICES.filter((item) => {
   return item.name.toLowerCase().indexOf(dataFromInputEvent.trim().toLowerCase()) >= 0
          || item.ip.toLowerCase().indexOf(dataFromInputEvent.trim().toLowerCase()) >= 0
          || item.mac.toLowerCase().indexOf(dataFromInputEvent.trim().toLowerCase()) >= 0;
 })
 .map(item, index) = {
   return (
     <SomeComponent
       key={index}
       type={item.type}
       name={item.name}
       mac={item.mac}
       type={item.type}
     />
   );
 )}

如您所见，如果数据获得更多属性并且我要添加另一个参数进行搜索，我只需在过滤器函数中添加另一个|| 即可返回。有没有更优雅的方法来进行多参数搜索——最好不要重复相同的toLowerCase() 和indexOf()？或者可能完全不做|| 的事情？

Answer 1

创建一个要过滤的属性数组（当前为['name', 'ip', 'mac']），然后遍历它们并查看其中的.some 在使用item 上的括号表示法访问时是否包含数据：

DEVICES.filter((item) => {
  const input = dataFromInputEvent.trim().toLowerCase();
  return ['name', 'ip', 'mac'].some(prop => item[prop].toLowerCase().includes(input));
})
.map( // ...

（请注意，您可以先将修剪后的小写输入存储在一个变量中，然后使用.includes 而不是indexOf，从而减少代码的重复性）

您可能还打算将 DEVICES 键入为对象数组，而不是单个对象：

const DEVICES: Array<{ mac: string; name: string; ip: string; type: number }> = [

但是 Typescript 几乎可以推断类型，而无需您显式记录它们，所以

const DEVICES = [

一个人可能就足够了。 （编写更少的代码意味着更少的错误表面积，并且通常也使事情更具可读性）