如何按对象键和值过滤对象？答案

【问题标题】：How do I filter an object by object keys and values?如何按对象键和值过滤对象？
【发布时间】：2021-05-04 11:57:01
【问题描述】：

我有两个数组，一个是带有键和值的过滤器，一个是数据。

const filter = [
   {key: "name", value: "foo"},
   {key: "url", value: "foobar.com"}
]

const data = [
   {name: "foo", url: "google.com", extra: "hello!"}, 
   {name: "foo", url: "foobar.com", extra: "hello!"}, 
   {name: "bar", url: "foobar.com", extra: "hello!"},
   {name: "foo", url: "foobar.com", extra: "goodbye!"}
]

我想实现一个执行以下操作的单行过滤器选项：

const filteredData = data. //doSomething();

console.log(filteredData) 

/** prints out: 
 * [{name: "foo", url: "foobar.com", extra: "hello!"},{name: "foo", url: "foobar.com", extra: "goodbye!"}]
 **/

过滤器数组是一个动态变化的键和值列表。目前，我通过两个明确检查类型和值的 Array.prototype.filter 常量硬编码了name 和url，但我知道可扩展性和最佳实践，这并不理想。任何帮助将不胜感激。提前谢谢你。

【问题讨论】：

标签： javascript arrays ecmascript-6 filter

【解决方案1】：

您可以使用.filter 遍历data 数组，并使用.every 来检查当前项与filter 条件的匹配：

const filter = [
   {key: "name", value: "foo"},
   {key: "url", value: "foobar.com"}
];
const data = [
   {name: "foo", url: "google.com", extra: "hello!"}, 
   {name: "foo", url: "foobar.com", extra: "hello!"}, 
   {name: "bar", url: "foobar.com", extra: "hello!"},
   {name: "foo", url: "foobar.com", extra: "goodbye!"}
];

const filteredData = data.filter(item =>
   filter.every(({key,value}) => item[key]===value)
);

console.log(filteredData)

【讨论】：

【解决方案2】：

使用Array.filter() 迭代data 项。使用Array.every() 迭代filter，并检查当前项的每个值是否与各自的过滤器值匹配。

const fn = (arr, filter) => arr.filter(o => 
  filter.every(({ key, value }) => o[key] === value)
) 

const filter = [{"key":"name","value":"foo"},{"key":"url","value":"foobar.com"}]

const data = [{"name":"foo","url":"google.com","extra":"hello!"},{"name":"foo","url":"foobar.com","extra":"hello!"},{"name":"bar","url":"foobar.com","extra":"hello!"},{"name":"foo","url":"foobar.com","extra":"goodbye!"}]

const result = fn(data, filter)

console.log(result)

【讨论】：