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

Question

So, say I have an object that looks like the following:

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...
];

When I wanted to have multiple searchable parameters (name, mac, ip) - what's intuitive to me is to put some || (ORs) inside my filter function like:

 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}
     />
   );
 )}

as you can see, if the data gets more properties and if I were to add another parameter for search, I would just put another || inside the filter function to return. Is there a more elegant way to to do multiple parameter search - ideally without repeating the same toLowerCase() and indexOf() ? or maybe not doing the || thing altogether?

Answer 1

Create an array of the properties to filter (currently, ['name', 'ip', 'mac'] ), then iterate over them and see if .some of them, when accessed with bracket notation on item , include the data:

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

(note that you can make the code much less repetitive by storing the trimmed and lower-cased input in a variable first, and by using .includes instead of indexOf )

You also probably meant to type DEVICES as an array of objects, not a single object:

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

But Typescript can almost infer types without you having to explicitly note them, so

const DEVICES = [

alone would probably be enough. (less code to write means less surface area for errors, and often also makes things more readable)