如何使用多个条件数组链接 javascript 中的多个过滤器函数

Question

我有一个包含多个属性的数据数组，需要通过 select 框过滤掉。就像一个电子商务网站，您可以在其中 select 一个类别，然后是某些尺寸，然后是价格，然后是颜色，etc.etc。所有的过滤器结合起来，给出一个结果。

如何筛选多个属性并最终筛选出仅包含 selected 值的 return 数据？ http://jsfiddle.net/Jeffwise/z2y41k85/3/

var vm = new Vue({
  el: '#root',
  data: {
    list: [{
        name: 'asd',
        category: 1
      },
      {
        name: 'zxc',
        category: 1
      },
      {
        name: 'qwe',
        category: 1
      },
      {
        name: 'qqq',
        category: 2
      },
      {
        name: 'www',
        category: 2
      },
      {
        name: 'eee',
        category: 2
      },
      {
        name: 'rrr',
        category: 2
      },
      {
        name: 'ttt',
        category: 2
      },
      {
        name: 'ert',
        category: 1
      },
      {
        name: 'wer',
        category: 2
      },
      {
        name: 'sdf',
        category: 1
      },
      {
        name: 'dfg',
        category: 2
      },
      {
        name: 'xcv',
        category: 1
      }
    ],
    categories: [{
        id: 1,
        name: 'cat 1'
      },
      {
        id: 2,
        name: 'cat 2'
      }
    ],
    keyword: 'e',
    category: 1
  },

  computed: {
    filteredByAll() {
      return getByCategory(getByKeyword(this.list, this.keyword), this.category)
    },
    filteredByKeyword() {
      return getByKeyword(this.list, this.keyword)
    },
    filteredByCategory() {
      return getByCategory(this.list, this.category)
    }
  }
});

function getByKeyword(list, keyword) {
  const search = keyword.trim()
  if (!search.length) return list
  return list.filter(item => item.name.indexOf(search) > -1)
}

function getByCategory(list, category) {
  if (!category) return list
  return list.filter(item => item.category === category)
}

我想我正在寻找的是将多个过滤函数链接在一起。但是，你是怎么做的？这个 js fiddle 很接近，但是你怎么能给它添加更多的过滤器，所以你可以检查更多 functions/filters？我总共有 10 个过滤器，它们应该 'work' 在一起。我是一个绝对的初学者，还在学习中。

Answer 1

当然有几种方法可以解决这个问题。

而不是链接（例如 data.withKey('cheap').withBrand('Levis') - 这需要一个带有可链接方法的新 class）我会使用一个采用一个 filterObject 的递归方法。每 key: value 对是一个过滤器：

methods: {
  filter(data, filters) {
    // filters should be an object of filterOptions, e.g. { name: 'blue', weight: 20 }
    const filterProp = Object.keys(filters)[0]; // get first prop to filter for

    // filter your data by this prop and the corresponding value
    const filteredData = data.filter((entry) => {
      return entry[filterProp] === filters[filterProp]
    });

    // get all the other filters through dynamic destructuring
    const { [filterProp]: deletedFilter, ...otherFilters } = filters;

    // if there are no other filters return filteredData,
    // else filter filteredData again with the remaining filters
    return Object.keys(otherFilters).length <= 0
      ? filteredData : this.filter(filteredData, otherFilters);
  },
    ...
}

如何使用多个条件数组链接 javascript 中的多个过滤器函数

How to chain multiple filter functions in javascript with multiple conditions array

javascript

function

filter

chaining