javascript - 在数组映射期间结合 toLowerCase 和 indexOf 的可选链接

Question

对于自动完成输入，我在输入过程中搜索项目属性。现在我想改进这段代码

filterProjects(value: string) {
  return this.projects.filter(
    project =>
      project.key.toLowerCase().indexOf(value.toLowerCase().trim()) >=
        0 ||
      project.name.toLowerCase().indexOf(value.toLowerCase().trim()) >=
        0 ||
      project.description?.toLowerCase().indexOf(value.toLowerCase().trim()) >=
        0
  );
}

有了这个：

filterProjects(value: string) {
  return this.projects.filter(project =>
    [project.key, project.name, project.description].map(
      str => str?.toLowerCase().indexOf(value.toLowerCase().trim()) >= 0
    )
  );
}

我使用可选链接，因为description可以为空或未定义。

但它不起作用，这意味着该函数总是返回未修改的数组。此外，当在一项的描述中找到该值时，该数组不会被过滤到仅该项。

除了使用诸如此类的“旧”检查之外，还有什么解决方案if (str !== undefined)？

Answer 1

这map会返回一个布尔数组，无论如何它总是真实的，所以它不是你正在寻找的谓词。您需要Array.some（如果您打算针对旧浏览器，也需要在 lodash/underscore/ramda 中）。让我稍微调整一下内部谓词：

filterProjects(value: string) {
  return this.projects.filter(project =>
    [project.key, project.name, project.description].some(str =>
      str ? str.toLowerCase().includes(value.toLowerCase().trim()) : false
    )
  );
}

Answer 2

您可以使用“空值合并运算符 (??)”

喜欢

str => (str ?? "").toLowerCase().indexOf(value.toLowerCase().trim()) >= 0