如何过滤/搜索多个子数组？答案

【问题标题】：How can I filter/search multiple subarrays?如何过滤/搜索多个子数组？
【发布时间】：2019-12-18 13:38:56
【问题描述】：

我正在研究具有位置（城市、郊区、街道）的父子结构的搜索功能。我想搜索街道名称并获取结果但保留结构。

数组结构是这样的：

const cities = [
  {
    name: 'city1', sublocations: [
      {
        name: 'suburb1', sublocations: [
          {name: 'street1'},
          {name: 'street2'},
          {name: 'street3'},
        ]
      }, {
        name: 'suburb2', sublocations: [
          {name: 'street1'},
          {name: 'street2'},
          {name: 'street3'},
        ]
      }
    ]
  }
];

例如，当我搜索 street1 时，我想得到这个：

const cities = [
  {
    name: 'city1', sublocations: [
      {
        name: 'suburb1', sublocations: [
          {name: 'street1'},
        ]
      }, {
        name: 'suburb2', sublocations: [
          {name: 'street1'},
        ]
      }
    ]
  }
];

我尝试使用 array.filter 函数，但它会覆盖数据，当我删除搜索字符串时，数组的其余部分不会返回。

【问题讨论】：

标签： javascript arrays filter

【解决方案1】：

我认为这个 sn-p 应该可以解决问题：

var cities = [
 {name :'city1', sublocations:[
     {name :'suburb1', sublocations:[
         {name :'street1'},
         {name :'street2'}, 
          {name :'street3'}, 
     ]},
     {name :'suburb2', sublocations:[
         {name :'street1'},
         {name :'street2'}, 
         {name :'street3'}, 
     ]}
 ]}
];
let findStreet = function(streetName) {
  return cities.map(city=>
    ({...city, sublocations:city.sublocations.map(suburb=>
      ({...suburb, sublocations:suburb.sublocations.filter(
          street=>street.name===streetName
        )
      })
    )})
  )
}
console.log(findStreet("street1"));

【讨论】：

谢谢！搜索功能现在可以完全按照我的意愿工作。

【解决方案2】：

如果您需要更多的灵活性，您可以通过添加 type 键来概括 位置类型，例如：

{ type: 'city', name: 'city1', locations: [] }

然后使用递归过滤函数对树中的每个节点进行决策，例如：

const filterTree = (nodes, childrenKey, selector) => {
  return nodes.filter(selector).map(node => {
    return node.hasOwnProperty(childrenKey)
      ? {...node, [childrenKey]: filterTree(node[childrenKey], childrenKey, selector)}
      : node;
  });
};

例子：

const locations = [
  {
    type: 'city', name: 'city1', locations: [
      {
        type: 'suburb', name: 'suburb1', locations: [
          {
            type: 'street',
            name: 'street1'
          },
          {
            type: 'street',
            name: 'street2'
          },
          {
            type: 'street',
            name: 'street3'
          },
        ]
      }, {
        type: 'suburb', name: 'suburb2', locations: [
          {
            type: 'street',
            name: 'street1'
          },
          {
            type: 'street',
            name: 'street2'
          },
          {
            type: 'street',
            name: 'street3'
          },
        ]
      }
    ]
  }
];

const filterTree = (nodes, childrenKey, selector) => {
  return nodes.filter(selector).map(node => {
    return node.hasOwnProperty(childrenKey)
      ? {...node, [childrenKey]: filterTree(node[childrenKey], childrenKey, selector)}
      : node;
  });
};

// example
const filtered = filterTree(locations, 'locations', ({type, name}) => {
  return type === 'city'                           // allow all cities 
      || (type === 'suburb' && name === 'suburb2') // but only specific suburbs
      || (type === 'street' && name === 'street2') // and streets;
});

console.log(filtered);

【讨论】：