Javascript React-Redux：根据对象的属性是否与状态中的其他数组匹配，从状态中筛选对象数组

我有一个连接的React组件，它从state获取一个Plot对象数组

它还从state获取多个字符串数组。像这样：

function mapStateToProps(state) {
    return {
        plots: state.plots.plots,
        varietyFilter: state.plots.varietyFilter,
        regionFilter: state.plots.regionFilter,
        growerFilter: state.plots.growerFilter,
        plotNameFilter: state.plots.plotNameFilter
    };
}

每个绘图都类似于以下内容：

{ name, variety, region, grower}

…每个属性都是字符串

我想通过这些过滤器阵列中是否存在适当的属性来过滤绘图

标准解决方案是使用

const filteredArray = inputArray.filter( a => filterArray.indexOf(a.property)

这种方法有三个问题。首先，如果过滤器数组为空，则过滤数组中的任何元素都不会通过，而我希望它们都通过。第二，当这些从状态显示的过滤器阵列尚未初始化时会发生什么？将出现错误，因为中的indexOf不可用。第三，我想链接这些过滤器方法，但只链接那些初始化了某种过滤器数组的方法

到目前为止，我已经想到了这个：

if (this.props.plots) {
            filteredProps = this.props.plots.filter(function(plot) {
                if (!varietyFilter.indexOf) {
                    return true;
                }
                return varietyFilter.indexOf(plot.variety) > -1;
            });
        }

不过，这似乎能让一切顺利通过。如果删除第一个return语句，则会得到一个错误，组件首次初始化时indexOf方法不存在

---

所以，有两个问题。首先，如何筛选对象数组，以确定每个对象的给定属性是否包含在状态中可能存在或不存在的字符串数组中？其次，如何对一系列数组执行此操作，每个数组对应于原始数组中对象的不同属性？

若filterArray为空数组，则允许传递所有元素，若filterArray为空数组或未定义，则防止出错，可以执行以下操作：

const filteredArray = inputArray.filter( a => (filterArray || []).length === 0 || filterArray.includes(a.property));

下面的代码将空数组设置为filterArray的默认值（如果为null或未定义）：

filterArray || []

如果数组长度为正，则以下部分进行过滤：

|| filterArray.includes(a.property)

这些代码相当于：

const filteredArray = inputArray.filter( a => {
    if (!filterArray) {
        filterArray = [];
    }
    if (filterArray.length === 0) {
        return true;
    } else {
        return filterArray.includes(a.property);
    }
}

链接多个过滤器可以通过以下方式完成：

var filters = [
    { prop: 'prop1', filterArray: ['abc', 'def'] },
    { prop: 'prop2', filterArray: ['abc'] },
    { prop: 'prop3', filterArray: ['abc', 'cde'] }
];

var filteredArray = [...inputArray];   // Copy inputArray

filters.forEach(filterObj => {
    filteredArray= filteredArray.filter( a => (filterObj.filterArray || []).length === 0 || filterObj.filterArray.includes(a[filterObj.prop]));
});

---

您能提供您正在使用的每个变量的典型值吗？即绘图和过滤器？我仍然不确定是处理对象数组还是处理包含数组的对象。有两个问题：1）为什么要检查filterArray或空白数组的长度是否为0？由于空白数组的长度始终为0，因此此检查是否不总是返回true？2） 仅仅检查filterArray.indexOf（a.property）是如何工作的？为什么我们不需要检查indexOf值是否大于-1？2）我已更改为使用array.prototype.includes（它返回true或false）。对于indexOf，它应该是filterArray。indexOf（a.property）！=-1）如果数组不是空的，filterArray | |[]计算为filterArray本身，长度为正，因此（filterArray | |[]）。长度==0计算为false，最终返回filterArray。包含（a.property）非常漂亮。谢谢，当我看到人们掌握了ES6的功能时，我真的感觉很好。