如何在 JavaScript 中过滤具有多个条件的数组？ [复制]答案

【问题标题】：How can I filter an array with multiple conditions in JavaScript? [duplicate]如何在 JavaScript 中过滤具有多个条件的数组？ [复制]
【发布时间】：2021-11-20 18:32:45
【问题描述】：

这是我的问题：
我的页面上有一个下拉菜单，用户可以在其中单击各种菜单，每个菜单都有 3 个选项。我只想显示符合所点击选项的汽车（我提供了部分 HTML 代码，我希望这就足够了）

品牌：
选项 1 = 所有品牌；
选项 2 = 座位；
选项 3 = 斯柯达；

价格：
选项 1 = 所有价格；
选项 2 = 低于 35000；
选项 3 = 超过 35000；

类型：
选项 1 = 所有类型；
选项 2 = 新的；
选项 3 = 已使用；

//JSON data snippet
{
  "vehicle": [{
    "id": 1,
    "brand": "Seat",
    "name": "Seat Ibiza 5V",
    "price": "12000,00 €",
    "description_small": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
    "description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
    "images": [
      "ibiza_1.jpg",
      "ibiza_2.jpg",
      "ibiza_3.jpg"
    ],
    "detail": {
      "vehicleStand": "Unfallfrei",
      "origin": "Deutschland",
      "mileage": "120.000km",
      "displacement": "1.198 cm³",
      "power": "69ps",
      "fuelType": "Benzin",
      "consumption": [
        "Kombiniert: ca. 3.4l/100km",
        "Inneerorts: ca. 5.1l/100km",
        "Außerorts: ca. 4.5l/100km"
      ],
      "seats": 5,
      "doors": "2/3",
      "transmission": "Schaltgetriebe",
      "pullutionClass": "Euro 5",
      "environmentalBadge": "Grün",
      "initialRegistration": "10/2013",
      "vehicleOwner": 1
    }
  },]
};
//JSON data end. the JSON has 4 more "vehicles" in it
// the whole JSON data is pushed into this array, but I thought that wasn"t relevant for my problem so I didn"t include it

allCars 是我的 JSON 数据被推送到的全局数组

理论上，我知道我必须使用 for 循环遍历 allCars，并在其中使用多个询问条件是否为真，如果是，
检查第二个并第三个条件并将结果推送到filteredCars
，但我正在努力把什么放在哪里。

我还担心的是如何正确检查价格，因为在我看来，JSON 中的价格是字符串而不是数字？

我会感谢任何输入，如果我能达到我的需要，我会尝试弄清楚如何更新我的问题（哦，请尝试用非常简单的术语来解释，我经常很容易混淆，你可能会注意到^^）

let allCars = [];

function getSelectedOptions() {
  var brand = document.getElementById('brands').value;
  var price = document.getElementById('prices').value;
  var type = document.getElementById('types').value;

  carsFilter(brand, price, type);
}

function carsFilter(brand, price, type) {
  var filteredCars = [];

  for (i = 0; i < allCars.length; i++) {
    if (brand == 'all' || brand == allCars[i].brand) {
      if (price == 'allPrices' || price == allCars[i].price) {
        if (type == 'allTypes' || type == allCars[i].vehicleOwner) {
        }
      }
    }
    filteredCars.push(allCars[i].brand);
    filteredCars.push(allCars[i].price);
    filteredCars.push(allCars[i].vehicleOwner);
  }
  showCars(filteredCars);
  //a function which will then show the result cars I get out of the filter
}

<!DOCTYPE html>

<label for="brands">Brands</label>
<select id="brands" name="carBrands">
  <option value="all">All</option>
  <option value="seat">Seat</option>
  <option value="skoda">Škoda</option>
</select>
<label for="prices">Prices</label>
<select id="prices" name="carPrices">
  <option value="allPrices">All</option>
  <option value="underPrice">under 35000,00</option>
  <option value="overPrice">over 35000,00</option>
</select>
<label for="types">New and used cars</label>
<select id="types" name="carTypes">
  <option value="allTypes">All</option>
  <option value=0>New</option>
  <option value=1>Usedt</option>
</select>

【问题讨论】：

parseFloat("12000,00 €") 应该忽略 € 并返回 12000。

标签： javascript html arrays for-loop if-statement

【解决方案1】：

假设您的数据集包含所有具有某些属性的汽车，可以过滤。

下拉列表仅包含所需部分的值 all 只是一个空字符串。过滤不需要此信息。

通过提交公式，您需要收集选项，将值分配给相应的变量，如brand，如果不是空字符串，则添加预定义函数，如

brandFn = o => o.brand === brand
                           ^ content of pull down
               ^ property of an item 
          ^ item/object

到函数数组fns。

然后过滤适用于Array#filter 和Array#every：

result = data.filter(o => fns.every(fn => fn(o)));

为了过滤数值，添加不带格式和货币的数字，并选择带有对象的函数，例如

pricesFns = {
    under: o => o.price < 35000,
    over: o => o.price >= 35000
}

根据对fns数组的选择添加一个函数。

【讨论】：