如何基于对象数组条件正确过滤目标对象数组？

原始数据与过滤需求 #

原始对象数组：

const data = [
    { id: 0, ALT_VALUE: 11, DLT_VALUE: 76 },
    { id: 1, ALT_VALUE: 80, DLT_VALUE: 48 },
    { id: 2, ALT_VALUE: 90, DLT_VALUE: 100 },
    { id: 3, ALT_VALUE: 12, DLT_VALUE: 70 },
    { id: 4, ALT_VALUE: 90, DLT_VALUE: 100 },
    { id: 5, ALT_VALUE: 13, DLT_VALUE: 49 },
    { id: 6, ALT_VALUE: 76, DLT_VALUE: 70 },
    { id: 7, ALT_VALUE: 9, DLT_VALUE: 15 },
];

动态过滤规则数组：

const filters = [
    { parameter: "ALT_VALUE", min: 8, max: 100 },
    { parameter: "DLT_VALUE", min: 30, max: 50 },
];

预期过滤结果：

[
  { id: 5, ALT_VALUE: 13, DLT_VALUE: 49 },
  { id: 1, ALT_VALUE: 80, DLT_VALUE: 48 },
]

错误代码问题分析 #

你尝试的代码返回了全部数据，核心问题有两个：

const result = data.filter((el) => {
    return filters.filter((f) => {
        if (el[f.parameter] > f.min && el[f.parameter] < f.max) {
            return el;
        }
    });
});

1. data.filter的回调返回了filters.filter的结果——数组在JavaScript中属于真值（truthy），不管过滤后有没有符合条件的规则，都会被判定为true，导致所有元素都通过了过滤。
2. filters.filter的回调里返回el无意义，该回调需要返回布尔值来标识当前规则是否匹配。

正确实现代码 #

要实现「所有过滤规则必须同时满足」的逻辑，应该使用Array.every()方法，它会检查数组中所有元素是否都符合指定条件：

const result = data.filter((el) => {
    return filters.every((f) => {
        const value = el[f.parameter];
        // 若需要包含min和max边界值，可将> <改为>= <=
        return value > f.min && value < f.max;
    });
});

console.log(result);

逻辑说明：

1. 遍历data中的每个元素
2. 对每个元素，用every校验是否满足filters里的全部规则
3. 只有当所有规则都匹配时，该元素才会被保留到结果数组中

运行这段代码即可得到预期的过滤结果。

内容的提问来源于stack exchange，提问作者theboyonfire