带有数组的 Javascript 过滤器答案

【问题标题】：Javascript filter with an array带有数组的 Javascript 过滤器
【发布时间】：2017-09-12 12:19:01
【问题描述】：

这是我的代码：

data = [
  {
    Company: "Company Name",
    Type: "MINING",
    Location: "Middle East"
  },
  {
    Company: "Company Name 2",
    Type: "DISTRIBUTION OUTLET",
    Location: "Europe"
  },
  ...
];
myfilter = [
  "REPROCESSING PLANT",
  "MINING",
  "PROCESSING PLANT/MINE",
  "DISTRIBUTION OUTLET"
];
var myresults = [];
results = data.filter(function(el) {
  if (myfilter.indexOf(el.Type) != -1 && myfilter.indexOf(el.Location) != -1) {
    return el;
  }
});

console.log(results);

（原文：https://jsfiddle.net/rpsb8buh/4/）

要求：

我有一个数据数组，我想根据以下数组过滤器过滤它们，如果像这样一起使用 Type && Location，它可以正常工作

myfilter = ['REPROCESSING PLANT','MINING','PROCESSING PLANT/MINE','DISTRIBUTION OUTLET','Europe'];

但如果我在没有 Location 的情况下通过这样的过滤器，它将无法正常工作

myfilter = ['REPROCESSING PLANT','MINING','PROCESSING PLANT/MINE','DISTRIBUTION OUTLET'];

【问题讨论】：

你可能想要 ||而不是 &&
因为&& 匹配两个条件都是真实的，使用|| 而不是&&
||将显示所有数据，因此它不会过滤它会合并所有数据

标签： javascript arrays filter

【解决方案1】：

Updated fiddle

因为&& 只返回两个条件都为真。更好地使用Array#includes()

更新

您应该在过滤后验证数组长度。然后它为空，您可以根据需要分配数据数组或使用type匹配数组进行过滤

var data = [ { "Company": "Company Name", "Address": "Lorem ipsum dolor sit amet quaeque eruditi", "Telphone": "9714 883 7571", "Email": "Gma@emirates.net.ae", "Website": "www.emirates.net.au", "MarkerColor": 'pink', "Type": "MINING", "Location": "Middle East", "latitude": 25.856407, "longitude": 17.247047 }, { "Company": "Company Name 2", "Address": "Lorem ipsum dolor sit amet, vel no congue quaeque eruditi", "Telphone": "", "Email": "Gma@emirates.net.ae", "Website": "", "MarkerColor": 'brown', "Type": "DISTRIBUTION OUTLET", "Location": "Europe", "latitude": 45.526054, "longitude": 3.892456 }, { "Company": "Company Name 3", "Address": "Lorem ipsum dolor sit amet, vel no congue quaeque eruditi", "Telphone": "22115 48558", "Email": "Gma@emirates.net.ae", "Website": "", "MarkerColor": 'yellow', "Type": "REPROCESSING PLANT", "Location": "Middle East", "latitude": 20.526054, "longitude": 1.892456 }, { "Company": "Company Name 4", "Address": "", "Telphone": "221 981 558", "Email": "Gma@emirates.net.ae", "Website": "", "MarkerColor": 'light-pink', "Type": "PROCESSING PLANT/MINE", "Location": "Europe", "latitude": 48.526054, "longitude": 26.892456 }, { "Company": "Company Name 5", "Address": "", "Telphone": "111 922 252", "Email": "Gma@emirates.net.ae", "Website": "www.example.com", "MarkerColor": 'yellow', "Type": "REPROCESSING PLANT", "Location": "Middle East", "latitude": 32.526054, "longitude": 36.892456 }, { "Company": "Company Name 6", "Address": "", "Telphone": "4361 922 252", "Email": "Gma@emirates.net.ae", "Website": "www.example.com", "MarkerColor": 'yellow', "Type": "REPROCESSING PLANT", "Location": "Americas", "latitude": -32.526054, "longitude": -66.892456 }, { "Company": "Company Name 7", "Address": "", "Telphone": "4361 332 111", "Email": "Gma@emirates.net.ae", "Website": "www.ssaww.com", "MarkerColor": 'brown', "Type": "DISTRIBUTION OUTLET", "Location": "Middle East", "latitude": -32.526054, "longitude": 26.892456 }, { "Company": "Company Name 8", "Address": "", "Telphone": "221 981 558", "Email": "Gma@emirates.net.ae", "Website": "", "MarkerColor": 'light-pink', "Type": "PROCESSING PLANT/MINE", "Location": "Asia Pacific", "latitude": 18.526054, "longitude": 76.892456 }, { "Company": "Company Name 9", "Address": "Lorem ipsum dolor sit amet quaeque eruditi", "Telphone": "9714 883 7571", "Email": "Gma@emirates.net.ae", "Website": "www.emirates.net.au", "MarkerColor": 'pink', "Type": "MINING", "Location": "Middle East", "latitude": -5.856407, "longitude": 20.247047 }, { "Company": "Company Name 10", "Address": "Lorem ipsum dolor sit amet quaeque eruditi", "Telphone": "", "Email": "Gma@emirates.net.ae", "Website": "www.emirates.net.au", "MarkerColor": 'brown', "Type": "DISTRIBUTION OUTLET", "Location": "Asia Pacific", "latitude": -25.856407, "longitude": 120.247047 }, { "Company": "Company Name 11", "Address": "Lorem ipsum dolor sit amet quaeque eruditi", "Telphone": "", "Email": "Gma@emirates.net.ae", "Website": "www.emirates.net.au", "MarkerColor": 'yellow', "Type": "REPROCESSING PLANT", "Location": "Americas", "latitude": 55.856407, "longitude": -120.247047 }, { "Company": "Company Name 12", "Address": "Lorem ipsum dolor sit amet quaeque eruditi", "Telphone": "", "Email": "Gma@emirates.net.ae", "Website": "", "MarkerColor": 'pink', "Type": "MINING", "Location": "Americas", "latitude": 25.856407, "longitude": -100.247047 }, { "Company": "Company Name 13", "Address": "Lorem ipsum dolor sit amet quaeque eruditi", "Telphone": "", "Email": "Gma@emirates.net.ae", "Website": "", "MarkerColor": 'pink', "Type": "MINING", "Location": "Asia Pacific", "latitude": 4.062187, "longitude": 101.496645 }, { "Company": "Company Name 14", "Address": "Lorem ipsum dolor sit amet quaeque eruditi", "Telphone": "2233 65448 21", "Email": "Gma@emirates.net.ae", "Website": "", "MarkerColor": 'yellow', "Type": "REPROCESSING PLANT", "Location": "Asia Pacific", "latitude": 22.556300, "longitude": 113.916657 }, { "Company": "Company Name 15", "Address": "Lorem ipsum dolor sit amet quaeque eruditi", "Telphone": "2233 65448 21", "Email": "Gma@emirates.net.ae", "Website": "www.example.com", "MarkerColor": 'light-pink', "Type": "PROCESSING PLANT/MINE", "Location": "Americas", "latitude": 25.826347, "longitude": -80.207989 }, { "Company": "Company Name 16", "Address": "Lorem ipsum dolor sit amet, vel no congue quaeque eruditi", "Telphone": "", "Email": "Gma@emirates.net.ae", "Website": "", "MarkerColor": 'yellow', "Type": "REPROCESSING PLANT", "Location": "Europe", "latitude": 39.526054, "longitude": -3.892456 } ];

var  myfilter = ['REPROCESSING PLANT','MINING','PROCESSING PLANT/MINE','DISTRIBUTION OUTLET','Europe'];
var myresults= [];
 var results = data.filter(function(el){	
             return myfilter.includes(el.Type) &&  myfilter.includes(el.Location)
    })
		
		if(results.length ==0 ){ //if array empty
		results = data.filter(function(el){	
             return myfilter.includes(el.Type);//set  all matched type
		})
		//or if you need all 
		//assign
		//results = data
		}

console.log(results)

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

不..它有效..它显示所有数据。因为类型与 myfilter 数组匹配。更改 myfilter 数组。你可以看到console.log.see this fiddle
感谢您的宝贵时间，但它应该只显示数据编号 3 和 16，因为这两个只有位置：欧洲，它无法显示不同位置的所有数据
满足您的旧规则&&。 jsfiddle.net/rpsb8buh/9 。我提到了我的答案，但没有在 myfilter 数组中分配位置，它不会返回任何内容，因为它与我的过滤器数组中的任何值都不匹配
是的，但是如果我通过没有位置的过滤器，它将返回空数组，而它应该将所有数据作为我放置的过滤器的所有数据返回，即 myfilter = ['REPROCESSING PLANT','采矿','加工厂/矿山','分销网点'];
好的，我明白了。您应该在过滤后验证数组长度。 see this fiddle

【解决方案2】：

这是你的过滤功能：

if (myfilter.indexOf(el.Type) != -1 && myfilter.indexOf(el.Location) != -1)

如果类型和位置都存在于 myFilter 中，则条件为真。如果这不是您的目标，也许您可以像这样使用 OR (||)：

if (myfilter.indexOf(el.Type) != -1 || myfilter.indexOf(el.Location) != -1)

这样，如果类型或位置（或两者）都存在，则条件为真。

【讨论】：

||将显示所有数据，因此它不会过滤它会合并所有数据
也许我遗漏了一些东西，但是如果类型和位置都不存在，那么两个布尔值都将为假，因此整个表达式将为假。因此，如果类型和位置都不存在于 myfilter 中，您将无法获取数据。

【解决方案3】：

更新：

工作解决方案：Fiddle

与： Array#Filter & Array#Some

例子：

let data = [
{
        "Company": "Company Name",
        "Address": "Lorem ipsum dolor sit amet quaeque eruditi",
        "Telphone": "9714 883 7571",
        "Email": "Gma@emirates.net.ae",
        "Website": "www.emirates.net.au",
        "MarkerColor": 'pink',
        "Type": "MINING",
        "Location": "Middle East",
        "latitude": 25.856407,
        "longitude": 17.247047
    },
    {
        "Company": "Company Name 2",
        "Address": "Lorem ipsum dolor sit amet, vel no congue quaeque eruditi",
        "Telphone": "",
        "Email": "Gma@emirates.net.ae",
        "Website": "",
        "MarkerColor": 'brown',
        "Type": "DISTRIBUTION OUTLET",
        "Location": "Europe",
        "latitude": 45.526054,
        "longitude": 3.892456
    },
    {
        "Company": "Company Name 3",
        "Address": "Lorem ipsum dolor sit amet, vel no congue quaeque eruditi",
        "Telphone": "22115 48558",
        "Email": "Gma@emirates.net.ae",
        "Website": "",
        "MarkerColor": 'yellow',
        "Type": "REPROCESSING PLANT",
        "Location": "Middle East",
        "latitude": 20.526054,
        "longitude": 1.892456
    },
    {
        "Company": "Company Name 4",
        "Address": "",
        "Telphone": "221 981 558",
        "Email": "Gma@emirates.net.ae",
        "Website": "",
        "MarkerColor": 'light-pink',
        "Type": "PROCESSING PLANT/MINE",
        "Location": "Europe",
        "latitude": 48.526054,
        "longitude": 26.892456
    },
    {
        "Company": "Company Name 5",
        "Address": "",
        "Telphone": "111 922 252",
        "Email": "Gma@emirates.net.ae",
        "Website": "www.example.com",
        "MarkerColor": 'yellow',
        "Type": "REPROCESSING PLANT",
        "Location": "Middle East",
        "latitude": 32.526054,
        "longitude": 36.892456
    },
    {
        "Company": "Company Name 6",
        "Address": "",
        "Telphone": "4361 922 252",
        "Email": "Gma@emirates.net.ae",
        "Website": "www.example.com",
        "MarkerColor": 'yellow',
        "Type": "REPROCESSING PLANT",
        "Location": "Americas",
        "latitude": -32.526054,
        "longitude": -66.892456
    },
    {
        "Company": "Company Name 7",
        "Address": "",
        "Telphone": "4361 332 111",
        "Email": "Gma@emirates.net.ae",
        "Website": "www.ssaww.com",
        "MarkerColor": 'brown',
        "Type": "DISTRIBUTION OUTLET",
        "Location": "Middle East",
        "latitude": -32.526054,
        "longitude": 26.892456
    },
    {
        "Company": "Company Name 8",
        "Address": "",
        "Telphone": "221 981 558",
        "Email": "Gma@emirates.net.ae",
        "Website": "",
        "MarkerColor": 'light-pink',
        "Type": "PROCESSING PLANT/MINE",
        "Location": "Asia Pacific",
        "latitude": 18.526054,
        "longitude": 76.892456
    },
    {
        "Company": "Company Name 9",
        "Address": "Lorem ipsum dolor sit amet quaeque eruditi",
        "Telphone": "9714 883 7571",
        "Email": "Gma@emirates.net.ae",
        "Website": "www.emirates.net.au",
        "MarkerColor": 'pink',
        "Type": "MINING",
        "Location": "Middle East",
        "latitude": -5.856407,
        "longitude": 20.247047
    },
    {
        "Company": "Company Name 10",
        "Address": "Lorem ipsum dolor sit amet quaeque eruditi",
        "Telphone": "",
        "Email": "Gma@emirates.net.ae",
        "Website": "www.emirates.net.au",
        "MarkerColor": 'brown',
        "Type": "DISTRIBUTION OUTLET",
        "Location": "Asia Pacific",
        "latitude": -25.856407,
        "longitude": 120.247047
    },
    {
        "Company": "Company Name 11",
        "Address": "Lorem ipsum dolor sit amet quaeque eruditi",
        "Telphone": "",
        "Email": "Gma@emirates.net.ae",
        "Website": "www.emirates.net.au",
        "MarkerColor": 'yellow',
        "Type": "REPROCESSING PLANT",
        "Location": "Americas",
        "latitude": 55.856407,
        "longitude": -120.247047
    },
    {
        "Company": "Company Name 12",
        "Address": "Lorem ipsum dolor sit amet quaeque eruditi",
        "Telphone": "",
        "Email": "Gma@emirates.net.ae",
        "Website": "",
        "MarkerColor": 'pink',
        "Type": "MINING",
        "Location": "Americas",
        "latitude": 25.856407,
        "longitude": -100.247047
    },
    {
        "Company": "Company Name 13",
        "Address": "Lorem ipsum dolor sit amet quaeque eruditi",
        "Telphone": "",
        "Email": "Gma@emirates.net.ae",
        "Website": "",
        "MarkerColor": 'pink',
        "Type": "MINING",
        "Location": "Asia Pacific",
        "latitude": 4.062187,
        "longitude": 101.496645
    },
    {
        "Company": "Company Name 14",
        "Address": "Lorem ipsum dolor sit amet quaeque eruditi",
        "Telphone": "2233 65448 21",
        "Email": "Gma@emirates.net.ae",
        "Website": "",
        "MarkerColor": 'yellow',
        "Type": "REPROCESSING PLANT",
        "Location": "Asia Pacific",
        "latitude": 22.556300,
        "longitude": 113.916657
    },
    {
        "Company": "Company Name 15",
        "Address": "Lorem ipsum dolor sit amet quaeque eruditi",
        "Telphone": "2233 65448 21",
        "Email": "Gma@emirates.net.ae",
        "Website": "www.example.com",
        "MarkerColor": 'light-pink',
        "Type": "PROCESSING PLANT/MINE",
        "Location": "Americas",
        "latitude": 25.826347,
        "longitude": -80.207989
    },
    {
        "Company": "Company Name 16",
        "Address": "Lorem ipsum dolor sit amet, vel no congue quaeque eruditi",
        "Telphone": "",
        "Email": "Gma@emirates.net.ae",
        "Website": "",
        "MarkerColor": 'yellow',
        "Type": "REPROCESSING PLANT",
        "Location": "Europe",
        "latitude": 39.526054,
        "longitude": -3.892456
    }
];
// Solution when locations is provided:

const types = ['REPROCESSING PLANT','MINING','PROCESSING PLANT/MINE','DISTRIBUTION OUTLET'];
const locations = ['Europe']; // Just remove 'Europe' or add different location and test it!

let result = data.filter(d => types.some(t => d.Type === t) && locations.length > 0 ? locations.some(l => d.Location === l) : true);
console.log(result);

【讨论】：

您回答的操作问题并不相同。两者都在做同样的工作。如果myfilter是单数组或双数组。但匹配条件相同
@prasad 所以，解决方案是： let result = data.filter(d => myfilter.some(t => d.Type === t) || myfilter.some(l = > d.Location === l)) 正如你所说他需要 ||插入&&
我想是的。但是 OP 对他的问题不清楚。让我们等待 op 更新
这也不起作用，因为它应该只显示所有类型为['REPROCESSING PLANT','MINING','PROCESSING PLANT/MINE','DISTRIBUTION OUTLET'] 和位置 = ['Europe '] 这只有 2 个结果
像这样：jsfiddle.net/rpsb8buh/15 btw 来自欧洲的 3 个地点。也许我错了。