动态过滤器：使用 .filter() 创建一个动态过滤器

Question

let users = [
    { id: 11, name: 'Adam', age: 23, group: 'editor' },
    { id: 47, name: 'John', age: 28, group: 'admin' },
    { id: 85, name: 'William', age: 34, group: 'editor' },
    { id: 97, name: 'Oliver', age: 28, group: 'admin' }
  ];

var getFilteredUsers = (array, key, value) => array.filter(x => x[key] === value);
var FilteredUsers = getFilteredUsers(users, "age", 28);
console.log(FilteredUsers);

我正在尝试创建一个动态过滤器，基于传递给getFilteredUsers()函数的key:value将给出相应的输出。

目前，getFilteredUsers()仅计算equals to。但是我想使用这个同样的函数来比较所有三种比较方式，即等于、小于和大于。

- Nauman

---

你能定义接口吗？或者，当有一个“小于”符号时你会如何使用它？ - trk

Answer 1

另一种方法是通过传递谓词给函数filter来调用它。

let users = [{ id: 11, name: 'Adam', age: 23, group: 'editor' },{ id: 47, name: 'John', age: 28, group: 'admin' },{ id: 85, name: 'William', age: 34, group: 'editor' },{ id: 97, name: 'Oliver', age: 28, group: 'admin' }];
let getFilteredUsers = (array, handler) => array.filter(handler);

let  FilteredUsers = getFilteredUsers(users, x => x['age'] === 28);
console.log(FilteredUsers);

FilteredUsers = getFilteredUsers(users, x => x['age'] > 28);
console.log(FilteredUsers);

.as-console-wrapper { max-height: 100% !important; top: 0; }

- Ele

---

这样做的好处是什么，而不是直接将谓词传递给 filter()？ - Amessihel

@Amessihel 在函数 getFilteredUsers 中隐藏逻辑，这样它就遵循了DRY原则。仅为执行 filter 调用创建一个函数是没有意义的，然而，OP想要在函数 getFilteredUsers 中添加一些更多的逻辑。 - Ele

我理解“隐藏”概念，但不知道DRY原则在这里如何应用。您能否详细说明一下？这就像我们会重复调用getFilteredUsers()而不是filter。 - Amessihel

@Amessihel 看看其他答案，看看如何重复 === 字符串条件。这不是DRY原则。好吧，它被删除了！ - Ele

@Ele，好的，我明白你的意思：它在实现上遵循DRY原则。我只是想说，通过用getFilteredUsers()替换filter()调用，你不会减少重复。谢谢。 - Amessihel

优雅的解决方案。+1，就像@Amessihel所说的那样。 - trk

Answer 2

你可以使用函数进行比较并传递所需的函数，或者将equal比较作为默认值。

const
    equal = (a, b) => a === b,
    lt = (a, b) => a < b,
    gt = (a, b) => a > b,
    filter = (array, key, value, cf = equal) => array.filter(x => cf(x[key], value));

var users = [{ id: 11, name: 'Adam', age: 23, group: 'editor' }, { id: 47, name: 'John', age: 28, group: 'admin' }, { id: 85, name: 'William', age: 34, group: 'editor' }, { id: 97, name: 'Oliver', age: 28, group: 'admin' }],
    user28 = filter(users, "age", 28),
    userLT28 = filter(users, "age", 28, lt);

console.log(user28);
console.log(userLT28);

- Nina Scholz

Answer 3

你可以使用一个对象来保存操作，然后通过索引这个对象来获取应用于该操作的正确函数。

const users = [
  { id: 11, name: 'Adam', age: 23, group: 'editor' },
  { id: 47, name: 'John', age: 28, group: 'admin' },
  { id: 85, name: 'William', age: 34, group: 'editor' },
  { id: 97, name: 'Oliver', age: 28, group: 'admin' }
];

const filterUsers = (arr, key, value, op = 'eq') => {
  const ops = {
    eq: (x, y) => x === y,
    lt: (x, y) => x < y,
    gt: (x, y) => x > y
  };
  return arr.filter(x => ops[op](x[key], value));
};

console.log(filterUsers(users, 'age', 28));
console.log(filterUsers(users, 'age', 28, 'lt'));
console.log(filterUsers(users, 'age', 28, 'gt'));

- jo_va