Javascript 使用ES6改进过滤逻辑

在我的VueJS应用程序中，我有一个computed属性，它可以作为ES6函数关联，该函数的目的是过滤变量

this.classes

。撇开变量的内容不谈，我觉得我的解决方案有点“笨拙”，我想知道是否还有另一个ES6功能我不熟悉，可以帮助我改进这个逻辑，让它更容易理解

此处显示当前功能：

filteredClasses() {
      let hasGrades = this.gradeFilter.length;
      let haSubjects = this.subjectFilter.length;

      if (!hasGrades && !haSubjects) return _.flatMap(this.classes); // return all if no filter

      return _.flatMap(this.classes).filter(x => {
        return (
          x.name === this.selectedClass.name ||
          (this.gradeFilter.map(el => el.value).includes(x.grade) &&
            !haSubjects) ||
          (this.subjectFilter.map(el => el.value).includes(x.subjectId) &&
            !hasGrades) ||
          (this.gradeFilter.map(el => el.value).includes(x.grade) &&
            this.subjectFilter.map(el => el.value).includes(x.subjectId))
        );
      });
    }
  }

---

您可以通过避免在

.filter（）

的每次迭代中执行相同的

.map（）

来提高效率：为其创建一个集合，然后使用

.has（）

检查成员资格：

---

您可以通过避免在

.filter（）

的每次迭代中执行相同的

.map（）

来提高效率：为其创建一个集合，然后使用

.has（）

检查成员资格：

---

与ES6没有什么特别的关系，但是您应该简化您的条件

(A && ¬Y) || (B && ¬X) || (A && B && X && Y)

公正

(A || ¬X) && (B || ¬Y)

我还建议使用

some

而不是

map

+

includes

。这两项更改将使您的代码更易于阅读，也更高效：

filteredClasses() {
  const {gradeFilter, subjectFilter} = this;
  return _.flatMap(this.classes).filter(x =>
    x.name === this.selectedClass.name
    || (!gradeFilter.length || gradeFilter.some(el => el.value === x.grade))
    && (!subjectFilter.length || subjectFilter.some(el => el.value === x.subjectId))
  );
}

---

与ES6没有什么特别的关系，但是您应该简化您的条件

(A && ¬Y) || (B && ¬X) || (A && B && X && Y)

公正

(A || ¬X) && (B || ¬Y)

我还建议使用

some

而不是

map

+

includes

。这两项更改将使您的代码更易于阅读，也更高效：

filteredClasses() {
  const {gradeFilter, subjectFilter} = this;
  return _.flatMap(this.classes).filter(x =>
    x.name === this.selectedClass.name
    || (!gradeFilter.length || gradeFilter.some(el => el.value === x.grade))
    && (!subjectFilter.length || subjectFilter.some(el => el.value === x.subjectId))
  );
}

---

所有这些属性都有什么结构？你能给出它们的示例数据吗？我想你想检查是否有一个属性为

值的元素对应于
x.grade
？在没有回调的情况下调用
\uu.flatMap
做什么？所有这些属性都有什么结构？你能给他们一些示例数据吗？我想你想检查是否有一个属性为
值的元素对应于
x.grade
？如果没有回调调用
\uuu.flatMap
会做什么？你能为那些仍然无法得到它的人解释一下Set和Map的想法吗（我曾试图阅读MDN关于这些内容的文章，但最终一无所获）？@Sergey，这是编程中的一个通用概念。请参阅维基百科：。简而言之，它是一个值的集合，忽略重复项，与数组相反，它允许人们在恒定时间内知道该集合中是否存在值。感谢您的解释。您能为那些仍然无法获得该集合的人解释集合和映射的概念吗（我曾试图阅读MDN关于这些内容的文章，但最终一无所获）？@Sergey，这是编程中的一个通用概念。请参阅维基百科：。简而言之，它是一个值的集合，忽略重复项，与数组相反，它允许人们在恒定时间内知道该集合中是否有值。感谢您的解释，这是不等价的。a=B=0和Y=X=1@TobiasWalter然而，你是对的，因为问题A意味着X，B意味着Y。也许我不应该把简化成松散的字母……这是不等价的。A=B=0和Y=X=1@TobiasWalter你是对的，但是问题A中的条件意味着X，B意味着Y。也许我不应该把简化成字母，这样就失去了意义ng。。。