从 Javascript 中的过滤器对象中删除空白数组

Question

我实际上正在研究基于 React.js 框架的 React Native。所以我在这里尝试的是创建一个对象，其中包含来自多个数组的所有过滤器参数。 例如。

//This is not my Filter Object. 
//A state object in React Native is where you define your variables.
state = {
  holder: [], //Holds temp data which will be filled with filtered items
  allData: [], //Holds data of all the items
  
  //My filter parameters
  location: "",
  category: [],
  offers: [],
}

为便于理解，我为您填写了过滤器参数：location: "England"、category: ["Mens","Womens"] 和 offers: ["20%", "40%", "60%"]

如果所有 3 个过滤条件都分配有值，这就是我的数组的样子。现在这是我为我的数组应用的过滤器函数：

filterProducts = () => {
  //Packing all of my filter conditions in one Filter Object
  let query = {
    filter1: this.state.location,
    filter2: this.state.category,
    filter3: this.state.offers,
  }

  //Filter Logic on my Holder Array
  const filteredData = this.state.allData.filter(function (item) {
    return Object.entries(query).every(([key, value]) =>
      value.includes(item[key])
    );
  });
  console.log("Result: Filtered Array", filteredData);
  this.setState({ holder: filteredData });
}

为了您更容易理解，我的query 对象如下所示：

let query = { 
  filter1: "England",
  filter2: ["Mens","Womens"],
  filter3: ["20%", "30%", "40%"],
}

那么现在我的问题是什么？只有当我的过滤器对象query 看起来像上面时，我的过滤器逻辑才有效。也就是说，如果所有 3 个过滤器参数都分配了一些值。

如果我的过滤器对象 query 变成这样，我的过滤器逻辑会中断并返回一个 [] 数组：

let query = {
  filter1: "England",
  filter2: ["Mens","Womens"],
  filter3: [], //Blank array inside object because user didn't pick any values
}

所以我的问题是：

1. 如何从对象中删除空白数组？
2. 有没有办法改变我的过滤器逻辑，如果它的数组是空白的，它会跳过 filter3？意思是，在不从我的过滤器对象中删除空白数组的情况下，只使用分配了一些值的参数来过滤数组？

Answer 1

我认为这样的事情应该可以工作。 您可以使用Object.keys 来迭代您的值并根据条件附加到新对象。

您可以查看example here

const onlyData = {}

Object.keys(query).forEach(filterKey => {
  const filterValue = query[filterKey];
  if (filterValue.length) onlyData[filterKey] = filterValue;
})